Improve aside

Author: Ndpnt

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

@@ -14,21 +14,67 @@
 }
 
 .aside_nav{
+  > ul > li > details > ul > li:last-child,
+  > ul > li > details > ul > li > ul {
+    margin-bottom:var(--mS);
+  }
+
   ul{
     color:var(--colorBlack600);
     display:flex;
     flex-direction:column;
 
-    li{
+    li {
+      position: relative;
       border-bottom:1px solid var(--colorBlack200);
 
-      a{
+      a {
         padding: var(--mXS) var(--mS);
         display:inline-block;
         width:100%;
+      }
 
-        &:hover{
-          background-color:var(--colorBlack200);
+      .aside_item-current {
+        color:var(--colorBlack800);
+      }
+
+      .aside_item-current::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: var(--m2XS);
+        bottom: var(--m2XS);
+        right: 0px;
+        width: 4px;
+        background-color: var(--colorPrimary);
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        z-index: 1;
+      }
+
+      .aside_item-current::after {
+        content: '';
+        position: absolute;
+        left: var(--mXS);
+        right: var(--m2XS); 
+        top: var(--m2XS); 
+        bottom: var(--m2XS);
+        background-color: var(--colorBlack200);
+        z-index: -1;
+        border-radius: 4px;
+      }
+
+
+      &.aside_item-current-section {
+        & .aside_item-current::before {
+          top: 2px;
+          bottom: 2px;
+        }
+
+        & .aside_item-current::after {
+          top: 0;
+          bottom: 0;
+          right: var(--mXS); 
         }
       }
 
@@ -44,8 +90,15 @@
           list-style: none;
           cursor: pointer;
 
-          &:hover{
-            background-color:var(--colorBlack200);
+          &:hover::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            background-color: var(--colorBlack200);
+            z-index: -1;
           }
 
           &::marker,
@@ -75,38 +128,63 @@
       }
     }
 
-    ul{
-      padding-left:var(--mS);
-      padding-top:var(--m2XS);
-      padding-bottom:var(--m2XS);
+    ul {
 
       li{
         border:none;
-        padding-top:var(--m3XS);
-        padding-bottom:var(--m3XS);
+        
 
         a{
           padding: 0;
+        }
 
-          &:hover{
-            background-color: transparent;
-          }
+        > span, a {
+          padding-left: var(--mS);
+        }
+
+        > a {
+          padding-left:var(--mL);
+          padding-top:var(--p3XS);
+          padding-bottom:var(--p3XS);
+          border-radius:4px;
+        }
+        
+        > a {
+          padding-left:var(--mS);
         }
 
         ul{
           padding-top:0;
-          padding-bottom:0;
 
+          
+          /* padding-bottom:var(--mS); */
+          
           li{
             padding:0;
+
+            a {
+              padding-left:var(--mL);
+              padding-top:var(--p3XS);
+              padding-bottom:var(--p3XS);
+              border-radius:4px;
+            }
+            
           }
         }
       }
     }
   }
 }
 
-.aside_item-current{
-  border-left:2px solid var(--colorPrimary);
+.aside_item-current-section::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--colorPrimary);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 

themes/opentermsarchive/layouts/partials/aside.html

@@ -4,9 +4,9 @@
 
 	<nav class="aside_nav">
 		<ul>
-			<li class="{{ if eq $currentPageRelPermalink .Site.Home.RelPermalink }}aside_item-current{{ end }}"><a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Home.LinkTitle }}</a></li>
+			<li ><b><a class="{{ if eq $currentPageRelPermalink .Site.Home.RelPermalink }}aside_item-current{{ end }}" href="{{ .Site.Home.RelPermalink }}">{{ .Site.Home.LinkTitle }}</a></b></li>
 			{{ range .Site.Sections.ByWeight }}
-				<li class="{{ if eq $currentPageSection .Section }}aside_item-current{{ end }}">
+				<li class="{{ if eq $currentPageSection .Section }}aside_item-current-section{{ end }}">
 					<details {{ if eq $currentPageSection .Section }}open{{ end }}>
 						<summary><b>{{ .LinkTitle | markdownify }}</b> <i class="icon" data-lucide="chevron-down"></i></summary>
 						<ul>
@@ -15,14 +15,14 @@
 							{{ range $allPages }}
 								<li>
 									{{ if .Content }}
-											<a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a>
+											<a class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a>
 									{{ else }}
-											<span>{{ .LinkTitle | markdownify }}</span>
+											<span class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}">{{ .LinkTitle | markdownify }}</span>
 									{{ end }}
 									{{ if .IsSection }}
 										<ul>
 											{{ range .RegularPages.ByWeight }}
-												<li><a href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
+												<li><a class="{{ if eq $currentPageRelPermalink .RelPermalink }}aside_item-current{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle | markdownify }}</a></li>
 											{{ end }}
 										</ul>
 									{{ end }}