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

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

@@ -1,696 +1,751 @@
+$_navbar-max-width: 26.25rem;
+
 @mixin repeatedVerticalStyles {
-    .nav-header {
-            height: 4rem;
+  .nav-header {
+    min-height: var(--qld-header-preheader-height, 4rem);
+    display: flex;
+    align-items: center;
+    color: var(--header-color);
+
+    a {
+      color: var(--header-color);
+    }
+
+    .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;
             align-items: center;
-            color: var(--header-color);
+            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);
 
-            a {
-                color: var(--header-color);
+            &:hover {
+              box-shadow:
+                0px 4px 8px 3px rgba(0, 0, 0, 0.1),
+                0px 1px 3px rgba(0, 0, 0, 0.2);
             }
 
-            .navbar-brand {
-                font-size: 0.875rem;
-                padding: 1rem;
+            &::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;
             }
-
-            button.navbar-btn {
-                margin-inline-start: auto;
-                border: 0;
-                height: 100%;
-                border-radius: 0;
-                display: block;
-                padding-inline: 1.5rem;
+            &:focus {
+              outline: 2px solid var(--qld-focus-color);
             }
+          }
+
+          .nav-link {
+            border-block-end: 0;
+          }
         }
 
-        >.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%;
-            }
+        &:has(.dropdown-menu.show) {
+          border-block-end-width: 0;
+        }
 
-            .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;
-                            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);
-                            }
-
-                            &::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);
-                            }
-                        }
-
-                        .nav-link {
-                            border-block-end: 0;
-                        }
-                    }
-
-                    &:has(.dropdown-menu.show) {
-                        border-block-end-width: 0;
-                    }
-
-                    .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;
-                        }
-
-                        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;
-                                }
-                            }
-
-                            p {
-                                position: absolute;
-                                left: -9999px;
-                            }
-
-                            &:has(.view-all),
-                            &:has(.parent-link) {
-                                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;
+          }
+
+          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;
+              }
 
-            li {
-                border-block-end: 1px solid var(--border-color);
+              &:hover {
+                transition: none;
+              }
             }
 
-            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;
-                }
+            p {
+              position: absolute;
+              left: -9999px;
             }
 
-            a.nav-link {
-                border-block-end: 0;
-                margin-block-end: 0;
-
-                &:hover,
-                &.active {
-                    border-block-end: 0;
-
-                    &:hover {
-                        margin-block-end: 0;
-                        border-block-end: 0;
-                    }
-                }
-
-                &.dropdown-toggle {
-                    &::after {
-                        display: none;
-                        visibility: hidden;
-                    }
-
-                    background: transparent;
-
-                    &:hover {
-                        background-color: transparent;
-                    }
-                }
-                &:focus {
-                    outline-offset: 0;
-                }
+            &:has(.view-all),
+            &:has(.parent-link) {
+              display: none;
             }
+          }
         }
-}
+      }
+    }
 
-@keyframes slideFromRight {
-    0% {
-        transform: translateX(100%);
+    li {
+      border-block-end: 1px solid var(--border-color);
     }
 
-    100% {
-        transform: translateX(0);
+    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;
+      }
+    }
+
+    a.nav-link {
+      border-block-end: 0;
+      margin-block-end: 0;
+
+      &:hover,
+      &.active {
+        border-block-end: 0;
+
+        &:hover {
+          margin-block-end: 0;
+          border-block-end: 0;
+        }
+      }
+
+      &.dropdown-toggle {
+        &::after {
+          display: none;
+          visibility: hidden;
+        }
+
+        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);
-    }
+  0% {
+    transform: translateX(0);
+  }
 
-    100% {
-        transform: translateX(100%);
-    }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 #burgerBtn {
-    min-width: auto;
-    flex-direction: column; 
-    gap: 0;
+  min-width: auto;
+  flex-direction: column;
+  gap: 0;
 }
 
 .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;
+  --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);
     }
-    
-    /* override */
-    &.collapsing {
-        transition: none !important;
+    &.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);
     }
-
-    &.collapse:not(.show) {
-        display: block;
+  }
+
+  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);
     }
+  }
 
-    .qld-icon-md {
-        height: 2rem;
-    }
+  .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);
 
-    /* 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);
-    }
+    &.show {
+      color: var(--link-color);
+      background-color: var(--dropdown-bg-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--dropdown-bg-color);
 
-    @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);
-        }
+      &:hover {
+        background-color: var(--dropdown-bg-color);
+        border-block-end: var(--horizontal-bar-border-width) solid
+          var(--dropdown-bg-color);
+      }
     }
 
-    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;
+    &.active {
+      color: var(--link-color);
+      background-color: var(--background-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--background-color);
     }
 
-    .container {
-        position: relative;
+    &:hover,
+    &.active:hover {
+      background-color: var(--background-color-hover);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--link-border-color-hover);
     }
-
-    .nav-item {
-        position: static;
-        &.mobile-only {
-            display: var(--mobile-only-display);
-        }
+    .qld-icon {
+      background-color: var(--action-icon-color);
     }
-
-    .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);
-            }
-        }
-
-        &.active {
-            color: var(--link-color);
-            background-color: var(--background-color);
-            border-block-end: var(--horizontal-bar-border-width) solid var(--background-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);
-        }
+  }
+
+  .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 {
+    --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);
     }
 
-    .navbar-nav a.nav-link,
-    a.dropdown-item {
-        color: var(--link-color);
-        padding: 0.75rem;
+    li {
+      display: flex;
+      &.mobile-only {
+        display: var(--mobile-only-display);
+      }
+      &:has(p) {
+        flex-direction: column;
+      }
+
+      a {
         display: flex;
-        line-height: 2rem;
-        gap: 1rem;
         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));
+        }
 
         &:hover {
-            text-decoration: underline;
-            text-underline-offset: 0.3rem;
-            text-decoration-thickness: 0.125rem;
+          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;
+          outline-offset: 2px;
+          box-shadow: none;
         }
+      }
+
+      p {
+        text-align: start;
+        margin-block-start: 1rem;
+      }
     }
-    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;
-            }
+
+    li:has(.parent-link) {
+      border-block-end: 1px solid var(--border-color);
+      padding-block-end: 2rem;
+      margin-block-end: 2rem;
+      grid-column: 1 / -1;
+
+      .dropdown-item {
+        border-block-end: 0;
+        gap: 1rem;
+        transition: gap var(--animation-time) ease-in-out;
+
+        &::after {
+          margin-inline-start: 0;
         }
-        
-    }
-    a.dropdown-item {
+
         &:hover {
-            background-color: transparent;
+          gap: 1.75rem;
+          transition: gap var(--animation-time) ease-in-out;
         }
+      }
     }
 
-    .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);
-        }
-
-        li {
-            display: flex;
-            &.mobile-only {
-                display: var(--mobile-only-display);
-            }
-            &:has(p) {
-                flex-direction: column;
-            }
+    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;
 
-            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));
-                }
-
-                &: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;
-                }
-            }
+      .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;
 
-            p {
-                text-align: start;
-                margin-block-start: 1rem;
-            }
+        &::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));
         }
 
-        li:has(.parent-link) {
-            border-block-end: 1px solid var(--border-color);
-            padding-block-end: 2rem;
-            margin-block-end: 2rem;
-            grid-column: 1 / -1; 
-
-            .dropdown-item {
-                border-block-end: 0;
-                gap: 1rem;
-                transition: gap var(--animation-time) ease-in-out;
-
-                &::after {
-                    margin-inline-start: 0;
-                }
-
-                &:hover {
-                    gap: 1.75rem;
-                    transition: gap var(--animation-time) ease-in-out;
-                }
-            }
+        &::after {
+          content: "";
+          content: none;
         }
 
-        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));
-                }
-
-                &::after {
-                    content: "";
-                    content: 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;
-
-                }
-            }
+        &: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;
     }
 
-    &.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;
+    .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 repeatedVerticalStyles;
+    #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;
+      }
     }
 
+    &,
     &.vertical {
-        .navbar-collapse {
-            display: block !important;
-        }
+      position: fixed;
 
-        .nav-header {
-            display: none;
-        }
-    }
-
-    @media (width <=992px) {
+      &.close {
+        display: none;
+      }
 
-        width: 100%;
-        height: 100vh;
-        align-items: start;
-        overflow-y: scroll;
+      .nav-header {
         display: flex;
-        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);
-        }
+      &.collapse > .container {
+        animation-name: slideToRight;
+        animation-duration: var(--animation-time);
+        animation-fill-mode: forwards;
+        margin-left: auto;
+      }
 
-        #burgerCloseBtn {
-            --qld-btn-close-bg: none;
-            display: flex;
-            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;
-                height: 1.5rem;
-                border: 0;
-                margin-left: 0; 
-            }
-        }
-
-        &,
-        &.vertical {
-            position: fixed;
-
-            &.close {
-                display: none;
-            }
-
-            .nav-header {
-                display: flex;
-            }
+      &.collapse:not(.show) {
+        display: none;
+      }
 
-            &.collapse>.container {
-                animation-name: slideToRight;
-                animation-duration: var(--animation-time);
-                animation-fill-mode: forwards;
-                margin-left: auto;
-            }
+      &.show {
+        display: flex;
+        right: 0;
+        z-index: 10;
 
-            &.show {
-                display: block;
-
-                &>.container {
-                    animation-name: slideFromRight;
-                    animation-duration: var(--animation-time);
-                    animation-fill-mode: forwards;
-                }
-
-                #overlay {
-                    position: fixed;
-                    inset: 0;
-                    background-color: rgba(9, 84, 159, 0.6);
-                    z-index: -1;
-                }
-            }
+        & > .container {
+          animation-name: slideFromRight;
+          animation-duration: var(--animation-time);
+          animation-fill-mode: forwards;
+        }
 
-            >.container {
-                transform: translateX(-100%);
-            }
+        #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;
+}