@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

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

@@ -1,629 +1,751 @@
-// //----------------------------------------------------------------------------------------------------------------------
-// // 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);
+$_navbar-max-width: 26.25rem;
+
+@mixin repeatedVerticalStyles {
+  .nav-header {
+    min-height: var(--qld-header-preheader-height, 4rem);
+    display: flex;
     align-items: center;
+    color: var(--header-color);
 
-    @include media-breakpoint-up(lg) {
-        .desktop-only {
-            display: block;
-        }
-        .nav-item-group {
-            display: block;
-            display: none;
-        }
+    a {
+      color: var(--header-color);
     }
 
-    // Mobile
-    @include media-breakpoint-down(lg) {
-        .desktop-only {
-            display: none;
-        }
-        .nav-item-group {
+    .navbar-brand {
+      font-size: 0.875rem;
+      padding: 1rem;
+    }
+
+    button.navbar-btn {
+      margin-inline-start: auto;
+      border: 0;
+      height: 100%;
+      border-radius: 0;
+      display: block;
+      padding-inline: 1.5rem;
+    }
+  }
+
+  > .container {
+    position: relative;
+    flex-direction: column;
+    align-items: start;
+    padding-inline: 0;
+    max-width: $_navbar-max-width;
+    flex-direction: row;
+    margin-inline: 0;
+    background-color: var(--vert-background-color);
+    height: 100vh;
+    max-height: 100%;
+    overflow-y: auto;
+    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);
+          }
+
+          & > a {
+            width: calc(100% - 3rem);
+            border-start-end-radius: 1rem;
+          }
+
+          &:has(.show) {
+            background-color: var(--background-color-hover);
+
+            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);
+            }
+          }
+
+          button.nav-link {
+            border: none;
+            width: 2rem;
+            height: 2rem;
+            aspect-ratio: 1 / 1;
+            border-radius: 50%;
             display: flex;
-            flex-wrap: wrap;
-            width: 100%;
-
-            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);
-                }
-            }
+            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, 0.2),
+              0px 1px 3px rgba(0, 0, 0, 0.1);
 
-            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;
-                }
+            &:hover {
+              box-shadow:
+                0px 4px 8px 3px rgba(0, 0, 0, 0.1),
+                0px 1px 3px rgba(0, 0, 0, 0.2);
             }
 
-            ul.dropdown-menu {
-                flex: 1 1 100%;
+            &::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;
             }
-
-            .dropdown-toggle {
-                max-width: 2rem;
-                border-left: solid 1px var(--#{$prefix}navbar-border-color);
+            &:focus {
+              outline: 2px solid var(--qld-focus-color);
             }
-        }
-    }
-
-
-    &-collapse {
-        position: relative;
-
-        @include media-breakpoint-down(md) {
-            width: 20rem;
-        }
+          }
 
-        @include media-breakpoint-up(md) {
-            width: 26.25rem;
+          .nav-link {
+            border-block-end: 0;
+          }
         }
 
-        @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%);
+        &:has(.dropdown-menu.show) {
+          border-block-end-width: 0;
         }
 
-        &.collapsing {
-            transition: none;
-            /* Disable transitions when state is changing to avoid flickering */
-        }
-
-        &.show {
-            transform: translateX(0);
-            /* Slide into view */
-        }
-    }
-
-    &__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;
-
-        @include media-breakpoint-up(lg) {
+        .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;
-        }
-
-        .navbar__heading {
-            font-size: .875rem;
-            line-height: 1.42;
-            margin: 0 1rem;
-            font-weight: normal;
+          }
+
+          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;
+              }
 
-            @include media-breakpoint-up(md) {
-                font-size: 1rem;
-                line-height: 1.5;
-                line-height: 4.5rem;
+              &:hover {
+                transition: none;
+              }
             }
 
-            @include media-breakpoint-up(lg) {
-                display: none;
+            p {
+              position: absolute;
+              left: -9999px;
             }
 
-            @include media-breakpoint-down(lg) {
-                color: var(--#{$prefix}navbar-mobile-text-color);
+            &:has(.view-all),
+            &:has(.parent-link) {
+              display: none;
             }
+          }
         }
+      }
+    }
 
-        // 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;
-                }
-            }
-
-            @include media-breakpoint-down(lg) {
-                color: var(--#{$prefix}navbar-mobile-text-color);
-                border-left: solid 1px var(--#{$prefix}navbar-mobile-border-color);
-            }
-
-            &: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);
-                }
-            }
-
-            &:focus {
-				outline: 3px solid var(--#{$prefix}color-default-color-dark-focus-default);
-				outline-offset: 2px;
-			}
-
-            @include media-breakpoint-up(md) {
-                padding: 0.75rem 1rem;
-            }
-
-            &-text {
-                font-size: 0.625rem;
-                margin-top: 0.25rem;
-                line-height: 1rem;
-
-                @include media-breakpoint-up(md) {
-                    margin-top: 0.625rem;
-                    font-size: .875rem;
-                    line-height: 1.14;
-                }
-            }
+    li {
+      border-block-end: 1px solid var(--border-color);
+    }
 
-            &:before {
-                font-size: 1rem;
-                line-height: 1;
-                margin-bottom: 0.25rem;
-                display: block;
-                text-align: center
-            }
+    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;
+
+      &: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;
+      }
+    }
 
-            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);
-                }
-
-                @include media-breakpoint-up(md) {
-                    height: 1.25rem;
-                    width: 1.25rem;
-                    margin: 0 auto;
-                }
-            }
+    a.nav-link {
+      border-block-end: 0;
+      margin-block-end: 0;
 
-            &--open {
-                background-color: transparent;
+      &:hover,
+      &.active {
+        border-block-end: 0;
 
-                &:active {
-                    background-color: var(--#{$prefix}navbar-menuitem-hover);
-                }
-            }
+        &:hover {
+          margin-block-end: 0;
+          border-block-end: 0;
+        }
+      }
 
-            &--close {
-                background-color: transparent;
-                z-index: 100;
+      &.dropdown-toggle {
+        &::after {
+          display: none;
+          visibility: hidden;
+        }
 
-                @include media-breakpoint-up(md) {
-                    border-width: 2px
-                }
+        background: transparent;
 
-            }
+        &:hover {
+          background-color: transparent;
         }
+      }
+      &:focus {
+        outline-offset: 0;
+      }
     }
+  }
+}
+
+@keyframes slideFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideToRight {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+#burgerBtn {
+  min-width: auto;
+  flex-direction: column;
+  gap: 0;
+}
 
-    &__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;
-        display: none;
-        z-index: 2;
+.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, 0.3), -2px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  /* hor bar */
+  --horizontal-bar-border-width: 0.5rem;
+  --dropdown-bg-color: var(--#{$prefix}default-background);
+  /* House keeping */
+  --icon-dir: 1;
+
+  :dir(rtl) {
+    --icon-dir: -1;
+  }
+
+  /* override */
+  &.collapsing {
+    transition: none !important;
+  }
+
+  &.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);
+  }
+
+  /* Mobile < 992 */
+  @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);
+    }
+  }
+
+  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;
+  }
+
+  .container {
+    position: relative;
+  }
+
+  .nav-item {
+    position: static;
+    &.mobile-only {
+      display: var(--mobile-only-display);
+    }
+  }
+
+  .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);
+
+    &.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);
+      }
     }
 
-    &__overlay.show {
-        opacity: .95;
-        right: 0;
-        display: block;
+    &.active {
+      color: var(--link-color);
+      background-color: var(--background-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--background-color);
+    }
 
-        @include media-breakpoint-up(lg) {
-            display: none;
-        }
+    &: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);
     }
+  }
+
+  .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;
 
-    &-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};
+    &: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 {
+    --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);
+    }
 
-        @include media-breakpoint-down(lg) {
-            border-left: 4px solid var(--#{$prefix}navbar-border-accent);
-            background-color: var(--#{$prefix}navbar-bg-color);
-        }
+    li {
+      display: flex;
+      &.mobile-only {
+        display: var(--mobile-only-display);
+      }
+      &:has(p) {
+        flex-direction: column;
+      }
 
-        .dropdown-container {
-            display: flex;
+      a {
+        display: flex;
+        align-items: center;
+        padding-inline-start: 0;
+        padding-inline-end: 0.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));
         }
 
-        .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);
-
-            .mobile-only {
-
-                .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-item {
-                        color: var(--#{$prefix}navbar-mobile-text-color);
-                        border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
-                    }
-                }
-
-                .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);
-
-                // 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
-                }
-            }
+      .dropdown-item {
+        border-block-end: 0;
+        gap: 1rem;
+        transition: gap var(--animation-time) ease-in-out;
 
-            @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;
-                }
-            }
+        &::after {
+          margin-inline-start: 0;
+        }
 
-            &__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;
-                    }
-                }
-
-                p.dropdown-menu__description {
-                    margin: 1rem 0 0 0;
-                    color: var(--#{$prefix}navbar-text-color);
-                }
-
-                .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;
-                    }
-
-                    &: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;
-                        }
-
-                        &:hover,
-                        &:focus {
-                            text-decoration: underline;
-                            text-underline-offset: 5px;
-                            background-color: inherit;
-
-                            @include media-breakpoint-down(lg) {
-                                border-left: solid 0.25rem var(--#{$prefix}navbar-menuitem-hover-border);
-                                margin-left: -0.25rem;  
-                            }
-                        }
-
-                        &::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;
-                        }
-
-                        @include media-breakpoint-down(lg) {
-                            padding: 1rem;
-                            overflow-wrap: break-word;
-                        }
-                    }
-                }
-            }
+        &:hover {
+          gap: 1.75rem;
+          transition: gap var(--animation-time) ease-in-out;
+        }
+      }
+    }
 
-            .dropdown-item__description {
-                color: var(--#{$prefix}navbar-text-color);
-                font-size: .875rem;
-                line-height: 1.42;
-                font-weight: normal;
-                padding: 1rem 0rem;
-            }
+    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;
 
-            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);
-            }
+      .dropdown-item {
+        border-block-end: 0;
+        display: flex;
+        flex-direction: row-reverse;
+        padding-inline-end: 0.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));
         }
-    }
-    .nav-item {
 
-        @include media-breakpoint-down(lg) {
-            border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
+        &::after {
+          content: "";
+          content: none;
         }
 
-        &.nav-item-home {
-            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;
-                    }
-                }
-            }
+        &: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;
+        }
+      }
+    }
+  }
+
+  &.vertical {
+    width: 100%;
+    min-height: 100vh; // This is questionable
+    align-items: start;
+    overflow-y: auto;
+    display: flex;
+    background-color: transparent;
+    border-block-end: 0;
+    margin-block-end: 0;
+    transition: max-width var(--animation-time) ease-in-out;
+
+    @include repeatedVerticalStyles;
+  }
+
+  &.vertical {
+    .navbar-collapse {
+      display: block !important;
+    }
 
-            .qld__icon {
-                display: block;
-                height: 2rem;
-                width: 1.5rem;
-                color: var(--#{$prefix}navbar-home-icon-color);
-            }
+    .nav-header {
+      display: none;
+    }
+  }
+
+  /* Mobile < 992 */
+  @include media-breakpoint-down(lg) {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    display: none;
+    top: 0;
+    right: -($_navbar-max-width); // match max-width of vertical menu
+    align-items: start;
+    background-color: transparent;
+    border-block-end: 0;
+    margin-block-end: 0;
+    transition: max-width var(--animation-time) ease-in;
+
+    @include repeatedVerticalStyles;
+
+    .nav-header .navbar-brand {
+      color: var(--nav-header-color);
+    }
 
-            @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);}
-            }
+    #burgerCloseBtn {
+      --qld-btn-close-bg: none;
+      --qld-btn-close-opacity: 1;
+      --qld-btn-close-hover-opacity: 1;
+
+      //Mobile
+      --qld-btn-close-font-size: 0.625rem;
+      --qld-btn-close-width: 1.5rem;
+      --qld-btn-close-height: 1.5rem;
+
+      @include media-breakpoint-up(md) {
+        //Desktop
+        --qld-btn-close-font-size: 0.875rem;
+        --qld-btn-close-width: 2rem;
+        --qld-btn-close-height: 2rem;
+      }
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--qld-btn-close-font-size);
+      color: var(--nav-header-color);
+      border-inline-start: 1px solid var(--nav-header-border-color);
+      padding-block: 0;
+      background-color: transparent;
+
+      &::before {
+        content: "";
+        mask-image: var(--qgds-icon-close);
+        mask-repeat: no-repeat;
+        mask-position: 0;
+        background-color: var(--nav-header-icon-color);
+        width: var(--qld-btn-close-width);
+        height: var(--qld-btn-close-height);
+        border: 0;
+        margin-left: 0;
+      }
+    }
 
-        }
-        .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;
-                }
-            }
+    &,
+    &.vertical {
+      position: fixed;
 
-            &.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;
-                }
-            }
+      &.close {
+        display: none;
+      }
 
-            &-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);
-                }
-            }
+      .nav-header {
+        display: flex;
+      }
 
-            
-        }
+      &.collapse > .container {
+        animation-name: slideToRight;
+        animation-duration: var(--animation-time);
+        animation-fill-mode: forwards;
+        margin-left: auto;
+      }
 
-        .dropdown-toggle {
-            // Default toggle icon
-            &::before,
-            &::after {
-                content: none;
-            }
+      &.collapse:not(.show) {
+        display: none;
+      }
 
-            &: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);
-                }
-            }
+      &.show {
+        display: flex;
+        right: 0;
+        z-index: 10;
+
+        & > .container {
+          animation-name: slideFromRight;
+          animation-duration: var(--animation-time);
+          animation-fill-mode: forwards;
         }
-    }
 
-    // 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;
+        #overlay {
+          position: fixed;
+          inset: 0;
+          background: var(--qld-color-default-color-dark-background-alt-shade);
+          opacity: 0.9;
+          z-index: -1;
         }
+      }
+
+      > .container {
+        transform: translateX(-100%);
+      }
     }
-}
+  }
+}
+
+//Prevent double scrollbar when navabr is open
+body:has(.navbar.show) {
+  overflow: hidden;
+}