documentation/.vuepress/theme/styles/nav.css

.nav {
    @apply .fixed .w-full .flex .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm .z-20;
    height: 56px;
    line-height: 54px;

    .sidebar-button {
        @apply p-3;

        .icon {
            @apply text-white block h-6;
        }
    }

    .home-link {
        @apply .text-white .font-light;

        .logo {
            @apply .h-full .float-left;
        }

        .site-name {
            @apply .float-left .pl-2 .text-2xl;
        }
    }

    .search-box {
        @apply .relative .px-2 .w-full .text-right;

        input {
            transition: all 200ms ease-in;
            @apply .text-grey-lighter .w-1/2 .outline-none .px-4 .py-2 .rounded;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 0, 0, 0.3);

            &:active, &:focus {
                @apply .w-5/6;
                transition: all 200ms ease-in;
                background: rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(0, 0, 0, 0.7)
            }
        }

        .suggestions {
            @apply absolute;
        }
    }

    .nav-links {
        .nav-link {
            @apply .text-grey-lighter .ml-6 .font-normal;

            &:hover {
                @apply .no-underline .border-b-2 .border-grey-lighter .pb-1 .leading-normal;
            }
        }

        @screen md {
            .nav-item > a:not(.external).router-link-active {
                @apply .border-b-2 .border-grey-lighter .pb-1 .leading-normal;

                &:hover {
                    @apply .no-underline;
                }
            }
        }
    }
}