nav {
    @apply w-48 h-screen bg-marine flex flex-col justify-between shadow;
    transition: width 0.3s;

    svg {
        @apply fill-current text-white w-12 p-2;
        transition: color 0.3s;

        &:hover {
            @apply text-white;
        }
    }

    .logo {
        @apply block text-white;

        svg {
            @apply w-40 m-2;
            transition: width 0.3s, color 0.3s;
        }
    }

    .nav-item {
        @apply flex items-center text-white;
        transition: background-color 0.3s;

        span {
            @apply font-bold text-xl ml-2 overflow-hidden truncate;
            transition: width 0.3s;

            &:hover {
                @apply text-white;
            }
        }

        &:hover {
            @apply bg-gray-900;

            span,
            svg {
                @apply text-white;
            }
        }
    }

    .nav-toggle svg {
        transition: transform 0.3s;
    }
}

nav.small {
    @apply w-16;

    .logo {
        @apply w-16 p-0;

        svg {
            @apply w-16 m-0;
        }
    }

    .nav-item span {
        @apply w-0;
    }

    .nav-toggle svg {
        transform: rotate(-180deg);
    }
}

.app {
    //min-width: 100%;
    width: initial;
}