Add aside styles

Author: clementbiron

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

@@ -6,52 +6,73 @@
   border-radius:4px;
 }
 
-.aside_items{
-
+@media (--tabletSmall) {
+  .aside {
+    max-width: 100%;
+    margin-bottom:var(--m2XL);
+  }
 }
 
-.aside_item{
-  padding: var(--mXS) var(--mS);
-  border-bottom:1px solid var(--colorBlack200);
+.aside_nav{
+  ul{
+    color:var(--colorBlack600);
+    display:flex;
+    flex-direction:column;
 
-  &:last-child{
-    border:none;
-  }
+    li{
+      border-bottom:1px solid var(--colorBlack200);
 
-  & #TableOfContents{
-    padding-left:var(--mXS);
+      &:last-child{
+        border:none;
+      }
 
-    & > ul > li > ul{
-      padding-left:var(--mXS);
-    }
-  }
-}
+      details{
+        position: relative;
 
-.aside_subitems{
-  padding-left:var(--mXS);
-}
+        summary{
+          padding: var(--mXS) var(--mS);
+          list-style: none;
+          cursor: pointer;
+          transition: 0.2s;
 
-.aside_subsubitems{
-  padding-left:var(--mS);
-}
+          &:hover{
+            background-color:var(--colorBlack200);
+          }
 
-.aside_item-current{
-  background-color:var(--colorBlack200);
-  & > a,
-  & > span{
-    font-weight:bold;
-  }
-}
+          &::marker,
+          &::-webkit-details-marker{
+            display: none;
+          }
+          
+          &::after{
+            content: '↓';
+            position: absolute;
+            right: 10px;
+            top:12px;
+            font-size:0.8em;
+            color:var(--colorBlack400);
+          }
+        }
 
-.aside_item_section{
-  color:var(--colorBlack600);
-  width:100%;
-  display:inline-block;
-}
+        &[open]{
+          summary::after{
+            transform: rotate(180deg);
+          }
+        }
+      }
 
-@media (--tabletSmall) {
-  .aside {
-    max-width: 100%;
-    margin-bottom:var(--m2XL);
+      span{
+        display:inline-block;
+      }
+    }
+
+    ul{
+      padding-left:var(--mS);
+      padding-bottom:var(--mXS);
+
+      li{
+        border:none;
+      }
+    }
   }
 }

themes/opentermsarchive/layouts/partials/aside.html

@@ -1,35 +1,40 @@
 <aside class="aside">
 	{{ $currentPageTitle := .Title }}
 	{{ $currentPageSection := .Section }}
+
 	<nav class="aside_nav">
-		<ul class="aside_items">
+		<ul>
 			{{ range .Site.Sections.ByWeight }}
-				<li class="aside_item {{ if eq $currentPageSection .Section }}aside_item-current{{ end }}">
-					<a href="{{ .RelPermalink }}" class="aside_item_section">{{ .LinkTitle }}</a>
-					<ul class="aside_subitems">
-						{{ range .RegularPages.ByWeight }}
-							<li class="aside_subitem">
-								<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-							</li>
-						{{ end }}
-						{{ range .Sections.ByWeight }}
-							<li class="aside_subitem">
-								<a href="{{ .RelPermalink }}" class="aside_item_section">{{ .LinkTitle }}</a>
-								<ul class="aside_subsubitems">
-									{{ range .RegularPages.ByWeight }}
-										<li class="aside_subsubitem">
-											<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-										</li>
+				<li class="{{ if eq $currentPageSection .Section }}aside_item-current{{ end }}">
+					<details>
+						<summary><b>{{ .LinkTitle }}</b></summary>
+						<ul>
+							{{ range .RegularPages.ByWeight }}
+								<li>
+									<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+								</li>
+							{{ end }}
+							{{ range .Sections.ByWeight }}
+								<li>
+									{{ if .Content }}
+										<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+									{{ else }}
+										<span>{{ .LinkTitle }}</span>
 									{{ end }}
-								</ul>
-							</li>
-						{{ end }}
-					</ul>
+									<ul>
+										{{ range .RegularPages.ByWeight }}
+											<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+										{{ end }}
+									</ul>
+								</li>
+							{{ end }}
+						</ul>
+					</details>
 				</li>
 			{{ end }}
 
 			{{ range where .Site.RegularPages "Section" "" }}
-				<li class="aside_item {{ if eq $currentPageTitle .Title }}aside_item-current{{ end }}">
+				<li class="{{ if eq $currentPageTitle .Title }}aside_item-current{{ end }}">
 					<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
 				</li>
 			{{ end }}