From 601d4cf57a1e940208714b2c309f990834df958d Mon Sep 17 00:00:00 2001
From: Prem Kumar <prmsrswt@gmail.com>
Date: Mon, 30 Mar 2020 03:48:07 +0530
Subject: [PATCH] website: Collapsible menu sections (#2336)

* website: make sidemenu collapsed by default

Signed-off-by: Prem Kumar <prmsrswt@gmail.com>

* website: add caret svg in expandble sidemenu

Signed-off-by: Prem Kumar <prmsrswt@gmail.com>

* website: expand current section's sidemenu by default

Signed-off-by: Prem Kumar <prmsrswt@gmail.com>
---
 .../layouts/partials/_default/sidemenu.html   | 82 +++++++++++++------
 website/static/expand.svg                     |  4 +
 website/static/main.css                       | 34 +++++++-
 3 files changed, 93 insertions(+), 27 deletions(-)
 create mode 100644 website/static/expand.svg

diff --git a/website/layouts/partials/_default/sidemenu.html b/website/layouts/partials/_default/sidemenu.html
index bf45f265ff..8c9e373922 100644
--- 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>
\ No newline at end of file
+</nav>
diff --git a/website/static/expand.svg b/website/static/expand.svg
new file mode 100644
index 0000000000..e98e7b97f0
--- /dev/null
+++ b/website/static/expand.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24.28" height="15.14" fill="#000000" version="1.1" viewBox="0 0 12.14 7.57" xmlns="http://www.w3.org/2000/svg">
+	<path d="m12.14 1.5-1.5-1.5-4.57 4.57-4.57-4.57-1.5 1.5 6.07 6.07z"/>
+</svg>
diff --git a/website/static/main.css b/website/static/main.css
index 3124bd995e..3d39d261be 100644
--- 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}
\ No newline at end of file
+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;
+}