hinode/assets/scss/components/_navbar.scss

// stylelint-disable annotation-no-unknown

// Source: https://jsfiddle.net/njhgr40m/
.navbar {
    --bs-navbar-expanded-color: var(--bs-body-bg);
    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);

    transition: 0.5s ease-in-out;
    background-color: transparent;

    @each $state, $val in $theme-colors {
        --bs-navbar-color-#{$state}: #{$val};
    }
}

.nav-active, .navbar-expanded {
    background-color: var(--bs-navbar-expanded-color);
    border-bottom: 1px solid var(--bs-secondary-bg);
}

.nav-link {
    margin: 0 .15rem;
}

.navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
    border-bottom: solid 1px var(--bs-navbar-hover-color);
    margin-bottom: -1px;
}

.navbar-contrast {
    --bs-navbar-color: white !important;
    --bs-navbar-hover-color: white !important;
    --bs-navbar-disabled-color: white !important;
    --bs-navbar-active-color: white !important;
    --bs-navbar-toggler-color: white;
}

.navbar-expanded {
    box-shadow: $box-shadow-sm;
}

.nav-item .vr {
    color: var(--bs-navbar-color);
}

/* Remove border from toggler */
.navbar-toggler {
    border: 0 if($enable-important-utilities, !important, null);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none if($enable-important-utilities, !important, null);
    box-shadow: none if($enable-important-utilities, !important, null);
    border: 0 if($enable-important-utilities, !important, null);
}

.fw-30 {
    width: 30px !important;
}

/* Lines of the Toggler */
.toggler-icon {
    width: 30px;
    height: 3px;
    display: block;
    transition: all 0.2s;
}

/* Adds Space between the lines */
.middle-bar {
    margin: 5px auto;
}

/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

/* State when navbar is opened (END) */

/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

/* State when navbar is collapsed (END) */

/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
    background-color: var(--bs-navbar-toggler-color);
}

.emphasis, .emphasis-dark, .emphasis-light {
    background-color: var(--bs-navbar-toggler-color);
}

@include color-mode(dark) {
    .emphasis {
        background-color: $white if($enable-important-utilities, !important, null);
    }
}

// stylelint-enable annotation-no-unknown

.navbar .dropdown-divider-bg {
    color: var(--#{$prefix}navbar-color);
}

:root {
    --dropdown-horizontal-bg: var(--#{$prefix}light);
    --navbar-offset: #{$navbar-offset-xs};
}

.navbar-title {
    display: inline-block;
    white-space: normal;
    text-align: center !important;
    vertical-align: middle;
    padding: 0 $spacer;
    width: 100% !important;
}

.navbar-container {
    width: 100% !important;
}

.navbar-brand {
    margin-right: 0;
}

@include media-breakpoint-up(#{$navbar-size}) {
    :root {
        --navbar-offset: #{$navbar-offset};
    }

    .navbar-container {
        width: auto !important;
    }

    .navbar-title {
        text-align: initial !important;
        padding: 0;
    }

    .navbar-brand {
        margin-right: var(--bs-navbar-brand-margin-end);
    }
}

@if $enable-dark-mode {
    @include color-mode(dark) {
        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
    }
}

.dropdown-horizontal {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        @include media-breakpoint-up($next) {
            &#{$infix} { 
                position: static !important; 
            } 
    
            &#{$infix} > .dropdown-menu {
                opacity: 0;
                display: block;
                visibility: hidden;
                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
                width: 100%;
                height: auto;
                text-align: center;
                border-radius: 0;
                border: 0;
                margin-top: $dropdown-horizontal-margin-top;
                padding-top: $dropdown-horizontal-padding-y;
                padding-bottom: $dropdown-horizontal-padding-y;
                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
            
                @include transition($dropdown-transition);
            }
    
            &#{$infix} > .dropdown-menu.show {
                visibility: visible;
                opacity: 1;
            }
    
            &#{$infix} > .dropdown-menu > li {
                display: inline-block;
                padding-left: $spacer;
                padding-right: $spacer;
            }
    
            &#{$infix} > .dropdown-menu > li > a {
                padding-left: .25 * $spacer;
                padding-right: .25 * $spacer;

                &.active,
                &:hover,
                &:focus {
                    color: var(--bs-body-color);
                    border-bottom: solid 1px var(--bs-navbar-hover-color);
                    margin-bottom: -1px;
                    background-color: transparent;
                }
            }
            
            &#{$infix} > .nav-link.show {
                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
            }            
        }
    }
}

// adapted from https://www.codeply.com/p/UsTEwDkzNp#
.checkbox {
	opacity: 0;
	position: absolute;
}

.mode-switch {
    --#{$prefix}mode-switch-width: 50px;
}

.mode-switch .label {
	border-color: var(--#{$prefix}border-color);
    border-style: solid;
    border-width: 1px;
	border-radius: var(--#{$prefix}mode-switch-width);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
	width: var(--#{$prefix}mode-switch-width);
    transform: scale(0.9);
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.mode-switch .label .ball {
    background-color: var(--#{$prefix}secondary-bg);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
	width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
	transition: transform 0.2s linear;
}

.mode-switch .checkbox:checked + .label .ball {
	transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
}

.mode-switch .fa-moon {
	color: $yellow;
    transform: scale(0.8);
}

.mode-switch .fa-sun {
	color: var(--#{$prefix}bs-body-color);
    transform: scale(0.8);
}