[#1535] improve styling of sidebar

- color only focused part of border - bold-face only focused heading/sub-heading
maykinmedia · Aug 29, 2023 · 770d0f8 · 770d0f8
1 parent 27b86a3
commit 770d0f8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html b/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html
@@ -6,13 +6,13 @@
         {% button href="#" icon="expand_more" icon_position="after" extra_classes="anchor-menu--mobile__title anchor-menu__toggle" bordered=False text=_("Op deze pagina") %}
         <ul class="anchor-menu__list">
             {% for anchor in anchors %}
-                <li class="anchor-menu__list__item">
+                <li class="anchor-menu__list-item">
                     <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
                     <!-- subheadings -->
                     {% if anchor.2 %}
                         <ul class="anchor-menu__sublist anchor-menu__sublist--mobile">
                             {% for subheading in anchor.2 %}
-                                <li class-"anchor-menu__sublist__item">
+                                <li class="anchor-menu__list-item">
                                     <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
                                 </li>
                             {% endfor %}
@@ -28,13 +28,13 @@
 
     <ul class="anchor-menu__list">
         {% for anchor in anchors %}
-            <li class="anchor-menu__list__item">
+            <li class="anchor-menu__list-item">
                 <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
                 <!-- subheadings -->
                     {% if anchor.2 %}
                         <ul class="anchor-menu__sublist">
                             {% for subheading in anchor.2 %}
-                                <li>
+                                <li class="anchor-menu__list-item">
                                     <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
                                 </li>
                             {% endfor %}

diff --git a/src/open_inwoner/js/components/anchor-menu/anchor-menu.js b/src/open_inwoner/js/components/anchor-menu/anchor-menu.js
@@ -5,7 +5,8 @@ export class CreateGumshoe {
 
   constructor(node) {
     new Gumshoe(CreateGumshoe.selector, {
-      navClass: 'anchor-menu__list__item--active',
+      nested: true,
+      navClass: 'anchor-menu__list-item--active',
       offset: 30,
     })
   }

diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -63,40 +63,38 @@
     margin-left: var(--spacing-large);
   }
 
-  &__list__item {
+  &__list-item {
     box-sizing: border-box;
-    padding: var(--spacing-large) var(--spacing-medium);
     font-weight: normal;
+    margin: 0;
 
     @media (min-width: 768px) {
-      border-left: var(--border-width) solid;
-      border-color: var(--color-gray-light);
-      padding: var(--spacing-large);
+      margin: 0;
     }
   }
 
-  &__list__item--active > .link {
+  &__list-item .link {
+    border-left: var(--border-width) solid var(--color-gray-light);
+    padding: 0.75rem 0 0.75rem 1.5rem;
+  }
+
+  &__list-item--active > .link {
     font-weight: bold;
+    border-left-color: var(--color-primary);
 
     @media (min-width: 768px) {
-      border-color: var(--color-primary);
+      border-left-color: var(--color-primary);
     }
   }
 
   // nested list
   &__sublist {
     list-style-type: none;
-    padding-left: var(--spacing-large);
-    padding-top: var(--spacing-large);
+    padding: 0;
     line-height: var(--spacing-large);
 
-    &__item {
-      border-left: none;
-    }
-    li:not(:last-child) {
-      margin-bottom: var(--spacing-large);
-    }
-    li > a {
+    li .link {
+      padding: 0.5rem 0 0.5rem 2.5rem;
       font-size: var(--font-size-body-small);
     }