From 8b0499680b66e7d199cda502336c91f4833d6aee Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Tue, 5 Aug 2025 12:18:59 +0200
Subject: [PATCH] separate components

---
 app/app.vue                  | 70 ++++++------------------------------
 app/components/AppFooter.vue |  9 +++++
 app/components/NavBar.vue    | 36 +++++++++++++++++++
 app/pages/contact.vue        | 23 ------------
 app/pages/index.vue          | 17 +++++++--
 app/pages/products.vue       |  9 -----
 6 files changed, 70 insertions(+), 94 deletions(-)
 create mode 100644 app/components/AppFooter.vue
 create mode 100644 app/components/NavBar.vue
 delete mode 100644 app/pages/contact.vue
 delete mode 100644 app/pages/products.vue

diff --git a/app/app.vue b/app/app.vue
index 21c6d97..177ca03 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,68 +1,18 @@
 <template>
-    <v-app>
-        <!-- Toolbar at the top of the screen -->
-        <v-app-bar color="primary" height="48">
-            <!-- Title of the application with adjusted margin and font size -->
-            <v-app-bar-title class="text-h6 ms-3">
-                <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
+<v-app>
+    <NavBar />
 
-                <span class="ms-1">My Application</span>
-            </v-app-bar-title>
+    <!-- Main content of the application -->
+    <v-main>
+        <NuxtPage />
 
-            <!-- Spacer to push the following elements to the right -->
-            <v-spacer />
+    </v-main>
 
-            <!-- Menu icons on the right side of the toolbar -->
-            <v-btn icon="mdi-home" @click="navigateTo('/')"></v-btn>
+    <AppFooter />
 
-            <v-btn
-                icon="mdi-cube-outline"
-                @click="navigateTo('/products')"
-            ></v-btn>
-
-            <v-btn icon="mdi-email" @click="navigateTo('/contact')"></v-btn>
-        </v-app-bar>
-
-        <!-- Navigation drawer for menu actions -->
-        <v-navigation-drawer v-model="drawer">
-            <v-list>
-                <!-- Menu items in the drawer with icons -->
-                <v-list-item
-                    @click="navigateTo('/')"
-                    title="Home"
-                    prepend-icon="mdi-home"
-                ></v-list-item>
-
-                <v-list-item
-                    @click="navigateTo('/products')"
-                    title="Products"
-                    prepend-icon="mdi-cube-outline"
-                ></v-list-item>
-
-                <v-list-item
-                    @click="navigateTo('/contact')"
-                    title="Contact"
-                    prepend-icon="mdi-email"
-                ></v-list-item>
-            </v-list>
-        </v-navigation-drawer>
-
-        <!-- Main content of the application -->
-        <v-main>
-            <NuxtPage />
-        </v-main>
-
-        <!-- Smaller footer at the bottom of the screen -->
-        <v-footer app color="secondary" height="30">
-            <v-container class="text-caption text-center">
-                © {{ new Date().getFullYear() }} My Application - All Rights
-                Reserved
-            </v-container>
-        </v-footer>
-    </v-app>
+</v-app>
 </template>
 
-<script setup>
-// Drawer state to open/close the navigation drawer
-const drawer = shallowRef(false);
+<script>
+
 </script>
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
new file mode 100644
index 0000000..63c342e
--- /dev/null
+++ b/app/components/AppFooter.vue
@@ -0,0 +1,9 @@
+<!-- Smaller footer at the bottom of the screen -->
+ <template>
+<v-footer app color="secondary" height="30">
+    <v-container class="text-caption text-center">
+        © {{ new Date().getFullYear() }} SharedLists - All Rights
+        Reserved
+    </v-container>
+</v-footer>
+</template>
diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
new file mode 100644
index 0000000..961faca
--- /dev/null
+++ b/app/components/NavBar.vue
@@ -0,0 +1,36 @@
+<template>
+<!-- Toolbar at the top of the screen -->
+    <v-app-bar color="primary" height="48">
+        <!-- Title of the application with adjusted margin and font size -->
+        <v-app-bar-title class="text-h6 ms-3">
+            <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
+
+            <span class="ms-1">My Application</span>
+        </v-app-bar-title>
+
+        <!-- Spacer to push the following elements to the right -->
+        <v-spacer />
+
+        <!-- Menu icons on the right side of the toolbar -->
+        <v-btn icon="mdi-home" @click="navigateTo('/')"></v-btn>
+
+    </v-app-bar>
+
+    <!-- Navigation drawer for menu actions -->
+    <v-navigation-drawer v-model="drawer">
+        <v-list>
+            <!-- Menu items in the drawer with icons -->
+            <v-list-item @click="navigateTo('/')" title="Home" prepend-icon="mdi-home"></v-list-item>
+
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script setup>
+// Drawer state to open/close the navigation drawer
+const drawer = shallowRef(false);
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
deleted file mode 100644
index 0bc1722..0000000
--- a/app/pages/contact.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <v-container
-        class="fill-height d-flex flex-column align-center justify-center text-center"
-    >
-        <img :src="norrisStore.response.icon_url" alt="chuck norris" />
-        <v-icon icon="mdi-account-box" size="64"></v-icon>
-        <div class="mt-3">My Application's Contact Page</div>
-        <div>
-            {{ norrisStore.response }}
-        </div>
-    </v-container>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { useChuckNorris } from "~/stores/chuck";
-const norrisStore = useChuckNorris();
-
-onMounted(async () => {
-    await norrisStore.getData();
-    console.log(norrisStore.response);
-});
-</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 70a34e5..d379bf7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,8 +2,21 @@
     <v-container
         class="fill-height d-flex flex-column align-center justify-center text-center"
     >
-        <v-icon icon="mdi-home" size="64"></v-icon>
-
+        <img :src="norrisStore.response.icon_url" alt="chuck norris" size="64" />
         <div class="mt-3">My Application's Home Page</div>
+        <div>
+            {{ norrisStore.response }}
+        </div>
     </v-container>
 </template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useChuckNorris } from "~/stores/chuck";
+const norrisStore = useChuckNorris();
+
+onMounted(async () => {
+    await norrisStore.getData();
+    console.log(norrisStore.response);
+});
+</script>
diff --git a/app/pages/products.vue b/app/pages/products.vue
deleted file mode 100644
index 0814b50..0000000
--- a/app/pages/products.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <v-container
-        class="fill-height d-flex flex-column align-center justify-center text-center"
-    >
-        <v-icon icon="mdi-cube-outline" size="64"></v-icon>
-
-        <div class="mt-3">My Application's Products Page</div>
-    </v-container>
-</template>