refactor layout

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/main/footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bg-gray-900 text-white py-5 border-b border-gray-700">
+  <nav class="py-5 border-t">
     <div class="container flex justify-between mx-auto">
       <NuxtLink to="/" class="text-2xl font-medium"> Elon's Blog </NuxtLink>
       <ul class="nav flex space-x-5">

components/main/header.vue

@@ -3,16 +3,23 @@ let x = ref('10')
 </script>
 
 <template>
-  <nav class="py-5 border-b border-gray-700">
-    <div class="container flex justify-between mx-auto">
-      <NuxtLink to="/" class="text-2xl font-medium"> Riyad's Blog </NuxtLink>
-      <ul class="nav flex space-x-5">
+  <nav class="py-5 border-b">
+    <div class="container flex justify-between mx-auto items-baseline">
+      <ul class="flex items-baseline space-x-5">
         <li>
-          <NuxtLink to="/categories"> Categories </NuxtLink>
+          <NuxtLink to="/" class="text-2xl font-medium"> Home </NuxtLink>
         </li>
+        <li>
+          <NuxtLink to="/categories" class="font-medium"> Categories </NuxtLink>
+        </li>
+      </ul>
+      <ul class="flex space-x-3">
         <li>
           <NuxtLink to="/blogs"> Blogs </NuxtLink>
         </li>
+        <li>
+          <NuxtLink to="/blogs"> Icon </NuxtLink>
+        </li>
       </ul>
     </div>
   </nav>

layouts/default.vue

@@ -1,9 +1,21 @@
 <template>
-  <div>
-    <MainHeader />
-    <div class="h-full">
+  <div class="gd-container">
+    <header class="fixed w-full backdrop-blur-3xl">
+      <MainHeader />
+    </header>
+    <main class="mt-20">
       <slot />
-    </div>
-    <MainFooter />
+    </main>
+    <footer>
+      <MainFooter />
+    </footer>
   </div>
 </template>
+
+<style scoped>
+.gd-container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 100vh;
+}
+</style>