Improve menu style

Author: clementbiron

themes/opentermsarchive/assets/css/components/aside.css

@@ -12,8 +12,39 @@
 }
 
 .aside_nav {
+
+  & a{
+    color: var(--colorBlack800);
+    z-index:1;
+    position:relative;
+    display:block;
+
+    &:hover{
+      &:before{
+        content:"";
+        position:absolute;
+        left:calc(var(--xs) * -1);
+        right:0;
+        top:calc(var(--3xs) * -1);
+        bottom:calc(var(--3xs) * -1);
+        width:calc(100% + var(--xs));
+        height:calc(100% + var(--2xs));
+        z-index:-1;
+        background-color: var(--colorBlack200);
+      }
+    }
+  }
+
+  & .aside_item-current{
+    font-weight: bold;
+
+    & a{
+      color: var(--colorPrimary);
+    }
+  }
+
   ul {
-    color: var(--colorBlack600);
+    color: var(--colorBlack800);
     display: flex;
     gap:var(--m3XS);
     flex-direction: column;
@@ -22,46 +53,38 @@
       & ul {
         & li {
           & ul {
+            margin-top:var(--2xs);
             border-left:1px solid var(--colorBlack300);
             padding-left:var(--pXS);
+            /* margin-left:var(--mXS); */
           }
         }
       }
     }
   }
-}
 
-.aside_item-current {
-  font-weight: bold;
-  z-index:1;
-  position:relative;
-  
-  & a{
+  summary{
+    display:flex;
+    align-items:center;
+    gap:var(--2xs);
+    cursor:pointer;
     color: var(--colorBlack800);
-  }
-  
-  &:before{
-    content:"";
-    position:absolute;
-    left:calc(var(--xs) * -1);
-    right:0;
-    top:calc(var(--3xs) * -1);
-    bottom:calc(var(--3xs) * -1);
-    width:calc(100% + var(--xs));
-    height:calc(100% + var(--2xs));
-    z-index:-1;
-    background-color: var(--colorBlack200);
+
+    & .icon{
+      margin-top:var(--3xs);
+    }
   }
 }
 
 .aside_item-section{
   display:inline-block;
-  margin-top:var(--mXS);
-  color: var(--colorBlack600);
+  margin-top:var(--m);
+  color: var(--colorBlack800);
+  font-weight: bold;
 }
 
 .aside_item-subsection{
   display:inline-block;
   margin-top:var(--m2XS);
-  color: var(--colorBlack600);
+  color: var(--colorBlack800);
 }

themes/opentermsarchive/layouts/partials/aside.html

@@ -13,25 +13,26 @@
         <li {{ if eq $currentPageSection .Section }}class="aside_item-current-section"{{ end }}>
           {{ $allPages := .RegularPages.ByWeight | append .Sections.ByWeight }}
           {{ $allPages := sort $allPages "Weight" }}
-          <span class="aside_item-section"><b>{{ .LinkTitle | markdownify  }}</b></span>
+          <span class="aside_item-section">{{ .LinkTitle | markdownify  }}</span>
           <ul>
             {{ range $allPages }}
               {{ if .Content }}
                 <li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
-              {{ else }}
-                <li><span class="aside_item-subsection">{{ .LinkTitle | markdownify }}</span></li>
               {{ end }}
               {{ if .IsSection }}
                 <li>
-                  <ul>
-                    {{ range .RegularPages.ByWeight }}
-                      <li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
-                    {{ end }}
-                  </ul>
+                  <details {{ if eq $currentPageRelPermalink .RelPermalink }}open{{ end }}>
+                    <summary class="aside_item-subsection">{{ .LinkTitle | markdownify }}<i class="icon" data-lucide="chevron-down"></i></summary>
+                    <ul>
+                      {{ range .RegularPages.ByWeight }}
+                        <li {{ if eq $currentPageRelPermalink .RelPermalink }}class="aside_item-current"{{ end }}><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
+                      {{ end }}
+                    </ul>
+                  </details>
                 </li>
               {{ end }}
             {{ end }}
-         </ul>
+          </ul>
         </li>
       {{ end }}
     </ul>