From d8fa745c5617c08d9fb42fa859332891f705de31 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sat, 7 Jan 2023 13:14:43 +0600
Subject: [PATCH] refactor layout

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/main/footer.vue |  2 +-
 components/main/header.vue | 17 ++++++++++++-----
 layouts/default.vue        | 22 +++++++++++++++++-----
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/main/footer.vue b/components/main/footer.vue
index 56e2be0..277e969 100644
--- a/components/main/footer.vue
+++ b/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">
diff --git a/components/main/header.vue b/components/main/header.vue
index 1676788..09205e7 100644
--- a/components/main/header.vue
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8cce2e4..ab69d02 100644
--- a/layouts/default.vue
+++ b/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>