website: Collapsible menu sections (#2336)

* website: make sidemenu collapsed by default Signed-off-by: Prem Kumar <[email protected]> * website: add caret svg in expandble sidemenu Signed-off-by: Prem Kumar <[email protected]> * website: expand current section's sidemenu by default Signed-off-by: Prem Kumar <[email protected]>
thanos-io · Mar 29, 2020 · 601d4cf · 601d4cf
1 parent 4e5c2f2
commit 601d4cf
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 27 deletions.
diff --git a/website/layouts/partials/_default/sidemenu.html b/website/layouts/partials/_default/sidemenu.html
@@ -5,34 +5,64 @@
 </button>
 
 <nav class="docs-menu collapse d-lg-block">
-    <h5>Thanos</h5>
-    <div class="list-group list-group-flush">
-        {{ range .Site.Menus.thanos }}
-            <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
-        {{ end }}
+    <div class="sidemenu-thanos">
+        <input type="checkbox" id="menuinput-thanos" class="menuinput"{{if eq .Section ""}} checked{{end}} />
+        <label for="menuinput-thanos" class="menulabel-thanos">
+            <h5>Thanos</h5>
+            <img class="caret-expand" src="/expand.svg" alt="expand" />
+        </label>
+        <div class="list-group list-group-flush">
+            {{ range .Site.Menus.thanos }}
+                <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
+            {{ end }}
+        </div>
     </div>
-    <h5 class="mt-3">Components</h5>
-    <div class="list-group list-group-flush">
-        {{ range .Site.Menus.components }}
-            <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
-        {{ end }}
+    <div class="sidemenu-thanos">
+        <input type="checkbox" id="menuinput-components" class="menuinput"{{if eq .Section "components"}} checked{{end}} />
+        <label for="menuinput-components" class="menulabel-thanos">
+            <h5 class="mt-3">Components</h5>
+            <img class="caret-expand mt-3" src="/expand.svg" alt="expand" />
+        </label>
+        <div class="list-group list-group-flush">
+            {{ range .Site.Menus.components }}
+                <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
+            {{ end }}
+        </div>
     </div>
-    <h5 class="mt-3">Operating</h5>
-    <div class="list-group list-group-flush">
-        {{ range .Site.Menus.operating }}
-            <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
-        {{ end }}
+    <div class="sidemenu-thanos">
+        <input type="checkbox" id="menuinput-operating" class="menuinput"{{if eq .Section "operating"}} checked{{end}} />
+        <label for="menuinput-operating" class="menulabel-thanos">
+            <h5 class="mt-3">Operating</h5>
+            <img class="caret-expand mt-3" src="/expand.svg" alt="expand" />
+        </label>
+        <div class="list-group list-group-flush">
+            {{ range .Site.Menus.operating }}
+                <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
+            {{ end }}
+        </div>
     </div>
-    <h5 class="mt-3">Contributing</h5>
-    <div class="list-group list-group-flush">
-        {{ range .Site.Menus.contributing }}
-            <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
-        {{ end }}
+    <div class="sidemenu-thanos">
+        <input type="checkbox" id="menuinput-contributing" class="menuinput"{{if eq .Section "contributing"}} checked{{end}} />
+        <label for="menuinput-contributing" class="menulabel-thanos">
+            <h5 class="mt-3">Contributing</h5>
+            <img class="caret-expand mt-3" src="/expand.svg" alt="expand" />
+        </label>
+        <div class="list-group list-group-flush">
+            {{ range .Site.Menus.contributing }}
+                <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
+            {{ end }}
+        </div>
     </div>
-    <h5 class="mt-3">Proposals</h5>
-    <div class="list-group list-group-flush">
-        {{ range .Site.Menus.proposals }}
-            <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
-        {{ end }}
+    <div class="sidemenu-thanos">
+        <input type="checkbox" id="menuinput-proposals" class="menuinput"{{if eq .Section "proposals"}} checked{{end}} />
+        <label for="menuinput-proposals" class="menulabel-thanos">
+            <h5 class="mt-3">Proposals</h5>
+            <img class="caret-expand mt-3" src="/expand.svg" alt="expand" />
+        </label>
+        <div class="list-group list-group-flush">
+            {{ range .Site.Menus.proposals }}
+                <a class="list-group-item list-group-item-action list-group-item-thanos py-1" href="{{ .URL }}">{{ .Title }}</a>
+            {{ end }}
+        </div>
     </div>
-</nav>
+</nav>
diff --git a/website/static/expand.svg b/website/static/expand.svg
diff --git a/website/static/main.css b/website/static/main.css
@@ -70,4 +70,36 @@ pre {
 }
 
 .header-anchor { font-size: 100%; visibility: hidden;}
-h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}
+h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}
+
+/* SideMenu Collapse */
+.menuinput {
+    display: none;
+}
+
+.menulabel-thanos {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.caret-expand {
+    width: 16px;
+    margin-left: 8px;
+    margin-bottom: 0.2rem;
+    transition: transform 0.2s ease-out;
+}
+
+.menuinput:checked + label .caret-expand {
+    transform: rotateX(180deg);
+}
+
+.sidemenu-thanos .list-group {
+    transform: scaleY(0);
+    height: 0;
+}
+
+.menuinput:checked ~ .list-group {
+    transform: scaleY(1);
+    height: auto;
+}