From 6c31bbde7781712dc98a45851f23c71a16f6ec53 Mon Sep 17 00:00:00 2001
From: Xen0Xys <red57101@gmail.com>
Date: Tue, 11 Jun 2024 17:46:30 +0200
Subject: [PATCH] :bug: Fix minor bugs

---
 components/buttons/NavButton.vue | 25 +++++++++++++++++++++
 components/top/AvatarMenu.vue    |  1 -
 components/top/BurgerMenu.vue    | 21 ++++++++++--------
 components/top/TopMenu.vue       | 38 ++++++++++----------------------
 layouts/NavLayout.vue            | 18 +++++++++++++++
 middleware/apiurl.middleware.ts  |  1 +
 pages/index.vue                  | 10 ++++-----
 pages/settings/index.vue         | 12 +++++-----
 8 files changed, 78 insertions(+), 48 deletions(-)
 create mode 100644 components/buttons/NavButton.vue
 create mode 100644 layouts/NavLayout.vue

diff --git a/components/buttons/NavButton.vue b/components/buttons/NavButton.vue
new file mode 100644
index 0000000..c9753ae
--- /dev/null
+++ b/components/buttons/NavButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+
+const {path, icon} = defineProps<{
+    path: string,
+    icon: string,
+}>();
+
+const route = useRoute();
+
+function getButtonVariant(){
+    return route.path === path ? "secondary" : "ghost";
+}
+</script>
+
+<template>
+    <Button :variant="getButtonVariant()" @click="navigateTo(path)">
+        <Icon :name="icon" class="w-4 h-4 mr-2"/>
+        <slot/>
+    </Button>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/top/AvatarMenu.vue b/components/top/AvatarMenu.vue
index d395c4d..15d4a65 100644
--- a/components/top/AvatarMenu.vue
+++ b/components/top/AvatarMenu.vue
@@ -13,7 +13,6 @@ import {Avatar, AvatarImage, AvatarFallback} from "~/components/ui/avatar";
             </Avatar>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-            <DropdownMenuItem @click="$router.push('/')">Home</DropdownMenuItem>
             <DropdownMenuItem @click="$router.push('/settings')">Settings</DropdownMenuItem>
         </DropdownMenuContent>
     </DropdownMenu>
diff --git a/components/top/BurgerMenu.vue b/components/top/BurgerMenu.vue
index bb89328..4013daf 100644
--- a/components/top/BurgerMenu.vue
+++ b/components/top/BurgerMenu.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "~/components/ui/sheet";
-import {Button} from "~/components/ui/button";
-import {useRoute} from "vue-router";
 
-const route = useRoute();
+import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "~/components/ui/sheet";
+import NavButton from "~/components/buttons/NavButton.vue";
 
-function getButtonVariant(path: string){
-    return route.path === path ? "secondary" : "outline";
-}
 </script>
 
 <template>
@@ -20,8 +15,16 @@ function getButtonVariant(path: string){
                 <SheetHeader>
                     <SheetTitle>Open Webtoon Reader</SheetTitle>
                     <SheetDescription class="flex flex-col gap-2">
-                        <Button :variant="getButtonVariant('/')" class="w-full" @click="$router.push('/')">Home</Button>
-                        <Button :variant="getButtonVariant('/settings')" class="w-full" @click="$router.push('/settings')">Settings</Button>
+                        <SheetClose as-child>
+                            <NavButton path="/" icon="iconoir:home">
+                                Home
+                            </NavButton>
+                        </SheetClose>
+                        <SheetClose as-child>
+                            <NavButton path="/settings" icon="iconoir:home">
+                                Settings
+                            </NavButton>
+                        </SheetClose>
                     </SheetDescription>
                 </SheetHeader>
             </SheetContent>
diff --git a/components/top/TopMenu.vue b/components/top/TopMenu.vue
index db74d0a..259abc3 100644
--- a/components/top/TopMenu.vue
+++ b/components/top/TopMenu.vue
@@ -3,20 +3,8 @@
 import BurgerMenu from "~/components/top/BurgerMenu.vue";
 import AvatarMenu from "~/components/top/AvatarMenu.vue";
 import {Separator} from "~/components/ui/separator";
-import {
-    NavigationMenu,
-    NavigationMenuItem,
-    NavigationMenuLink,
-    NavigationMenuList,
-    navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
-import {useRoute} from "vue-router";
+import NavButton from "~/components/buttons/NavButton.vue";
 
-const route = useRoute();
-
-function getButtonVariant(path: string){
-    return route.path === path;
-}
 </script>
 
 <template>
@@ -24,23 +12,19 @@ function getButtonVariant(path: string){
         <div id="mobile" class="md:hidden items-center flex p-2 px-4">
             <BurgerMenu/>
             <div class="w-full">
-                <h1 class="text-center p-2 sm:hidden">OWR</h1>
-                <h1 class="text-center p-2 max-sm:hidden">Open Webtoon Reader</h1>
+                <h2 class="h2-reset text-center p-2 sm:hidden">OWR</h2>
+                <h2 class="h2-reset text-center p-2 max-sm:hidden">Open Webtoon Reader</h2>
             </div>
             <ThemeSwitcher/>
         </div>
         <div id="pc" class="max-md:hidden items-center flex p-2 px-4 justify-between">
             <div class="flex items-center gap-8">
-                <h1 class="text-center p-2">Open Webtoon Reader</h1>
-                <NavigationMenu class="h-10">
-                    <NavigationMenuList>
-                        <NavigationMenuItem>
-                            <NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()" :active="getButtonVariant('/')">
-                                Home
-                            </NavigationMenuLink>
-                        </NavigationMenuItem>
-                    </NavigationMenuList>
-                </NavigationMenu>
+                <h2 class="h2-reset text-center p-2">Open Webtoon Reader</h2>
+                <div id="nav" class="flex gap-4">
+                    <NavButton path="/" icon="iconoir:home">
+                        Home
+                    </NavButton>
+                </div>
             </div>
             <div id="right" class="flex gap-5">
                 <ThemeSwitcher/>
@@ -55,5 +39,7 @@ function getButtonVariant(path: string){
 </template>
 
 <style scoped>
-
+h2.h2-reset{
+    @apply border-none;
+}
 </style>
diff --git a/layouts/NavLayout.vue b/layouts/NavLayout.vue
new file mode 100644
index 0000000..fb13a5c
--- /dev/null
+++ b/layouts/NavLayout.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+import {Toaster} from "~/components/ui/toast";
+</script>
+
+<template>
+    <div>
+        <Toaster/>
+        <div class="flex flex-col min-h-screen">
+            <TopMenu/>
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/middleware/apiurl.middleware.ts b/middleware/apiurl.middleware.ts
index 9533071..30f7746 100644
--- a/middleware/apiurl.middleware.ts
+++ b/middleware/apiurl.middleware.ts
@@ -1,4 +1,5 @@
 import {getFromLocalStorage, clearFromLocalStorage} from "~/utils/utils";
+import {testApiConnection} from "~/utils/api";
 
 export default defineNuxtRouteMiddleware(async() => {
     const apiUrl = getFromLocalStorage("apiurl");
diff --git a/pages/index.vue b/pages/index.vue
index 4912d1d..cbe4b11 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,16 +3,14 @@ import * as apiurlMiddleware from "~/middleware/apiurl.middleware";
 definePageMeta({
     middleware: [
         apiurlMiddleware.default
-    ]
+    ],
+    layout: "nav-layout"
 });
 </script>
 
 <template>
-    <div class="flex flex-col min-h-screen">
-        <TopMenu/>
-        <div class="flex flex-1 justify-center items-center text-center">
-            <h1>Home</h1>
-        </div>
+    <div class="flex flex-1 justify-center items-center text-center">
+        <h1>Home</h1>
     </div>
 </template>
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 14ab2d1..cf16d2d 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-
+definePageMeta({
+    middleware: "apiurl-middleware",
+    layout: "nav-layout"
+});
 </script>
 
 <template>
-    <div class="flex flex-col min-h-screen">
-        <TopMenu/>
-        <div class="flex flex-1 justify-center items-center text-center">
-            <h1>Settings</h1>
-        </div>
+    <div class="flex flex-1 justify-center items-center text-center">
+        <h1>Settings</h1>
     </div>
 </template>