Cosmetic Fixes

Signed-off-by: Kiran Parajuli <[email protected]>

Author: kiranparajuli589

src/App.vue

@@ -5,7 +5,8 @@
     :class="{
       show: sidebarState,
     }"
-    :toggle-sidebar="toggleSidebar"
+    :toggle-sidebar="closeSidebar"
+    :is-mobile="screenWidth < 780"
   />
   <div
     v-if="showSidebar && screenWidth < 780 && sidebarState"
@@ -39,6 +40,9 @@ const showFooter = computed(() => router.currentRoute.value.meta.footer);
 const toggleSidebar = () => {
   sidebarState.value = !sidebarState.value;
 };
+const closeSidebar = () => {
+  sidebarState.value = false;
+};
 
 const screenWidth = ref(0);
 onMounted(() => {

src/components/TheAppbar.vue

@@ -12,6 +12,7 @@ defineProps<{
       </button>
       <h1><router-link to="/" class="!no-underline">Vue Formik</router-link></h1>
       <div class="grow" />
+      <router-link to="/about">About</router-link>
       <a href="https://github.com/vue-formik/vue-formik" target="_blank"> ⭐ Star us on GitHub </a>
     </div>
   </nav>
@@ -40,7 +41,7 @@ defineProps<{
   a
     color: white
     text-decoration: none
-    @apply text-sm
+    @apply text-sm px-2 mx-2
     &:hover
       text-decoration: underline
 </style>

src/components/TheSidebar.vue

@@ -1,5 +1,18 @@
 <template>
-  <aside class="the-sidebar">
+  <aside
+    class="the-sidebar"
+    :style="{
+      paddingLeft: isMobile ? '2rem' : '1rem',
+    }"
+  >
+    <button
+      v-if="isMobile"
+      class="absolute top-1 right-1 text-xs"
+      title="Close Sidebar"
+      @click="toggleSidebar"
+    >
+      <span>Close</span>
+    </button>
     <ul class="flex flex-col gap-2">
       <template v-for="(item, index) in TheSidebarItems" :key="index">
         <li>
@@ -26,20 +39,22 @@ import TheSidebarItems from "@/constants/theSidebarItems.ts";
 
 defineProps<{
   toggleSidebar: () => void;
+  isMobile: boolean;
 }>();
 </script>
 
 <style lang="sass">
 .the-sidebar
-  @apply pt-4 pl-2
+  @apply pt-4 relative
   @apply border-r border-surface-b
 
   ul
     li
-      @apply px-2 text-sm
+      @apply mb-1
       & > p
-        @apply mt-5 mb-1.5 text-xs
+        @apply mt-5 mb-2 text-xs
       a
+        @apply px-2 py-1 text-sm
         @apply text-gray-400 rounded
         @apply transition-all duration-200 ease-in-out
         &:hover
@@ -48,6 +63,4 @@ defineProps<{
           @apply text-white brightness-90
         &.router-link-exact-active
           @apply text-primary
-      ul li
-        @apply mb-1.5
 </style>

src/constants/theSidebarItems.ts

@@ -4,7 +4,6 @@ export default [
     children: [
       { name: "Introduction", path: "/getting-started/introduction" },
       { name: "Quick Start", path: "/getting-started/quick-start" },
-      { name: "Quick Start", path: "/getting-started/why" },
     ],
   },
   {

src/views/HomeView.vue

@@ -7,9 +7,9 @@
 
     <section class="mb-12">
       <div class="flex gap-4 justify-center items-center">
-        <router-link class="primary-btn md" to="/getting-started/introduction"
-          >Why Vue-Formik?</router-link
-        >
+        <router-link class="primary-btn md" to="/getting-started/introduction">
+          Introduction
+        </router-link>
         <router-link class="secondary-btn md" to="/getting-started/quick-start">
           Get Started
         </router-link>