hinode/assets/scss/components/_navbar.scss

// stylelint-disable annotation-no-unknown

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

.mode-switch {
    --#{$prefix}mode-switch-width: 3em;
}

.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}border-color);
	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));
}

@if $enable-dark-mode {
    [data-bs-theme="light"] .mode-switch .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);
}

.mode-toggle > input {
	z-index: 1;
	cursor: pointer;
    height: 25px;
    width: 25px;
}

.mode-toggle > label {
	z-index: 0;
	cursor: pointer;
}

// Source: https://jsfiddle.net/njhgr40m/

@if $enable-dark-mode {
    [data-bs-theme-animate="true"] .navbar {
        transition: 0.5s ease-in-out;
    }
}

.navbar {
    --bs-navbar-expanded-color: var(--bs-body-bg);
    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);

    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-title, .navbar-title-center, .navbar-title-start {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    padding: 0 $spacer;
    width: 100% !important;
}

.navbar-title, .navbar-title-center {
    text-align: center !important;
}

.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-brand {
    margin-right: 0;
}

.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-title, .navbar-brand, .mode-switch {
        --#{$prefix}border-color: white;

        color: white !important;
    }

    .mode-switch .fa-moon {
        color: $white;
    }
}

.navbar-expanded {
    box-shadow: $box-shadow-sm;
    min-height: 100vh;
    align-items: start;
}

.navbar-expanded .navbar-collapse {
    margin-top: 2rem;
}

@each $h, $size in $font-sizes {
    .navbar-fs-#{$h} {
        font-size: #{$size};
    }
}

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

    @if $infix != '' {
        @include media-breakpoint-up($next) {
            .navbar#{$infix}-fs { 
                font-size: inherit;
            } 
        }
    }
}

.navbar-icon {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
}

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

.navbar .nav-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.navbar-collapse .dropdown {
    display: inline;
    align-items: normal;
}

.navbar-expanded .btn {
    font-size: 1em;
}

.navbar .btn {
    border-radius: #{$theme-border-radius};    
}

.navbar-expanded .search-input {
    margin-bottom: 1rem;
}

/* 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 {
    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-container {
    min-height: calc(2rem + 10px);
    width: 100% !important;
}

@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);
            }            
        }
    }
}

.navbar-overlay {
    position: absolute;
    z-index: $zindex-fixed;
}

.form-control.is-search {
    border: 1px solid var(--bs-border-color) !important;
}

.inline-menu li {
  display: inline-block;
  padding: 0.5rem;
  color: var(--bs-nav-link-color);
}

.inline-menu li .active, .inline-menu li>a:hover {
    box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
}

ul.inline-menu {
  padding: 0;
}