[Page] [Layout] Support navigator position bottom

devlive-community · Mar 22, 2024 · 4bcfa8e · 4bcfa8e
1 parent cb36b4c
commit 4bcfa8e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git 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
@@ -4,5 +4,12 @@ export interface NavigationModel
     label?: string
     href?: string
     icon?: any
+    position?: NavigationPosition
     children?: NavigationModel[]
-}
+}
+
+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
@@ -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
@@ -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,