Merge pull request #250 from qld-gov-au/QOLOE-277-sidenav-navtitle-an…

…d-active-item QOLOE-277 Updating nav title and active item in side nav
qld-gov-au · Jun 17, 2024 · 42de4dc · 42de4dc
2 parents cce6f9e + e0b4169
commit 42de4dc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/src/components/bs5/sidenav/sidenav.hbs b/src/components/bs5/sidenav/sidenav.hbs
@@ -2,7 +2,7 @@
 
     <h2 class="nav-title">
         {{#if navtitlelink }}
-        <a href="{{navtitlelink}}">{{navtitle}}</a>
+        <a class="nav-link" href="{{navtitlelink}}">{{navtitle}}</a>
         {{else}}
         {{navtitle}}
         {{/if}}

diff --git a/src/components/bs5/sidenav/sidenav.scss b/src/components/bs5/sidenav/sidenav.scss
@@ -55,7 +55,6 @@
         color: var(--#{$prefix}-headings-color);
         font-size: 1rem;
         line-height: 1.5;
-        padding: 1rem;
         margin: 0;
         border-bottom: 2px solid var(--sidenav-heading-border-color);
 
@@ -66,6 +65,24 @@
         }
     }
 
+    .nav-link {
+        padding: var(--sidenav-navlink-padding);
+        font-size: 0.875rem;
+        color: var(--body-color);
+        text-decoration: none;
+        transition-duration: 0s;
+
+        //.nav-link Hover state
+        &:hover {
+            background-color: var(--sidenav-hover-bg);
+            color: var(--sidenav-hover-color);
+            text-decoration: underline;
+            text-underline-offset: 0.25rem;
+            text-decoration-thickness: 2px;
+        }
+
+    }
+
     //Side navigation (ul.nav) 
 
     ul.nav {
@@ -102,31 +119,13 @@
             > ul > li > ul > li { border-top: none }
             > ul > li > ul > li > .nav-link {  padding-left: var( --sidenav-level-three-padding); }
 
-            //All nav item links, all levels
-            .nav-link {
-                padding: var(--sidenav-navlink-padding);
-                font-size: 0.875rem;
-                color: var(--body-color);
-                text-decoration: none;
-                transition-duration: 0s;
-
-                //.nav-link Hover state
-                &:hover {
-                    background-color: var(--sidenav-hover-bg);
-                    color: var(--sidenav-hover-color);
-                    text-decoration: underline;
-                    text-underline-offset: 0.25rem;
-                    text-decoration-thickness: 2px;
-                }
-
-            }
-
              //li .nav-link.active
              &.active {
                 .nav-link {
                     font-weight: 600;
                     color: var(--light-text-heading);
                     text-decoration: none;
+                    pointer-events: none;
                 }
             }