MusicTopus/sass/navbar.scss

.navbar {
    min-height: 3.5rem;
    background-color: var(--navbar-color);
    box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
    color: rgba(0,0,0,.7);
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    @include transition() {}

    @include respond-to("medium-up") {
        align-items: stretch;
        display: flex;
    }

    &.container {
        max-width: 1330px;
        margin: 0 auto;
    }

    .navbar-brand {
        align-items: stretch;
        display: flex;
        min-height: 3.25rem;

        .navbar-item {
            align-items: center;
            display: flex;

            img {
                max-height: 32px;
            }

            span {
                word-break: break-word;
                color: var(--font-color);
                font-size: 2rem;
                line-height: 1.125;
                margin-left: .5rem !important;
                @include transition() {}
            }
        }
    }

    .navbar-burger {
        padding: 0;
        margin: 0;
        font-size: 1em;
        appearance: none;
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        height: 3.25rem;
        position: relative;
        width: 3.25rem;
        margin-left: auto;
        color: var(--font-color);

        @include respond-to("medium-up") {
            display: none;
        }

        span {
            background-color: currentColor;
            display: block;
            height: 1px;
            left: calc(50% - 8px);
            position: absolute;
            transform-origin: center;
            transition-duration: 86ms;
            transition-property: background-color,opacity,transform;
            transition-timing-function: ease-out;
            width: 16px;

            &:nth-child(1) {
                top: calc(50% - 6px);
            }
            &:nth-child(2) {
                top: calc(50% - 1px);
            }
            &:nth-child(3) {
                top: calc(50% + 4px);
            }
        }

        &.is-active {
            span {
                &:nth-child(1) {
                    transform: translateY(5px) rotate(45deg);
                }
                &:nth-child(2) {
                    opacity: 0;
                }
                &:nth-child(3) {
                    transform: translateY(-5px) rotate(-45deg);
                }
            }
        }
    }

    .navbar-item {
        line-height: 1.5;
        padding: .5rem;
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;
        color: var(--font-color);
        display: block;
        @include transition() {}

        &.has-dropdown {
            padding: 0;

            @include respond-to("medium-up") {
                display: flex;
                align-items: stretch;

                .navbar-dropdown {
                    background-color: var(--default-color);
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;
                    border-top: 2px solid var(--default-hl-color);
                    box-shadow: 0 8px 8px rgba(10,10,10,.1);
                    display: none;
                    font-size: .875rem;
                    min-width: 280px;
                    position: absolute;
                    top: 100%;
                }

                &:hover {
                    background-color: var(--default-color);

                    .navbar-link {
                        background-color: var(--default-hl-color);
                        color: var(--hover-font-color);
                    }

                    .navbar-dropdown {
                        display: block;
                    }
                }
            }
        }

        @include respond-to("medium-up") {
            align-items: center;
            display: flex;
        }
    }

    .navbar-link {
        color: var(--font-color);
        display: block;
        line-height: 1.5;
        padding: .5rem .75rem;
        position: relative;
        cursor: pointer;
        padding-right: 2.5em;
        @include transition() {}

        @include respond-to("medium-up") {
            display: flex;
            align-items: center;

            &::after {
                border: 3px solid transparent;
                border-radius: 2px;
                border-right: 0;
                border-top: 0;
                content: " ";
                display: block;
                height: .625em;
                pointer-events: none;
                position: absolute;
                top: 50%;
                transform: rotate(-45deg);
                transform-origin: center;
                width: .625em;
                border-color: var(--secondary-color);
                margin-top: -0.375em;
                right: 1.125em;

                @include respond-to("medium-up") {
                    border-color: var(--font-color);
                }
            }
        }

        .icon {
            align-items: center;
            display: inline-flex;
            justify-content: center;
            height: 1.5rem;
            width: 1.5rem;
        }


    }

    .navbar-menu {
        display: none;
        background-color: var(--default-color);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: .5rem 0;
        @include transition() {}

        @include respond-to("medium") {
            max-height: calc(100vh - 3.25rem);
            overflow: auto;
        }

        @include respond-to("medium-up") {
            flex-grow: 1;
            flex-shrink: 0;
            align-items: stretch;
            display: flex;

            background-color: initial;
            box-shadow: none;
            padding: 0;
        }

        &.is-active {
            display: block;
        }

        @include respond-to("medium-up") {
            .navbar-start {
                justify-content: flex-start;
                margin-right: auto;
                align-items: stretch;
                display: flex;

                .navbar-item {
                    color: rgba(0,0,0,.7);
                    align-items: center;
                    display: flex;
                }
            }

            .navbar-end {
                justify-content: flex-end;
                margin-left: auto;
                align-items: stretch;
                display: flex;
            }
        }
    }

    .navbar-dropdown {
        font-size: .875rem;
        padding-bottom: .5rem;
        padding-top: .5rem;

        hr {
            background-color: var(--font-color);
            border: none;
            height: 2px;
            margin: .5rem 0 0 1.5rem;
        }

        @include respond-to("medium-up") {
            background-color: var(--default-color);
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            border-top: 2px solid var(--default-hl-color);
            box-shadow: 0 8px 8px rgba(10,10,10,.1);
            display: none;
            font-size: .875rem;
            right: 0;
            min-width: 100%;
            position: absolute;
            top: 100%;

            hr {
                margin: 0.5rem 0;
            }

            // .navbar-item {
            //     white-space: nowrap;
            //     padding-block: .375rem;
            // }
        }
    }

    img {
        height: auto;
        max-width: 100%;
    }

    a {
        text-decoration: none;
    }

    .buttons {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .button {
            margin-right: 0.75rem;
        }

        &:last-child {
            margin-bottom: -0.5rem;
        }
    }
}


[data-theme="dark"] {
    .navbar {
        box-shadow: none;
    }
}

nav {
    ul {
        padding-inline: 16px;
    }
}