Fix #200 : feat(frontend): added footer (#203)

* feat: added footer #200

* Updates footer

* footer renamed

* Comments removed

* added urlMapping

* UI correction and link modificatio

frontend/components/footer.vue

@@ -0,0 +1,75 @@
+<template>
+    <footer class="">
+        <hr class="mt-8 border-gray-400 sm:mx-auto lg:mt-6 w-full" />
+        <div class="mx-auto lg:my-0 w-4/5 p-4 py-4 lg:py-6">
+            <div class="min-[800px]:flex min-[800px]:items-center min-[800px]:justify-between">
+                <div class="flex-wrap md:justify-start md:text-start text-center">
+                    <div class="inline-block mr-10 mb-6 text-sm text-gray-500"><nuxt-link  class="hover:underline" to="/productList">Products</nuxt-link></div>
+                    <div class="inline-block mb-6 text-sm text-gray-500"><nuxt-link  class="hover:underline" to="/eventList">Events</nuxt-link></div>
+                    <div class="flex md:justify-start justify-center text-xs text-gray-500 items-center"><p class="text-2xl inline mr-2">©</p><nuxt-link  class="hover:underline " to="/">Getit 2024</nuxt-link>. All rights reserved
+                    </div>
+                </div>
+
+                <nuxt-link class="justify-center text-3xl font-bold flex items-center text-black md:m-4 m-6" to="/">
+                    <img class="h-12"
+                        src="../assets/get_it.png"
+                        alt="logo">
+                      GetIt
+                </nuxt-link>
+                <div class="sm:flex-col sm:items-center">
+                    <div class="flex md:justify-end justify-center mb-6">
+                        <a href="https://github.com/bsoc-bitbyte/GetIt/issues/new?assignees=&labels=bug&projects=&template=1_bug_report_form.yml&title=%5BBUG%5D%3A+" target="_blank" class="text-sm text-gray-500 underline hover:text-gray-900 mr-4">
+                            <img src="../assets/bug.svg" class="inline mr-2" />Report a bug
+                        </a>
+
+                        <button @click="handleEditPage" class="text-sm text-gray-500 underline hover:text-gray-900 ms-5">
+                            <img src="../assets/githubCat.svg" class="inline mr-2" />Edit this page
+                        </button>
+                    </div>
+
+                    <div class="flex md:justify-end justify-center">
+                        <a href="https://discord.com/invite/W6crw7ajSs" target="_blank" class="text-sm text-gray-500 underline hover:text-gray-900 mr-4">
+                            <img src="../assets/discord.svg" class="inline mr-2" />Join our discord
+                        </a>
+
+                        <a href="mailto:[email protected]" class="text-sm text-gray-500 underline hover:text-gray-900 ms-5">
+                            <img src="../assets/mail.svg" class="inline mr-2" />Mail
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+import { navigateTo, useRequestURL} from 'nuxt/app';
+export default {
+    setup(){
+        const urlMapping = {
+          "/": "/index",
+          "/eventList": "/eventList",
+          "/checkout": "/checkOut",
+          "/cart": "/cart",
+          "/order": "/order",
+          "/productList": "/productList",
+          "/Signin": "/Signin",
+          "/Signup": "/Signup",
+        };
+        const handleEditPage = async()=>{
+            let url = useRequestURL().pathname;
+            url = urlMapping[url];
+            const redirectUrl = `https://github.com/bsoc-bitbyte/GetIt/tree/main/frontend/pages${url}.vue`;
+            await navigateTo(redirectUrl, {
+                open: {
+                    target: '_blank',
+                },
+                external: true
+            })
+        }
+        return{
+            handleEditPage,
+        }
+    }
+}
+</script>

frontend/layouts/default.vue

@@ -1,16 +1,19 @@
 <template>
-   <link rel="icon" type="image/png" href="\favicon.png">
-    <div>
-      <Navbar/>
-      <slot />
-    </div>
-  </template>
+  <link rel="icon" type="image/png" href="\favicon.png">
+  <div>
+    <Navbar/>
+    <slot />
+    <Footer/>
+  </div>
+</template>
 
 <script>
 import Navbar from '@/components/NavNew.vue';
+import Footer from '@/components/footer.vue';
 export default {
-  components: {
-    Navbar
-  },
+components: {
+  Navbar,
+  Footer
+},
 }
 </script>