feat: home page layout + fix navbar links

frontend/src/components/CreateFlist.vue

@@ -181,6 +181,10 @@ const create = async () => {
   } catch (error: any) {
     console.error("Failed to create flist", error);
     toast.error(error.response?.data || "error occured");
+    const errors:Number[] = [401, 403]
+    if (errors.includes(error.response?.status)) {
+      sessionStorage.removeItem("token");
+    }
   }
 };
 </script>

frontend/src/components/Home.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-app>
+    <Navbar></Navbar>
+    <v-main class="d-flex justify-center">
+        <v-navigation-drawer
+          v-model="drawer"
+          :rail="rail"
+          @click="rail = !rail"
+          elevation="2"
+          width="20%"
+          app
+        >
+          <v-list>
+            <v-list-item title="Users" nav></v-list-item>
+          </v-list>
+        </v-navigation-drawer>
+        <v-btn icon @click.stop="drawer = !drawer" class="rounded-1">
+          <v-icon>{{
+            drawer ? "mdi-chevron-left" : "mdi-chevron-right"
+          }}</v-icon>
+        </v-btn>
+      <v-container class="elevation-2 mt-5 mb-5">
+        <v-row>
+          <v-col cols="3"> </v-col>
+          <v-col cols="9"> </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    <Footer></Footer>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import axios from "axios";
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+
+const drawer = ref<boolean>(true);
+const rail = ref<boolean>(true);
+
+const api = axios.create({
+  baseURL: "http://localhost:4000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+const flists: any = ref("");
+onMounted(async () => {
+  try {
+    flists.value = await api.get("/v1/api/fl");
+  } catch (error) {
+    console.error("Failed to fetch flists", error);
+  }
+});
+</script>
+
+<style></style>

frontend/src/components/Navbar.vue

@@ -1,14 +1,20 @@
 <template>
   <v-app-bar class="bg-purple-darken-1">
-    <v-app-bar-nav-icon class="ml-8">
+    <v-app-bar-nav-icon to="Home" class="ml-8">
       <v-img :src="whiteLogo" contain height="50px" width="50px"></v-img>
     </v-app-bar-nav-icon>
     <v-spacer> </v-spacer>
-    <v-btn to="Create">Create flist</v-btn>
-    <v-btn to="Flists">View List</v-btn>
+    <div class="mr-5" v-if="auth === null || auth?.length === 0">
+      <v-btn to="Login">Login</v-btn>
+    </div>
+    <div class="mr-5" v-else>
+      <v-btn to="Create">Create flist</v-btn>
+      <v-btn to="Flists">View List</v-btn>
+    </div>
   </v-app-bar>
 </template>
 
 <script setup lang="ts">
 import whiteLogo from "../assets/logo_white.png";
+const auth: string | null = sessionStorage.getItem("token");
 </script>

frontend/src/components/UserFlist.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <Navbar />
+    <v-main> </v-main>
+    <Footer />
+  </v-app>
+</template>
+<script setup lang="ts">
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+</script>

frontend/src/router/index.ts

@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Login from "../components/Login.vue";
 import CreateFlist from "../components/CreateFlist.vue";
-import ViewFlists from "../components/ViewFlists.vue";
+import Home from "../components/Home.vue";
 import FollowUp from "../components/FollowUp.vue";
+import UserFlist from "../components/UserFlist.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -13,7 +14,8 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/flists",
     name: "Flists",
-    component: ViewFlists,
+    component: UserFlist,
+    meta: { requireAuth: true },
   },
   {
     path: "/follow",
@@ -26,6 +28,11 @@ const routes: Array<RouteRecordRaw> = [
     component: CreateFlist,
     meta: { requiresAuth: true },
   },
+  {
+    path: "",
+    name: "Home",
+    component: Home,
+  },
 ];
 
 const router = createRouter({