From 85579c709ebfcbbb1cd4a487edc335fa32118a21 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Thu, 23 Sep 2021 16:44:18 +0200
Subject: [PATCH] WIP

---
 components/Header.vue              |  4 ++--
 components/utilities/AppButton.vue |  2 +-
 pages/index.vue                    | 15 +++++++--------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index adcfcc8..456792d 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -9,8 +9,8 @@
                         </a>
 
                         <div class="mt-2 space-x-4 sm:mt-0">
-                            <NuxtLink class="font-medium text-gray-200 hover:text-blue-400" to="/">Components</NuxtLink>
-                            <NuxtLink class="font-medium text-gray-200 hover:text-blue-400" to="/resources">Resources</NuxtLink>
+                            <a class="font-medium text-gray-200 hover:text-blue-400" href="/#main">Components</a>
+                            <a class="font-medium text-gray-200 hover:text-blue-400" href="/resources">Resources</a>
                         </div>
                     </div>
 
diff --git a/components/utilities/AppButton.vue b/components/utilities/AppButton.vue
index 33e0661..e3ba363 100644
--- a/components/utilities/AppButton.vue
+++ b/components/utilities/AppButton.vue
@@ -2,7 +2,7 @@
   <button
     v-bind="$attrs"
     v-on="$listeners"
-    class="transition-colors duration-300 ease-in-out"
+    class="transition-colors duration-300 ease-in-out focus:outline-none"
   >
     <slot />
   </button>
diff --git a/pages/index.vue b/pages/index.vue
index 576b0f2..3e800c9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -45,7 +45,7 @@
         </div>
     </header-component>
 
-    <div class="flex bg-white lg:h-screen font-roboto">
+    <div id="components" class="flex bg-white lg:h-screen">
         <div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
         
         <div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed inset-y-0 left-0 z-30 flex flex-col w-64 h-screen px-4 py-8 overflow-y-auto transition duration-300 transform bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-0">
@@ -57,15 +57,13 @@
                 <div
                     v-for="category in categories"
                     :key="category.name"
-                >
-                    <app-button
-                        @click="updateCategory(category.name)"
-                        class="block px-4 py-2 mt-2 font-medium rounded-md focus:outline-none"
-                        :class="
+                    class="block px-4 py-2 mt-1 rounded-md focus:outline-none"
+                    :class="
                             category.name === activeCategory
                                 ? 'text-blue-500 bg-blue-50'
                                 : 'text-gray-500 hover:text-blue-500 hover:underline'"
-                        >
+                >
+                    <app-button @click="updateCategory(category.name)" class="w-full text-left">
                         {{ category.name }}
                     </app-button>
                 </div>
@@ -75,7 +73,7 @@
 
         <div class="flex flex-col flex-1 overflow-hidden">
             <main class="flex-1 lg:overflow-y-auto">
-                <div class="container px-4 mx-auto">
+                <div id="main" class="container px-4 mx-auto">
                     <div class="py-8 text-center md:py-16">
                         <h1
                             class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
@@ -319,6 +317,7 @@ export default {
         updateCategory(category) {
             this.activeCategory = category;
             this.sidebarOpen = false;
+            window.location.href = '/#main';
         }
     }
 };