@qld-gov-au/qgds-bootstrap5 1.1.39 → 1.1.41

package/src/components/bs5/navbar/navbar.scss

@@ -1,629 +1,696 @@
-// //----------------------------------------------------------------------------------------------------------------------
-// // Primary navigation
-// // Palettes and second hand variables:
-// //----------------------------------------------------------------------------------------------------------------------
-@import './colours';
-@import './icons';
-
-// Component
-.navbar {
-    margin: 0;
-    padding: 0;
-    background-color: var(--#{$prefix}navbar-bg-color);
-    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-accent);
-    align-items: center;
-
-    @include media-breakpoint-up(lg) {
-        .desktop-only {
-            display: block;
-        }
-        .nav-item-group {
-            display: block;
-            display: none;
-        }
-    }
-
-    // Mobile
-    @include media-breakpoint-down(lg) {
-        .desktop-only {
-            display: none;
-        }
-        .nav-item-group {
+@mixin repeatedVerticalStyles {
+    .nav-header {
+            height: 4rem;
             display: flex;
-            flex-wrap: wrap;
-            width: 100%;
+            align-items: center;
+            color: var(--header-color);
 
-            a.first-element {
-                flex: 1 1;
-                &.show {
-                    border-top-right-radius: 1rem;
-                    background-color: var(--#{$prefix}navbar-dropdown-bg-color);
-                }
-                &:hover {
-                    background-color: var(--#{$prefix}navbar-menuitem-hover);
-                }
+            a {
+                color: var(--header-color);
             }
 
-            button.second-element {
-                padding: 0;
-                border: none;
-                flex: 1 1 auto;
-                align-self: center;
-                position: relative;
-                cursor: pointer;
-                -ms-flex-item-align: center;
-
-                min-height: 2rem;
-                min-width: 2rem;
-
-                margin: 0 0.625rem;
-                border-radius: 50%;
-                
-                background-color: var(--#{$prefix}navbar-mobile-menu-toggle-bg);
-                -webkit-box-shadow: var(--#{$prefix}navbar-mobile-menu-toggle-boxshadow);
-                box-shadow: var(--#{$prefix}navbar-mobile-menu-toggle-boxshadow);
-
-                svg {
-                    height: 1rem;
-                    width: 1rem;
-                }
+            .navbar-brand {
+                font-size: 0.875rem;
+                padding: 1rem;
             }
 
-            ul.dropdown-menu {
-                flex: 1 1 100%;
+            button.navbar-btn {
+                margin-inline-start: auto;
+                border: 0;
+                height: 100%;
+                border-radius: 0;
+                display: block;
+                padding-inline: 1.5rem;
             }
+        }
 
-            .dropdown-toggle {
-                max-width: 2rem;
-                border-left: solid 1px var(--#{$prefix}navbar-border-color);
+        >.container {
+            position: relative;
+            flex-direction: column;
+            align-items: start;
+            padding-inline: 0;
+            max-width: 18.75rem;
+            flex-direction: row;
+            margin-inline: 0;
+            background-color: var(--vert-background-color);
+            height: 100vh;
+            flex-flow: column;
+
+            &>div {
+                width: 100%;
             }
-        }
-    }
 
+            .navbar-nav {
+                flex-direction: column;
+                width: 100%;
+                padding-inline-start: 0;
+                border-inline-end: 1px solid var(--border-color);
+                .nav-item {
+                    &.dropdown {
+                        display: flex;
+                        flex-wrap: wrap;
+                        align-items: center;
+                        background-color: var(--background-color);
+
+                        &:hover {
+                            background-color: var(--background-color-hover);
+                        }
 
-    &-collapse {
-        position: relative;
+                        &>a {
+                            width: calc(100% - 3rem);
+                            border-start-end-radius: 1rem;
+                        }
 
-        @include media-breakpoint-down(md) {
-            width: 20rem;
-        }
+                        &:has(.show) {
+                            background-color: var(--background-color-hover);
 
-        @include media-breakpoint-up(md) {
-            width: 26.25rem;
-        }
+                            button.nav-link {
+                                background-color: var(--dropdown-show-btn-bg);
+                                
+                                &::after {         
+                                    transform: rotate(180deg);
+                                    transition: transform var(--animation-time) ease-in;
+                                }
+                            }
+                            .nav-link {
+                                background-color: var(--dropdown-show-bg);
+                                border-inline-start-color: var(--dropdown-show-bg);
+                            }
+                        }
 
-        @include media-breakpoint-down(lg) {
-            z-index: 99;
-            position: fixed;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            overflow-x: hidden;
-            background-color: var(--#{$prefix}navbar-mobile-bg-color);
-            
-            /* Initially positioned off-screen to the right */
-            transition: transform .25s ease-in-out;
-            transform: translateX(100%);
-        }
+                        button.nav-link {
+                            border: none;
+                            width: 2rem;
+                            height: 2rem;
+                            aspect-ratio: 1 / 1;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            margin-inline: 0.5rem;
+                            background-color: var(--dropdown-show-btn-bg);
+                            box-shadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px rgba(0, 0, 0, .1);
+                            
+                            &:hover {
+                                box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .2);
+                            }
 
-        &.collapsing {
-            transition: none;
-            /* Disable transitions when state is changing to avoid flickering */
-        }
+                            &::after {
+                                content: "";
+                                mask-image: var(--qgds-icon-chevron-down);
+                                mask-repeat: no-repeat;
+                                mask-position: 0;
+                                background-color: var(--dropdown-show-btn-icon-color);
+                                width: 1rem;
+                                height: 1rem;
+                                border: 0;
+                                margin-left: 0;
+                                transform: rotate(0deg);
+                                transition: transform var(--animation-time) ease-in;                                 
+                            }
+                            &:focus {
+                                outline: 2px solid var(--qld-focus-color);
+                            }
+                        }
 
-        &.show {
-            transform: translateX(0);
-            /* Slide into view */
-        }
-    }
+                        .nav-link {
+                            border-block-end: 0;
+                        }
+                    }
 
-    &__header {
-        display: flex;
-        background-color: var(--#{$prefix}navbar-mobile-header-bg-color);
-        color: var(--#{$prefix}navbar-text-color);
-        align-items: center;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
-        position: relative;
+                    &:has(.dropdown-menu.show) {
+                        border-block-end-width: 0;
+                    }
 
-        @include media-breakpoint-up(lg) {
-            display: none;
-        }
+                    .dropdown-menu.show {
+                        position: relative;
+                        border: none;
+                        border-block-start: 1px solid var(--border-color);
+                        padding-block: 0;
+                        margin-block: 0;
+                        width: 100%;
+                        display: block;
+                        padding: 0;
+                        box-shadow: none;
+
+                        &::before {
+                            display: none;
+                        }
 
-        .qld__main-nav__toggle {
-            margin-left: auto;
-        }
+                        li {
+                            text-align: start;
+                            padding-block-end: 0;
+                            margin-block-end: 0;
+
+                            a {
+                                background-color: var(--dropdown-show-bg);
+                                padding-inline: 0.75rem;
+                                margin-block-end: 0;
+                                border-block-end: 0;
+                                border-inline-start-color: var(--dropdown-show-bg);
+                                gap: 0;
+
+                                &::after {
+                                    content: "";
+                                    content: none;
+                                }
+
+                                &:hover {
+                                    transition: none;
+                                }
+                            }
 
-        .navbar__heading {
-            font-size: .875rem;
-            line-height: 1.42;
-            margin: 0 1rem;
-            font-weight: normal;
+                            p {
+                                position: absolute;
+                                left: -9999px;
+                            }
 
-            @include media-breakpoint-up(md) {
-                font-size: 1rem;
-                line-height: 1.5;
-                line-height: 4.5rem;
+                            &:has(.view-all),
+                            &:has(.parent-link) {
+                                display: none;
+                            }
+                        }
+                    }
+                }
             }
 
-            @include media-breakpoint-up(lg) {
-                display: none;
+            li {
+                border-block-end: 1px solid var(--border-color);
             }
 
-            @include media-breakpoint-down(lg) {
-                color: var(--#{$prefix}navbar-mobile-text-color);
-            }
-        }
+            a.nav-link,
+            a.dropdown-item {
+                color: var(--link-color);
+                padding: 0.75rem;
+                display: flex;
+                border-inline-start: 0.25rem solid var(--link-border-color);
+                align-items: center;
+                transition: padding-inline-end var(--animation-time) ease-in-out;
 
-        // Menu open and close toggles
-        .navbar__toggle {
-            border: 0;
-            display: flex;
-            flex-direction: column;
-            padding: 0.5rem 1rem 0.25rem 1rem;
-            margin-left: auto;
-            font-size: .875rem;
-            line-height: 1.14;
-            appearance: none;
-            background-color: transparent;
-            cursor: pointer;
-            align-items: center;
-            
-            @include media-breakpoint-up(lg) {
-                color: var(--#{$prefix}navbar-text-color);
-                border-left: solid 1px var(--#{$prefix}navbar-border-color);
-                &:focus {
-                    outline: 2px solid var(--#{$prefix}navbar-text-focus-color);
-                    outline-offset: 2px;
+                &:hover {
+                    border-inline-start: 0.25rem solid var(--link-border-color-hover);
+                    text-decoration: underline;
+                    text-underline-offset: 0.3rem;
+                    text-decoration-thickness: 0.125rem;
                 }
             }
 
-            @include media-breakpoint-down(lg) {
-                color: var(--#{$prefix}navbar-mobile-text-color);
-                border-left: solid 1px var(--#{$prefix}navbar-mobile-border-color);
-            }
+            a.nav-link {
+                border-block-end: 0;
+                margin-block-end: 0;
 
-            &:hover {
-                @include media-breakpoint-down(lg) {
-                    background-color: var(--#{$prefix}navbar-mobile-menuitem-hover);
-                }
-                @include media-breakpoint-up(lg) {
-                    background-color: var(--#{$prefix}navbar-menuitem-hover);
-                }
-            }
+                &:hover,
+                &.active {
+                    border-block-end: 0;
 
-            &:focus {
-				outline: 3px solid var(--#{$prefix}color-default-color-dark-focus-default);
-				outline-offset: 2px;
-			}
+                    &:hover {
+                        margin-block-end: 0;
+                        border-block-end: 0;
+                    }
+                }
 
-            @include media-breakpoint-up(md) {
-                padding: 0.75rem 1rem;
-            }
+                &.dropdown-toggle {
+                    &::after {
+                        display: none;
+                        visibility: hidden;
+                    }
 
-            &-text {
-                font-size: 0.625rem;
-                margin-top: 0.25rem;
-                line-height: 1rem;
+                    background: transparent;
 
-                @include media-breakpoint-up(md) {
-                    margin-top: 0.625rem;
-                    font-size: .875rem;
-                    line-height: 1.14;
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+                &:focus {
+                    outline-offset: 0;
                 }
             }
+        }
+}
 
-            &:before {
-                font-size: 1rem;
-                line-height: 1;
-                margin-bottom: 0.25rem;
-                display: block;
-                text-align: center
-            }
+@keyframes slideFromRight {
+    0% {
+        transform: translateX(100%);
+    }
 
-            svg {
-                height: 1rem;
-                width: 1rem;
-                margin: 1px auto;
-                
-                @include media-breakpoint-up(lg) {
-                    color: var(--#{$prefix}navbar-svg-color);
-                }
-                
-                @include media-breakpoint-down(lg) {
-                    color: var(--#{$prefix}navbar-mobile-svg-color);
-                }
+    100% {
+        transform: translateX(0);
+    }
+}
 
-                @include media-breakpoint-up(md) {
-                    height: 1.25rem;
-                    width: 1.25rem;
-                    margin: 0 auto;
-                }
-            }
+@keyframes slideToRight {
+    0% {
+        transform: translateX(0);
+    }
 
-            &--open {
-                background-color: transparent;
+    100% {
+        transform: translateX(100%);
+    }
+}
 
-                &:active {
-                    background-color: var(--#{$prefix}navbar-menuitem-hover);
-                }
-            }
+#burgerBtn {
+    min-width: auto;
+    flex-direction: column; 
+    gap: 0;
+}
 
-            &--close {
-                background-color: transparent;
-                z-index: 100;
+.navbar {
+    --vert-background-color: var(--#{$prefix}dark-background);
+    --background-color: var(--#{$prefix}default-background-shade);
+    --background-color-hover: var(--#{$prefix}light-border);
+    --dropdown-show-bg: var(--#{$prefix}default-background);
+    --link-border-color: var(--#{$prefix}light-accent);
+    --link-border-color-hover: var(--#{$prefix}light-action-primary-hover);
+    --link-color: var(--#{$prefix}light-action-primary-hover);
+    --text-color: var(--#{$prefix}light-text-text);
+    --border-color: var(--#{$prefix}light-border);
+    --header-color:  var(--#{$prefix}default-background);
+    --action-icon-color: var(--#{$prefix}alt-button-hover);
+    --mobile-only-display: none;
+    --dropdown-show-btn-bg: var(--#{$prefix}default-background);
+    --dropdown-show-btn-icon-color: var(--#{$prefix}alt-button-hover);
+
+    --nav-header-color: var(--#{$prefix}dark-text-text);
+    --nav-header-border-color: var(--#{$prefix}dark-border);
+    --nav-header-icon-color: var(--#{$prefix}brand-accent);
+
+    /* general */
+    --button-bg-color: var(--#{$prefix}default-background);
+    --animation-time: 0.2s;
+    --shadow-dropdown: 0px 1px 2px 0px rgba(0, 0, 0, .3), -2px 2px 6px 2px rgba(0, 0, 0, .15);
+    /* hor bar */
+    --horizontal-bar-border-width: .5rem;
+    --dropdown-bg-color: var(--#{$prefix}default-background);
+    /* House keeping */
+    --icon-dir: 1;
+    :dir(rtl) {
+        --icon-dir: -1;
+    }
+    
+    /* override */
+    &.collapsing {
+        transition: none !important;
+    }
 
-                @include media-breakpoint-up(md) {
-                    border-width: 2px
-                }
+    &.collapse:not(.show) {
+        display: block;
+    }
 
-            }
+    .qld-icon-md {
+        height: 2rem;
+    }
+
+    /* colours */
+    &.dark {
+        --vert-background-color: var(--#{$prefix}default-background);
+        --background-color: var(--#{$prefix}dark-background-shade);
+        --background-color-hover: var(--#{$prefix}dark-alt-background);
+        --dropdown-show-bg: var(--#{$prefix}dark-background-shade);
+        --link-border-color: var(--#{$prefix}dark-accent);
+        --link-border-color-hover: var(--#{$prefix}dark-action-primary-hover);
+        --link-color: var(--#{$prefix}dark-text-text);
+        --text-color: var(--#{$prefix}dark-text-text);
+        --border-color: var(--#{$prefix}dark-border);
+        --header-color: var(--#{$prefix}light-text-heading);
+        --dropdown-bg-color: var(--#{$prefix}dark-background);
+        --action-icon-color: var(--#{$prefix}brand-accent);
+
+        --nav-header-color: var(--#{$prefix}light-text-text);
+        --nav-header-border-color: var(--#{$prefix}light-border);
+        --nav-header-icon-color: var(--#{$prefix}alt-button-hover);
+    }
+
+    @include media-breakpoint-down(lg) { 
+        --mobile-only-display: block;
+        .alt {
+            --vert-background-color: var(--#{$prefix}default-background);
+            --background-color: var(--#{$prefix}dark-background-shade);
+            --background-color-hover: var(--#{$prefix}dark-alt-background);
+            --dropdown-show-bg: var(--#{$prefix}dark-background-shade);
+            --link-border-color: var(--#{$prefix}dark-accent);
+            --link-border-color-hover: var(--#{$prefix}dark-action-primary-hover);
+            --link-color: var(--#{$prefix}dark-text-text);
+            --text-color: var(--#{$prefix}dark-text-text);
+            --border-color: var(--#{$prefix}dark-border);
+            --header-color: var(--#{$prefix}light-text-heading);
+            --dropdown-bg-color: var(--#{$prefix}dark-background);
+            --action-icon-color: var(--#{$prefix}brand-accent);
+        }
+        &.dark .alt {
+            --vert-background-color: var(--#{$prefix}dark-background);
+            --background-color: var(--#{$prefix}default-background-shade);
+            --background-color-hover: var(--#{$prefix}light-border);
+            --dropdown-show-bg: var(--#{$prefix}default-background);
+            --link-border-color: var(--#{$prefix}light-accent);
+            --link-border-color-hover: var(--#{$prefix}light-action-primary-hover);
+            --link-color: var(--#{$prefix}light-action-primary-hover);
+            --text-color: var(--#{$prefix}light-text-text);
+            --border-color: var(--#{$prefix}light-border);
+            --header-color: var(--#{$prefix}default-background);
+            --action-icon-color: var(--#{$prefix}alt-button-hover);
         }
     }
 
-    &__overlay {
-        -webkit-transition: opacity .25s ease-in-out;
-        transition: opacity .25s ease-in-out;
-        background-color: var(--#{$prefix}navbar-overlay);
-        cursor: pointer;
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        opacity: .4;
+    background-color: var(--background-color);
+    border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+    padding-block: 0;
+
+    button.dropdown-toggle,
+    .nav-header {
         display: none;
-        z-index: 2;
     }
 
-    &__overlay.show {
-        opacity: .95;
-        right: 0;
-        display: block;
+    .container {
+        position: relative;
+    }
 
-        @include media-breakpoint-up(lg) {
-            display: none;
+    .nav-item {
+        position: static;
+        &.mobile-only {
+            display: var(--mobile-only-display);
         }
     }
 
-    &-nav {
-        $navbar-padding-x: 0;
-        $navbar-padding-y: 0;
-        --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
-        --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+    .navbar-nav a.nav-link {
+        background-color: var(--background-color);
+        border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+        margin-block-end: calc(var(--horizontal-bar-border-width) * -1);
 
-        @include media-breakpoint-down(lg) {
-            border-left: 4px solid var(--#{$prefix}navbar-border-accent);
-            background-color: var(--#{$prefix}navbar-bg-color);
+        &.show {
+            color: var(--link-color);
+            background-color: var(--dropdown-bg-color);
+            border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
+
+            &:hover {
+                background-color: var(--dropdown-bg-color);
+                border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
+            }
         }
 
-        .dropdown-container {
-            display: flex;
+        &.active {
+            color: var(--link-color);
+            background-color: var(--background-color);
+            border-block-end: var(--horizontal-bar-border-width) solid var(--background-color);
         }
 
-        .nav-item.CTA_feature {
-            
-            color: var(--#{$prefix}navbar-mobile-text-color);
-            background-color: var(--#{$prefix}navbar-mobile-cta-bg-color);
-            border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
+        &:hover,
+        &.active:hover {
+            background-color: var(--background-color-hover);
+            border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
+        }
+        .qld-icon {
+            background-color: var(--action-icon-color);
+        }
+    }
 
-            .mobile-only {
+    .navbar-nav a.nav-link,
+    a.dropdown-item {
+        color: var(--link-color);
+        padding: 0.75rem;
+        display: flex;
+        line-height: 2rem;
+        gap: 1rem;
+        align-items: center;
+
+        &:hover {
+            text-decoration: underline;
+            text-underline-offset: 0.3rem;
+            text-decoration-thickness: 0.125rem;
+        }
+        &:focus {
+            outline-offset: -2px;
+            box-shadow: none;
+        }
+    }
+    a.dropdown-toggle{
+        &:after {
+            content: "";
+            border: 0;
+            mask-image: var(--qgds-icon-chevron-down);
+            mask-repeat: no-repeat;
+            mask-position: 0;
+            background-color: var(--action-icon-color);
+            width: 1rem;
+            height: 1rem;
+            transform: rotate(0deg);
+            transition: transform var(--animation-time) ease-in;
+        }
+        &.show {
+            &:after {
+                transform: rotate(180deg);
+                transition: transform var(--animation-time) ease-in;
+            }
+        }
+        
+    }
+    a.dropdown-item {
+        &:hover {
+            background-color: transparent;
+        }
+    }
 
-                .dropdown-menu.show {
-                    background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
-                    border-left: solid .25rem var(--#{$prefix}navbar-mobile-cta-bg-color-open);
+    .dropdown-menu.show {
+        --horizontal-bar-border-widthx2: calc(var(--horizontal-bar-border-width) * 2);
+        margin-block-start: calc(var(--horizontal-bar-border-widthx2) - 1px);
+        inset-inline: 0;
+        background-color: var(--dropdown-bg-color);
+        padding: 4rem;
+        border-radius: 1rem;
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        color: var(--text-color);
+        box-shadow: var(--shadow-dropdown);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1rem;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: var(--horizontal-bar-border-width);
+            inset: 0;
+            inset-block-start: calc(var(--horizontal-bar-border-width) * -1);
+            background-color: var(--dropdown-bg-color);
+        }
 
-                    .dropdown-item {
-                        color: var(--#{$prefix}navbar-mobile-text-color);
-                        border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
-                    }
+        li {
+            display: flex;
+            &.mobile-only {
+                display: var(--mobile-only-display);
+            }
+            &:has(p) {
+                flex-direction: column;
+            }
+
+            a{
+                display: flex;
+                align-items: center;
+                padding-inline-start: 0;
+                padding-inline-end: .75rem;
+                white-space: normal;
+                border-block-end: 1px solid var(--border-color);
+                padding-block-end: 1rem;
+                gap: 1rem;
+                transition: padding-inline-end var(--animation-time) ease-in-out, gap var(--animation-time) ease-in-out;
+
+                &::after {
+                    content: "";
+                    mask-image: var(--qgds-icon-arrow-right);
+                    mask-repeat: no-repeat;
+                    mask-position: 0;
+                    background-color: var(--action-icon-color);
+                    height: 1.25rem;
+                    width: 1.25rem;
+                    margin-inline-start: auto;
+                    border: 0;
+                    transform: scaleX(var(--icon-dir));
                 }
 
-                .first-element {
-                    color: var(--#{$prefix}navbar-mobile-text-color) !important; //TO DO: resolve, caused by qld-type overrides
-                    &.show {
-                        background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
-                        .dropdown-item {
-                            border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
-                        }
-                    }
-                    &:hover {
-                        color: var(--#{$prefix}navbar-mobile-text-color);
-                        background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
-                    }
+                &:hover {
+                    padding-inline-end: 0;
+                    gap: 1.75rem;
+                    transition: padding-inline-end var(--animation-time) ease-in-out, gap var(--animation-time) ease-in-out;
+                }
+                &:focus {
+                    outline-offset: 2px;
+                    box-shadow: none;
                 }
+            }
 
-                
+            p {
+                text-align: start;
+                margin-block-start: 1rem;
             }
         }
-    }
 
-    .dropdown {
-        position: static;
+        li:has(.parent-link) {
+            border-block-end: 1px solid var(--border-color);
+            padding-block-end: 2rem;
+            margin-block-end: 2rem;
+            grid-column: 1 / -1; 
 
-        &-menu {
-            background-color: var(--#{$prefix}navbar-dropdown-bg-color);
-            
-            // Override the default bs-popper margin
-            &[data-bs-popper] {
-                margin-top: 1px;
-            }
-            
-            @include media-breakpoint-up(lg) {
-                left: 0;
-                right: 0;
-                width: 100%;
-                padding: 3rem 4rem;
-                margin-top: 0.5rem;
-                margin-left: -4rem;
-                border-radius: 0 0 .75rem .75rem;
-                border: 0;
-                -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-                box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), -2px 2px 6px 2px rgba(0, 0, 0, 0.15);
+            .dropdown-item {
+                border-block-end: 0;
+                gap: 1rem;
+                transition: gap var(--animation-time) ease-in-out;
 
-                // Override the default bs-popper margin
-                &[data-bs-popper] {
-                    margin-top: 9px !important; // Had to use important for override to work
-                }
-                
-                &.show::before {
-                    position: absolute;
-                    content: ' ';
-                    height: 6px;
-                    top: -6px;
-                    left: 0;
-                    right: 0px;
-                    background-color: var(--#{$prefix}navbar-dropdown-bg-color);
-                    pointer-events: none; // so that pseudo-element isn't clickable
+                &::after {
+                    margin-inline-start: 0;
                 }
-            }
 
-            @include media-breakpoint-down(lg) {
-                border-radius: 0;
-                box-shadow: none;
-                -webkit-box-shadow: none;
-                padding: 0;
-                &.show {
-                    border-left: solid 0.25rem var(--#{$prefix}navbar-dropdown-bg-color);
-                    margin-left: -0.25rem;
-                    border-top: 0;
-                    border-bottom: 0;
-                    border-right: 0;
+                &:hover {
+                    gap: 1.75rem;
+                    transition: gap var(--animation-time) ease-in-out;
                 }
             }
+        }
 
-            &__inner {
-                .dropdown-menu__featured {
-                    color: var(--#{$prefix}navbar-link-color);
-                    font-size: 1.5rem;
-                    text-decoration: none;
-                    font-weight: 600;
-
-                    &:hover,
-                    &:focus {
-                        text-decoration: underline;
-                        text-underline-offset: 5px;
-                        background-color: inherit;
-                    }
+        li:has(.view-all) {
+            width: 100%;
+            border-block-start: 1px solid var(--border-color);
+            padding-block-start: 2rem;
+            margin-block-start: 2rem;
+            grid-column: 1 / -1; 
+
+            .dropdown-item {
+                border-block-end: 0;
+                display: flex;
+                flex-direction: row-reverse;
+                padding-inline-end: .75rem;
+                gap: 1rem;
+                transition: gap var(--animation-time) ease-in-out, padding-inline-end var(--animation-time) ease-in-out;
+
+                &::before {
+                    content: "";
+                    mask-image: var(--qgds-icon-arrow-right);
+                    mask-repeat: no-repeat;
+                    mask-position: 0;
+                    background-color: var(--action-icon-color);
+                    height: 1.25rem;
+                    width: 1.25rem;
+                    transform: scaleX(var(--icon-dir));
                 }
 
-                p.dropdown-menu__description {
-                    margin: 1rem 0 0 0;
-                    color: var(--#{$prefix}navbar-text-color);
+                &::after {
+                    content: "";
+                    content: none;
                 }
 
-                .dropdown-menu__view_all {
-                    font-size: 1.25rem;
-                    font-weight: 600;
-                    text-decoration: none;
-                    color: var(--#{$prefix}navbar-link-color);
-
-                    &:hover {
-                        text-decoration: underline;
-                        text-underline-offset: 5px;
-                        background-color: inherit;
-                    }
+                &:hover {
+                    gap: 1.75rem;
+                    padding-inline-end: 0;
+                    transition: padding-inline-end var(--animation-time) ease-in-out, gap var(--animation-time) ease-in-out;
 
-                    &:focus {
-                        text-decoration: underline;
-                        text-underline-offset: 5px;
-                        background-color: inherit;
-                    }
                 }
+            }
+        }
+    }
 
-                li {
-
-                    @include media-breakpoint-down(lg) {
-                        padding-right: 0;
-                    } 
-
-                    @include media-breakpoint-up(lg) {
-                        a.dropdown-item {
-                            font-weight: 600;
-                        }
-                    }
-                    
-                    a.dropdown-item {
-                        padding: 1rem 0;
-                        color: var(--#{$prefix}navbar-link-color);
-                        border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
-                        white-space: normal;
-
-                        .dropdown-item__text {
-                            display: inline-block;
-                            margin-right: 1.5rem;
-                        }
-
-                        &:active {
-                            background-color: transparent;
-                        }
+    &.vertical {
+        width: 100%;
+        min-height: 100vh; // This is questionable
+        align-items: start;
+        overflow-y: scroll;
+        display: flex;
+        background-color: transparent;
+        border-block-end: 0;
+        margin-block-end: 0;
+        transition: max-width var(--animation-time) ease-in-out;
 
-                        &:hover,
-                        &:focus {
-                            text-decoration: underline;
-                            text-underline-offset: 5px;
-                            background-color: inherit;
+        @include repeatedVerticalStyles;
+    }
 
-                            @include media-breakpoint-down(lg) {
-                                border-left: solid 0.25rem var(--#{$prefix}navbar-menuitem-hover-border);
-                                margin-left: -0.25rem;  
-                            }
-                        }
+    &.vertical {
+        .navbar-collapse {
+            display: block !important;
+        }
 
-                        &::after {
-                            width: 1.25rem;
-                            height: 1.25rem;
-                            margin: 0 0.5rem 0 0.5rem;
-                            content: "";
-                            -webkit-box-flex: 0;
-                            -ms-flex: 0 0 auto;
-                            flex: 0 0 auto;
-                            -webkit-transition: margin .2s ease;
-                            -o-transition: margin .2s ease;
-                            transition: margin .2s ease;
-                            -webkit-mask-repeat: no-repeat;
-                            mask-repeat: no-repeat;
-                            -webkit-mask-position: center;
-                            mask-position: center;
-                        }
+        .nav-header {
+            display: none;
+        }
+    }
 
-                        @include media-breakpoint-down(lg) {
-                            padding: 1rem;
-                            overflow-wrap: break-word;
-                        }
-                    }
-                }
-            }
+    @media (width <=992px) {
 
-            .dropdown-item__description {
-                color: var(--#{$prefix}navbar-text-color);
-                font-size: .875rem;
-                line-height: 1.42;
-                font-weight: normal;
-                padding: 1rem 0rem;
-            }
+        width: 100%;
+        height: 100vh;
+        align-items: start;
+        overflow-y: scroll;
+        display: flex;
+        background-color: transparent;
+        border-block-end: 0;
+        margin-block-end: 0;
+        transition: max-width var(--animation-time) ease-in;
 
-            hr {
-                margin: 2rem 0 2rem 0;
-                border-bottom: solid 2px var(--#{$prefix}navbar-border-color);
-                padding-right: calc(var(--qld-gutter-x)* .5);
-                padding-left: calc(var(--qld-gutter-x)* .5);
-            }
-        }
-    }
-    .nav-item {
+        @include repeatedVerticalStyles;
 
-        @include media-breakpoint-down(lg) {
-            border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
+        .nav-header .navbar-brand {
+            color: var(--nav-header-color);
         }
 
-        &.nav-item-home {
+        #burgerCloseBtn {
+            --qld-btn-close-bg: none;
             display: flex;
-            a.nav-link {
-                display: inline-flex;
-                @include media-breakpoint-down(lg) {
-                    width: 100%;
-                }
-                span.home-label {
-                    margin-left: 10px;
-                    @include media-breakpoint-up(lg) {
-                        display: none;
-                    }
-                }
-            }
-
-            .qld__icon {
-                display: block;
-                height: 2rem;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: .7rem;
+            color: var(--nav-header-color);
+            border-inline-start: 1px solid var(--nav-header-border-color);
+            padding-block: 0;
+            &::before {
+                content: "";
+                mask-image: var(--qgds-icon-close);
+                mask-repeat: no-repeat;
+                mask-position: 0;
+                background-color: var(--nav-header-icon-color);
                 width: 1.5rem;
-                color: var(--#{$prefix}navbar-home-icon-color);
+                height: 1.5rem;
+                border: 0;
+                margin-left: 0; 
             }
+        }
 
-            @include media-breakpoint-up(lg) {
-                &:hover .qld__icon {color: var(--#{$prefix}navbar-home-icon-color-hover);}
-            }
-            @include media-breakpoint-down(lg) {
-                &:hover .qld__icon {color: var(--#{$prefix}navbar-mobile-home-icon-color);}
-            }
+        &,
+        &.vertical {
+            position: fixed;
 
-        }
-        .nav-link {
-            color: var(--#{$prefix}navbar-nav-text-color) !important; //To do: Due to qld-type.css needing refractor. Remove later.
-            text-decoration: none;
-            line-height: 2rem;
-            width: 100%;
-            overflow-y: visible;
-            position: relative;
-            $navbar-nav-link-padding-x: 0.75rem;
-            $navbar-nav-link-padding-y: 0.75rem;
-
-            --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
-            --#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
-            --#{$prefix}nav-link-padding-y: #{$navbar-nav-link-padding-y};
-
-            &:hover,
-            &.show:hover {
-                text-decoration: underline;
-                background-color: var(--#{$prefix}navbar-menuitem-hover);
-                color: var(--#{$prefix}navbar-link-color-hover);
-
-                @include media-breakpoint-up(lg) {
-                    background-color: var(--#{$prefix}navbar-menuitem-hover);
-                    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-menuitem-hover-border);
-                    margin-bottom: -0.5rem;
-                }
+            &.close {
+                display: none;
             }
 
-            &.show {
-                text-decoration: underline;
-                color: var(--#{$prefix}navbar-link-color-hover);
-                @include media-breakpoint-up(lg) {
-                    background-color: var(--#{$prefix}navbar-menuitem-active);
-                    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-menuitem-active);
-                    margin-bottom: -0.5rem;
-                }
+            .nav-header {
+                display: flex;
             }
 
-            &-home-active {
-                @include media-breakpoint-up(lg) {
-                    background-color: var(--#{$prefix}navbar-bg-color);
-                    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-bg-color);
-                    margin-bottom: -0.5rem;
-                    .qld__icon {color: var(--#{$prefix}navbar-home-icon-color-active);}
-                    &:hover .qld__icon {color: var(--#{$prefix}navbar-home-icon-color-hover);}
-                }
-                @include media-breakpoint-down(lg) {
-                    background-color: var(--#{$prefix}navbar-bg-color);
-                }
+            &.collapse>.container {
+                animation-name: slideToRight;
+                animation-duration: var(--animation-time);
+                animation-fill-mode: forwards;
+                margin-left: auto;
             }
 
-            
-        }
+            &.show {
+                display: block;
 
-        .dropdown-toggle {
-            // Default toggle icon
-            &::before,
-            &::after {
-                content: none;
-            }
+                &>.container {
+                    animation-name: slideFromRight;
+                    animation-duration: var(--animation-time);
+                    animation-fill-mode: forwards;
+                }
 
-            &:hover {
-                @include media-breakpoint-down(lg) {
-                    -webkit-box-shadow: var(--#{$prefix}navbar-mobile-menu-toggle-boxshadow__hover);
-                    box-shadow: var(--#{$prefix}navbar-mobile-menu-toggle-boxshadow__hover);
+                #overlay {
+                    position: fixed;
+                    inset: 0;
+                    background-color: rgba(9, 84, 159, 0.6);
+                    z-index: -1;
                 }
             }
-        }
-    }
 
-    // Navbar
-    @include media-breakpoint-down(lg) {
-        //Bootstrap shared navigation elements, hidden for mobile/tablet
-        .dropdown-menu__featured,
-        .dropdown-menu__description,
-        .dropdown-menu__inner hr,
-        .dropdown-menu__view_all,
-        .dropdown-item__description {
-            display: none;
+            >.container {
+                transform: translateX(-100%);
+            }
         }
+        
     }
 }