space for sidebar

Author: wilfredinni

src/components/layout/TheSidebar.vue

@@ -100,24 +100,26 @@ const pages = [
 </script>
 
 <template>
-  <h5 class="mb-8 font-semibold text-slate-900 dark:text-slate-200 lg:mb-3">
-    Cheatsheet
-  </h5>
-  <ul
-    class="space-y-6 border-l border-slate-100 dark:border-slate-800 lg:space-y-2"
-  >
-    <li v-for="item in pages" :key="item.name">
-      <router-link
-        :to="item.path"
-        class="-ml-px block border-l border-transparent pl-4"
-        :class="
-          $route.path === item.path
-            ? 'border-current font-semibold text-sky-500 dark:text-sky-400'
-            : 'text-slate-700 hover:border-slate-400 hover:text-slate-900 dark:text-slate-400 dark:hover:border-slate-500 dark:hover:text-slate-300'
-        "
-      >
-        {{ item.name }}
-      </router-link>
-    </li>
-  </ul>
+  <div class="mt-5">
+    <h5 class="mb-8 font-semibold text-slate-900 dark:text-slate-200 lg:mb-3">
+      Cheatsheet
+    </h5>
+    <ul
+      class="space-y-6 border-l border-slate-100 dark:border-slate-800 lg:space-y-2"
+    >
+      <li v-for="item in pages" :key="item.name">
+        <router-link
+          :to="item.path"
+          class="-ml-px block border-l border-transparent pl-4"
+          :class="
+            $route.path === item.path
+              ? 'border-current font-semibold text-sky-500 dark:text-sky-400'
+              : 'text-slate-700 hover:border-slate-400 hover:text-slate-900 dark:text-slate-400 dark:hover:border-slate-500 dark:hover:text-slate-300'
+          "
+        >
+          {{ item.name }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
 </template>

src/layouts/default.vue

@@ -11,7 +11,7 @@
         <div class="hidden pt-6 lg:col-span-3 lg:block xl:col-span-3">
           <nav
             aria-label="Sidebar"
-            class="fixed inset-0 top-[5.255rem] left-[max(0px,calc(50%-40rem))] right-auto z-20 hidden w-[19.5rem] overflow-y-auto px-8 pt-5 lg:block"
+            class="fixed inset-0 top-[3.655rem] left-[max(0px,calc(50%-40rem))] right-auto z-20 hidden w-[19.5rem] overflow-y-auto px-8 pt-5 lg:block"
           >
             <the-sidebar />
           </nav>