[Page] [Layout] Add content

src/data/Navigation.ts

@@ -0,0 +1,24 @@
+import { NavigationModel, NavigationPosition } from '@/model/Navigation'
+import NavigationService from '@/services/Navigation'
+import { Home, LogIn, LogOut } from 'lucide-vue-next'
+
+const createNavigation = (): void => {
+    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, position?: NavigationPosition, children?: NavigationModel[]): NavigationModel => {
+    return {
+        title: title,
+        label: label,
+        href: href,
+        icon: icon,
+        position: position,
+        children: children
+    }
+}
+
+export {
+    createNavigation
+}

src/data/index.ts

@@ -0,0 +1,4 @@
+import { createNavigation } from '@/data/Navigation'
+
+// Import navigation data
+createNavigation()

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')

src/model/Navigation.ts

@@ -4,5 +4,12 @@ export interface NavigationModel
     label?: string
     href?: string
     icon?: any
+    position?: NavigationPosition
     children?: NavigationModel[]
-}
+}
+
+export enum NavigationPosition
+{
+    TOP,
+    BOTTOM
+}

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)

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()

src/views/layouts/base/LayoutContainer.vue

@@ -0,0 +1,33 @@
+<template>
+  <LayoutSidebar @changeCollapsed="isCollapsed = $event"/>
+  <div :class="cn(`overflow-auto ${isCollapsed ? 'md:ml-14' : 'md:ml-64'}`)">
+    <LayoutHeader/>
+    <div class="p-2 space-y-2">
+      <RouterView/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+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: {LayoutHeader, LayoutSidebar},
+  setup()
+  {
+    return {
+      cn
+    }
+  },
+  data()
+  {
+    return {
+      isCollapsed: false
+    }
+  }
+})
+</script>

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>

src/views/layouts/base/components/LayoutSidebar.vue

@@ -62,6 +62,7 @@ export default defineComponent({
     setIsCollapsed(opened: boolean)
     {
       this.isCollapsed = opened
+      this.$emit('changeCollapsed', opened)
     }
   }
 })

src/views/layouts/base/components/components/NavigationClosed.vue

@@ -1,19 +1,27 @@
 <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 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"/>
+      <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">
 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: {

src/views/layouts/base/components/components/NavigationOpened.vue

@@ -1,28 +1,36 @@
 <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 as string" :class="`${navigator?.position === NavigationPosition.BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+    <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">
 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,

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>