diff --git a/hugo_stats.json b/hugo_stats.json
index fab35754bc..8918945cfd 100644
--- a/hugo_stats.json
+++ b/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",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3083fe64db..3dd99e53c1 100644
--- a/layouts/_default/baseof.html
+++ b/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 }}
diff --git a/layouts/partials/sidebar-mainnav.html b/layouts/partials/sidebar-mainnav.html
new file mode 100644
index 0000000000..c73da7ce3d
--- /dev/null
+++ b/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" />
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 693ebb4fcb..d71e0d1e77 100644
--- a/layouts/partials/sidebar.html
+++ b/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>