hugo: move sidebar main navigation to partial

Signed-off-by: David Karlsson <[email protected]>

Author: dvdksn

hugo_stats.json

@@ -354,6 +354,7 @@
       "link",
       "lntable",
       "lntd",
+      "m-2",
       "m-4",
       "m-auto",
       "macOS",
@@ -393,6 +394,7 @@
       "mt-1",
       "mt-2",
       "mt-20",
+      "mt-4",
       "mx-auto",
       "my-0",
       "my-2",
@@ -432,6 +434,7 @@
       "pr-2",
       "prose",
       "pt-0",
+      "pt-4",
       "px-1",
       "px-2",
       "px-3",

layouts/_default/baseof.html

@@ -22,44 +22,6 @@
           <span class="icon-svg">{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span>
           Back
         </button>
-        <!-- Main navigation -->
-        <div class="py-2 px-4" x-data="{ expanded: false }">
-          <div class="flex w-full items-center justify-between">
-            <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .FirstSection.Permalink }}">
-              {{- with .FirstSection.Params.icon }}
-                <span class="pr-2 icon-sm icon-svg">
-                  {{- partialCached "icon.html" . . -}}
-                </span>
-              {{- end }}
-              {{- .FirstSection.LinkTitle -}}
-            </a>
-            <button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
-              <span x-show="! expanded" class="icon-svg">
-                {{ partialCached "icon" "expand_more" "expand_more" }}
-              </span>
-              <span x-cloak x-show="expanded" class="icon-svg">
-                {{ partialCached "icon" "expand_less" "expand_less" }}
-              </span>
-            </button>
-          </div>
-          <ul x-cloak x-show="expanded" class="py-4 space-y-4">
-            {{ range site.Menus.main }}
-              {{ if ne page.FirstSection .Page }}
-              <li>
-                <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .URL }}">
-                  {{- with .Page.Params.icon }}
-                    <span class="pr-2 icon-sm icon-svg">
-                      {{- partialCached "icon.html" . . -}}
-                    </span>
-                  {{- end }}
-                  {{- .Name }}
-                </a>
-              </li>
-              {{ end }}
-            {{ end }}
-          </ul>
-        </div>
-        <hr class="my-2 text-gray-light-200 dark:text-gray-dark-300" />
         <!-- Actual Sidebar Content -->
         {{ block "left" . }}
         {{ end }}

layouts/partials/sidebar-mainnav.html

@@ -0,0 +1,38 @@
+<!-- Main navigation for the sidebar -->
+<div class="py-2 px-4" x-data="{ expanded: false }">
+  <div class="flex w-full items-center justify-between">
+    <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .FirstSection.Permalink }}">
+      {{- with .FirstSection.Params.icon }}
+        <span class="pr-2 icon-sm icon-svg">
+          {{- partialCached "icon.html" . . -}}
+        </span>
+      {{- end }}
+      {{- .FirstSection.LinkTitle -}}
+    </a>
+    <button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
+      <span x-show="! expanded" class="icon-svg">
+        {{ partialCached "icon" "expand_more" "expand_more" }}
+      </span>
+      <span x-cloak x-show="expanded" class="icon-svg">
+        {{ partialCached "icon" "expand_less" "expand_less" }}
+      </span>
+    </button>
+  </div>
+  <ul x-cloak x-show="expanded" class="pt-4 space-y-4">
+    {{ range site.Menus.main }}
+      {{ if ne page.FirstSection .Page }}
+      <li>
+        <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .URL }}">
+          {{- with .Page.Params.icon }}
+            <span class="pr-2 icon-sm icon-svg">
+              {{- partialCached "icon.html" . . -}}
+            </span>
+          {{- end }}
+          {{- .Name }}
+        </a>
+      </li>
+      {{ end }}
+    {{ end }}
+  </ul>
+</div>
+<hr class="m-2 text-gray-light-200 dark:text-gray-dark-300" />

layouts/partials/sidebar.html

@@ -1,4 +1,6 @@
 <!-- section tree -->
+{{ partial "sidebar-mainnav.html" . }}
+
 <nav class="md:text-sm flex flex-col">
   <div
     class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>