From 158bc91833b28d91594cce4bc23adea69f1bb197 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 22 Mar 2024 22:39:40 +0800
Subject: [PATCH 1/5] [Page] [Layout] Add content

---
 src/data/Navigation.ts                        | 21 ++++++++++++++
 src/data/index.ts                             |  4 +++
 src/main.ts                                   |  3 ++
 src/router/default.ts                         | 11 ++++++-
 src/services/Navigation.ts                    | 10 +++++--
 src/views/layouts/base/LayoutContainer.vue    | 29 +++++++++++++++++++
 .../layouts/base/components/LayoutSidebar.vue |  1 +
 src/views/pages/home/HomeIndex.vue            | 14 +++++++++
 8 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 src/data/Navigation.ts
 create mode 100644 src/data/index.ts
 create mode 100644 src/views/layouts/base/LayoutContainer.vue
 create mode 100644 src/views/pages/home/HomeIndex.vue

diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
new file mode 100644
index 00000000..565316fd
--- /dev/null
+++ b/src/data/Navigation.ts
@@ -0,0 +1,21 @@
+import { NavigationModel } from '@/model/Navigation'
+import NavigationService from '@/services/Navigation'
+import { Home } from 'lucide-vue-next'
+
+const createNavigation = (): void => {
+    NavigationService.addNavigation(createNavigationItem('Home', undefined, '/home', Home))
+}
+
+const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, children?: NavigationModel[]): NavigationModel => {
+    return {
+        title: title,
+        label: label,
+        href: href,
+        icon: icon,
+        children: children
+    }
+}
+
+export {
+    createNavigation
+}
diff --git a/src/data/index.ts b/src/data/index.ts
new file mode 100644
index 00000000..56245cb2
--- /dev/null
+++ b/src/data/index.ts
@@ -0,0 +1,4 @@
+import { createNavigation } from '@/data/Navigation'
+
+// Import navigation data
+createNavigation()
diff --git a/src/main.ts b/src/main.ts
index ad34f420..2ca1a7c5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,9 @@ import router from '@/router'
 import './style.css'
 import './assets/index.css'
 
+// Import mock data
+import '@/data/index'
+
 const app = createApp(App)
 app.use(router)
 app.mount('#app')
diff --git a/src/router/default.ts b/src/router/default.ts
index 5bbdf76b..44c374e8 100644
--- a/src/router/default.ts
+++ b/src/router/default.ts
@@ -1,10 +1,19 @@
 import { Router } from 'vue-router'
+import LayoutContainer from '@/views/layouts/base/LayoutContainer.vue'
 
 const createDefaultRouter = (router: Router): void => {
     router.addRoute({
         path: '/',
         name: 'home',
-        redirect: '/auth/signup'
+        redirect: '/home',
+        component: LayoutContainer,
+        children: [
+            {
+                name: 'home',
+                path: 'home',
+                component: () => import('@/views/pages/home/HomeIndex.vue')
+            }
+        ]
     })
     createHttpRouter(router)
     createUserRouter(router)
diff --git a/src/services/Navigation.ts b/src/services/Navigation.ts
index 546e7ece..c103b8df 100644
--- a/src/services/Navigation.ts
+++ b/src/services/Navigation.ts
@@ -2,11 +2,17 @@ import { NavigationModel } from '@/model/Navigation'
 
 class NavigationService
 {
-    getNavigation(): NavigationModel[]
+    private navigations: NavigationModel[] = []
+
+    addNavigation(navigation: NavigationModel): void
     {
-        return []
+        this.navigations.push(navigation)
     }
 
+    getNavigation(): NavigationModel[]
+    {
+        return this.navigations
+    }
 }
 
 export default new NavigationService()
diff --git a/src/views/layouts/base/LayoutContainer.vue b/src/views/layouts/base/LayoutContainer.vue
new file mode 100644
index 00000000..b362f890
--- /dev/null
+++ b/src/views/layouts/base/LayoutContainer.vue
@@ -0,0 +1,29 @@
+<template>
+  <LayoutSidebar @changeCollapsed="isCollapsed = $event"/>
+  <div :class="cn(`overflow-auto space-y-2 p-2 ${isCollapsed ? 'md:ml-14' : 'md:ml-64'}`)">
+    <RouterView/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LayoutSidebar from '@/views/layouts/base/components/LayoutSidebar.vue'
+import { cn } from '@/lib/utils'
+
+export default defineComponent({
+  name: 'LayoutContainer',
+  components: {LayoutSidebar},
+  setup()
+  {
+    return {
+      cn
+    }
+  },
+  data()
+  {
+    return {
+      isCollapsed: false
+    }
+  }
+})
+</script>
diff --git a/src/views/layouts/base/components/LayoutSidebar.vue b/src/views/layouts/base/components/LayoutSidebar.vue
index de353781..54f23d0a 100644
--- a/src/views/layouts/base/components/LayoutSidebar.vue
+++ b/src/views/layouts/base/components/LayoutSidebar.vue
@@ -62,6 +62,7 @@ export default defineComponent({
     setIsCollapsed(opened: boolean)
     {
       this.isCollapsed = opened
+      this.$emit('changeCollapsed', opened)
     }
   }
 })
diff --git a/src/views/pages/home/HomeIndex.vue b/src/views/pages/home/HomeIndex.vue
new file mode 100644
index 00000000..1ed67e6a
--- /dev/null
+++ b/src/views/pages/home/HomeIndex.vue
@@ -0,0 +1,14 @@
+<template>
+  <Button class="w-full">Test Button</Button>
+  <Button class="w-full">Test Button 2</Button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Button } from '@/components/ui/button'
+
+export default defineComponent({
+  name: 'HomeIndex',
+  components: {Button}
+})
+</script>

From 2b8517afab75debfbfa71b65b7fc8b1c3402b763 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 22 Mar 2024 22:48:30 +0800
Subject: [PATCH 2/5] [Page] [Layout] Add header

---
 src/views/layouts/base/LayoutContainer.vue       | 10 +++++++---
 .../layouts/base/components/LayoutHeader.vue     | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/views/layouts/base/components/LayoutHeader.vue

diff --git a/src/views/layouts/base/LayoutContainer.vue b/src/views/layouts/base/LayoutContainer.vue
index b362f890..a52e0e2e 100644
--- a/src/views/layouts/base/LayoutContainer.vue
+++ b/src/views/layouts/base/LayoutContainer.vue
@@ -1,7 +1,10 @@
 <template>
   <LayoutSidebar @changeCollapsed="isCollapsed = $event"/>
-  <div :class="cn(`overflow-auto space-y-2 p-2 ${isCollapsed ? 'md:ml-14' : 'md:ml-64'}`)">
-    <RouterView/>
+  <div :class="cn(`overflow-auto ${isCollapsed ? 'md:ml-14' : 'md:ml-64'}`)">
+    <LayoutHeader/>
+    <div class="p-2 space-y-2">
+      <RouterView/>
+    </div>
   </div>
 </template>
 
@@ -9,10 +12,11 @@
 import { defineComponent } from 'vue'
 import LayoutSidebar from '@/views/layouts/base/components/LayoutSidebar.vue'
 import { cn } from '@/lib/utils'
+import LayoutHeader from '@/views/layouts/base/components/LayoutHeader.vue'
 
 export default defineComponent({
   name: 'LayoutContainer',
-  components: {LayoutSidebar},
+  components: {LayoutHeader, LayoutSidebar},
   setup()
   {
     return {
diff --git a/src/views/layouts/base/components/LayoutHeader.vue b/src/views/layouts/base/components/LayoutHeader.vue
new file mode 100644
index 00000000..4bccc975
--- /dev/null
+++ b/src/views/layouts/base/components/LayoutHeader.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex h-[var(--header-height)] flex-none items-center gap-4 bg-background p-4 md:px-8 border-b">
+    I'm LayoutHeader
+  </div>
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Button } from '@/components/ui/button'
+
+export default defineComponent({
+  name: 'LayoutHeader',
+  components: {Button}
+})
+</script>
\ No newline at end of file

From cb36b4c31279fdc6946e457bd62ad875094edd7f Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 22 Mar 2024 22:56:43 +0800
Subject: [PATCH 3/5] [Page] [Layout] Fixed router link

---
 .../components/NavigationClosed.vue           | 14 ++++++----
 .../components/NavigationOpened.vue           | 28 ++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/views/layouts/base/components/components/NavigationClosed.vue b/src/views/layouts/base/components/components/NavigationClosed.vue
index ab97b0f6..3bb89f24 100644
--- a/src/views/layouts/base/components/components/NavigationClosed.vue
+++ b/src/views/layouts/base/components/components/NavigationClosed.vue
@@ -1,10 +1,12 @@
 <template>
-  <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2" :href="navigator?.href"
-          :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
-    <component :is="navigator?.icon"/>
-    <div class="ml-2">{{ navigator?.title }}</div>
-    <div v-if="navigator?.label" class="ml-2 rounded-lg bg-primary px-2 mt-0.5 text-[0.625rem] text-primary-foreground">{{ navigator?.label }}</div>
-  </Button>
+  <RouterLink :to="navigator?.href">
+    <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
+            :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
+      <component :is="navigator?.icon"/>
+      <div class="ml-2">{{ navigator?.title }}</div>
+      <div v-if="navigator?.label" class="ml-2 rounded-lg bg-primary px-2 mt-0.5 text-[0.625rem] text-primary-foreground">{{ navigator?.label }}</div>
+    </Button>
+  </RouterLink>
 </template>
 
 <script lang="ts">
diff --git a/src/views/layouts/base/components/components/NavigationOpened.vue b/src/views/layouts/base/components/components/NavigationOpened.vue
index ae124fbd..d64035ba 100644
--- a/src/views/layouts/base/components/components/NavigationOpened.vue
+++ b/src/views/layouts/base/components/components/NavigationOpened.vue
@@ -1,17 +1,19 @@
 <template>
-  <TooltipProvider>
-    <Tooltip :delay-duration="0">
-      <TooltipTrigger asChild>
-        <Button as="a" size="icon" class="h-12 w-12" :href="navigator?.href" :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
-          <component :is="navigator?.icon"/>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="right" class="flex items-center gap-4">
-        {{ navigator?.title }}
-        <span v-if="navigator?.label" class="ml-auto text-muted-foreground">{{ navigator?.label }}</span>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
+  <RouterLink :to="navigator?.href">
+    <TooltipProvider>
+      <Tooltip :delay-duration="0">
+        <TooltipTrigger asChild>
+          <Button as="a" size="icon" class="h-12 w-12" :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
+            <component :is="navigator?.icon"/>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="right" class="flex items-center gap-4">
+          {{ navigator?.title }}
+          <span v-if="navigator?.label" class="ml-auto text-muted-foreground">{{ navigator?.label }}</span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </RouterLink>
 </template>
 
 <script lang="ts">

From 4bcfa8ee68627828f5ecd7c4926ff63b3be4e627 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 22 Mar 2024 23:26:07 +0800
Subject: [PATCH 4/5] [Page] [Layout] Support navigator position bottom

---
 src/data/Navigation.ts                                | 11 +++++++----
 src/model/Navigation.ts                               |  9 ++++++++-
 .../base/components/components/NavigationClosed.vue   | 10 ++++++++--
 .../base/components/components/NavigationOpened.vue   | 10 ++++++++--
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
index 565316fd..2196863c 100644
--- a/src/data/Navigation.ts
+++ b/src/data/Navigation.ts
@@ -1,17 +1,20 @@
-import { NavigationModel } from '@/model/Navigation'
+import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
-import { Home } from 'lucide-vue-next'
+import { Home, LogIn, LogOut } from 'lucide-vue-next'
 
 const createNavigation = (): void => {
-    NavigationService.addNavigation(createNavigationItem('Home', undefined, '/home', Home))
+    NavigationService.addNavigation(createNavigationItem('Home', undefined, '/home', Home, NavigationPosition.TOP))
+    NavigationService.addNavigation(createNavigationItem('Sign In', undefined, '/auth/signin', LogIn, NavigationPosition.TOP))
+    NavigationService.addNavigation(createNavigationItem('Sign Up', undefined, '/auth/signup', LogOut, NavigationPosition.BOTTOM))
 }
 
-const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, children?: NavigationModel[]): NavigationModel => {
+const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, position?: NavigationPosition, children?: NavigationModel[]): NavigationModel => {
     return {
         title: title,
         label: label,
         href: href,
         icon: icon,
+        position: position,
         children: children
     }
 }
diff --git a/src/model/Navigation.ts b/src/model/Navigation.ts
index b90f2653..12580211 100644
--- a/src/model/Navigation.ts
+++ b/src/model/Navigation.ts
@@ -4,5 +4,12 @@ export interface NavigationModel
     label?: string
     href?: string
     icon?: any
+    position?: NavigationPosition
     children?: NavigationModel[]
-}
\ No newline at end of file
+}
+
+export enum NavigationPosition
+{
+    TOP,
+    BOTTOM
+}
diff --git a/src/views/layouts/base/components/components/NavigationClosed.vue b/src/views/layouts/base/components/components/NavigationClosed.vue
index 3bb89f24..5f9c9684 100644
--- a/src/views/layouts/base/components/components/NavigationClosed.vue
+++ b/src/views/layouts/base/components/components/NavigationClosed.vue
@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="navigator?.href">
+  <RouterLink :to="navigator?.href" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
     <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
             :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
       <component :is="navigator?.icon"/>
@@ -12,10 +12,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { Button } from '@/components/ui/button'
-import { NavigationModel } from '@/model/Navigation'
+import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 
 export default defineComponent({
   name: 'NavigationClosed',
+  computed: {
+    NavigationPosition()
+    {
+      return NavigationPosition
+    }
+  },
   components: {Button},
   props: {
     navigator: {
diff --git a/src/views/layouts/base/components/components/NavigationOpened.vue b/src/views/layouts/base/components/components/NavigationOpened.vue
index d64035ba..1d52f1c2 100644
--- a/src/views/layouts/base/components/components/NavigationOpened.vue
+++ b/src/views/layouts/base/components/components/NavigationOpened.vue
@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="navigator?.href">
+  <RouterLink :to="navigator?.href" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
     <TooltipProvider>
       <Tooltip :delay-duration="0">
         <TooltipTrigger asChild>
@@ -20,11 +20,17 @@
 import { defineComponent } from 'vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Button } from '@/components/ui/button'
-import { NavigationModel } from '@/model/Navigation'
+import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import { ChevronsLeft } from 'lucide-vue-next'
 
 export default defineComponent({
   name: 'NavigationOpened',
+  computed: {
+    NavigationPosition()
+    {
+      return NavigationPosition
+    }
+  },
   components: {
     ChevronsLeft,
     Button,

From b64aaa472f7c399839a78dcc9b1c911032b5b5ec Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 22 Mar 2024 23:33:41 +0800
Subject: [PATCH 5/5] [Page] [Layout] Fixed case as string

---
 .../layouts/base/components/components/NavigationClosed.vue     | 2 +-
 .../layouts/base/components/components/NavigationOpened.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/layouts/base/components/components/NavigationClosed.vue b/src/views/layouts/base/components/components/NavigationClosed.vue
index 5f9c9684..8e251093 100644
--- a/src/views/layouts/base/components/components/NavigationClosed.vue
+++ b/src/views/layouts/base/components/components/NavigationClosed.vue
@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="navigator?.href" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+  <RouterLink :to="navigator?.href as string" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
     <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
             :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
       <component :is="navigator?.icon"/>
diff --git a/src/views/layouts/base/components/components/NavigationOpened.vue b/src/views/layouts/base/components/components/NavigationOpened.vue
index 1d52f1c2..66801d3e 100644
--- a/src/views/layouts/base/components/components/NavigationOpened.vue
+++ b/src/views/layouts/base/components/components/NavigationOpened.vue
@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="navigator?.href" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+  <RouterLink :to="navigator?.href as string" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
     <TooltipProvider>
       <Tooltip :delay-duration="0">
         <TooltipTrigger asChild>