Merge pull request #26 from qianmoQ/feature-footer

[Navbar] Add default, topbar

package.json

@@ -2,7 +2,7 @@
   "name": "shadcn-ui-vue-admin",
   "description": "Admin Dashboard UI crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind.",
   "private": true,
-  "version": "2024.0.4",
+  "version": "2024.0.5",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build && cp CNAME dist/",

src/data/Navigation.ts

@@ -1,6 +1,6 @@
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
-import { AudioWaveform, Ban, CircleOff, Command, CreditCard, Footprints, FormInput, Gauge, Link, LogIn, LogOut, MessageCircle, StickyNote } from 'lucide-vue-next'
+import { AudioWaveform, Ban, CircleOff, Command, CreditCard, Footprints, FormInput, Gauge, Link, LogIn, LogOut, MessageCircle, Navigation, StickyNote } from 'lucide-vue-next'
 
 const createNavigation = (): void => {
     NavigationService.addNavigation(createNavigationItem('common.common.dashboard', undefined, '/dashboard', Gauge, NavigationPosition.LEFT_TOP))
@@ -78,6 +78,9 @@ const createNavigation = (): void => {
     const footer = createNavigationItem('common.common.footer', footerArray.length.toString(), '/footer', Footprints, NavigationPosition.LEFT_TOP, footerArray)
     NavigationService.addNavigation(footer)
 
+    const navbar = createNavigationItem('common.common.navbar', undefined, '/navbar', Navigation, NavigationPosition.LEFT_TOP)
+    NavigationService.addNavigation(navbar)
+
     const external = createNavigationItem('common.common.externalLink', undefined, 'https://datacap.devlive.org', Link, NavigationPosition.LEFT_TOP)
     external.external = true
     NavigationService.addNavigation(external)

src/i18n/langs/en/Common.ts

@@ -40,6 +40,7 @@ export default {
         footer: 'Footer',
         footerSimple: 'Footer Simple',
         footerModern: 'Footer Modern',
+        navbar: 'Navbar',
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',

src/i18n/langs/zhCn/Common.ts

@@ -40,6 +40,7 @@ export default {
         footer: '页脚',
         footerSimple: '简单页脚',
         footerModern: '现代页脚',
+        navbar: '导航栏',
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',

src/router/default.ts

@@ -12,6 +12,11 @@ const createDefaultRouter = (router: Router): void => {
                 name: 'dashboard',
                 path: 'dashboard',
                 component: () => import('@/views/pages/dashboard/DashboardHome.vue')
+            },
+            {
+                name: 'defaultNavbar',
+                path: 'navbar',
+                component: () => import('@/views/pages/navbar/NavbarHome.vue')
             }
         ]
     })

src/views/components/navbar/Navbar.ts

@@ -0,0 +1,8 @@
+export class Navbar {
+    id?: number | string
+    title?: string
+    link?: string
+    external?: boolean
+    icon?: any
+    children?: Navbar[]
+}

src/views/components/navbar/default/DefaultNavbar.vue

@@ -0,0 +1,42 @@
+<template>
+  <header class="flex shadow-md py-4 px-4 sm:px-10 bg-white font-[sans-serif] min-h-[70px] tracking-wide relative z-50">
+    <div :class="`flex flex-wrap items-center gap-5 w-full ${center ? 'justify-between' : ''}`">
+      <slot name="icon"/>
+
+      <div class="max-lg:hidden lg:!block max-lg:before:fixed max-lg:before:bg-black max-lg:before:opacity-50 max-lg:before:inset-0 max-lg:before:z-50">
+        <ul class="lg:flex gap-x-5 max-lg:space-y-3 max-lg:fixed max-lg:bg-white max-lg:w-1/2 max-lg:min-w-[300px] max-lg:top-0 max-lg:left-0 max-lg:p-6 max-lg:h-full max-lg:shadow-md max-lg:overflow-auto z-50">
+          <li v-for="item in navigators" class="max-lg:border-b border-gray-300 max-lg:py-3 px-3">
+            <IRouterLink :link="item.link" :external="item.external" :target="item.external ? '_blank' : '_self'"
+                         :class="$route.path === `${item?.link}` ? 'lg:hover:text-[#007bff] text-[#007bff]' : 'lg:hover:text-[#007bff] text-gray-500'">
+              {{ item.title }}
+            </IRouterLink>
+          </li>
+        </ul>
+      </div>
+
+      <div class="flex max-lg:ml-auto space-x-3">
+        <slot name="extra"/>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Navbar } from '@/views/components/navbar/Navbar.ts'
+import IRouterLink from '@/views/components/link/IRouterLink.vue'
+
+export default defineComponent({
+  name: 'DefaultNavbar',
+  components: { IRouterLink },
+  props: {
+    navigators: {
+      type: Array as () => Array<Navbar>
+    },
+    center: {
+      type: Boolean,
+      default: true
+    }
+  }
+})
+</script>

src/views/components/navbar/topbar/TopbarNavbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <header class="shadow-md font-sans tracking-wide relative z-50">
+    <section v-if="$slots.section" class="py-2 bg-[#007bff] text-white text-right px-10">
+      <slot name="section"/>
+    </section>
+
+    <div :class="`flex flex-wrap items-center gap-4 px-10 py-4 bg-white min-h-[70px] w-full ${center ? 'justify-between' : ''}`">
+      <slot name="icon"/>
+
+      <div class="max-lg:hidden lg:!block max-lg:before:fixed max-lg:before:bg-black max-lg:before:opacity-50 max-lg:before:inset-0 max-lg:before:z-50">
+        <ul class="lg:flex lg:gap-x-5 max-lg:space-y-3 max-lg:fixed max-lg:bg-white max-lg:w-1/2 max-lg:min-w-[300px] max-lg:top-0 max-lg:left-0 max-lg:p-6 max-lg:h-full max-lg:shadow-md max-lg:overflow-auto z-50">
+          <li v-for="item in navigators" class="max-lg:border-b border-gray-300 max-lg:py-3 px-3">
+            <IRouterLink :class="$route.path === `${item?.link}` ? 'lg:hover:text-[#007bff] text-[#007bff]' : 'lg:hover:text-[#007bff] text-gray-500'" :external="item.external"
+                         :link="item.link"
+                         :target="item.external ? '_blank' : '_self'">
+              {{ item.title }}
+            </IRouterLink>
+          </li>
+        </ul>
+      </div>
+
+      <div class="flex max-lg:ml-auto space-x-3">
+        <slot name="extra"/>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Navbar } from '@/views/components/navbar/Navbar.ts'
+import IRouterLink from '@/views/components/link/IRouterLink.vue'
+
+export default defineComponent({
+  name: 'TopbarNavbar',
+  components: { IRouterLink },
+  props: {
+    navigators: {
+      type: Array as () => Array<Navbar>
+    },
+    center: {
+      type: Boolean,
+      default: true
+    }
+  }
+})
+</script>

src/views/pages/navbar/NavbarHome.vue

@@ -0,0 +1,150 @@
+<template>
+  <ICard body-class="p-2 space-y-2">
+    <template #title>Default</template>
+    <ICard body-class="p-0" title="Full">
+      <DefaultNavbar :navigators="navigators">
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+        <template #extra>
+          <IButton>Login</IButton>
+          <IButton>Sign Up</IButton>
+        </template>
+      </DefaultNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Icon">
+      <DefaultNavbar :navigators="navigators">
+        <template #extra>
+          <IButton>Login</IButton>
+          <IButton>Sign Up</IButton>
+        </template>
+      </DefaultNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Extra">
+      <DefaultNavbar :navigators="navigators">
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+      </DefaultNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Extra & No Center">
+      <DefaultNavbar :navigators="navigators" :center="false">
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+      </DefaultNavbar>
+    </ICard>
+  </ICard>
+  <ICard body-class="p-2 space-y-2">
+    <template #title>Top Bar</template>
+    <ICard body-class="p-0" title="Full">
+      <TopbarNavbar :navigators="navigators">
+        <template #section>
+          <p class="text-sm">
+            <strong class="mx-3">Address:</strong>
+            xxxxx
+            <strong class="mx-3">Contact No:</strong>
+            xxxxx
+          </p>
+        </template>
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+        <template #extra>
+          <IButton>Login</IButton>
+          <IButton>Sign Up</IButton>
+        </template>
+      </TopbarNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Section">
+      <TopbarNavbar :navigators="navigators">
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+        <template #extra>
+          <IButton>Login</IButton>
+          <IButton>Sign Up</IButton>
+        </template>
+      </TopbarNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Icon">
+      <TopbarNavbar :navigators="navigators">
+        <template #section>
+          <p class="text-sm">
+            <strong class="mx-3">Address:</strong>
+            xxxxx
+            <strong class="mx-3">Contact No:</strong>
+            xxxxx
+          </p>
+        </template>
+        <template #extra>
+          <IButton>Login</IButton>
+          <IButton>Sign Up</IButton>
+        </template>
+      </TopbarNavbar>
+    </ICard>
+    <ICard body-class="p-0" title="No Extra & No Center">
+      <TopbarNavbar :navigators="navigators" :center="false">
+        <template #section>
+          <p class="text-sm">
+            <strong class="mx-3">Address:</strong>
+            xxxxx
+            <strong class="mx-3">Contact No:</strong>
+            xxxxx
+          </p>
+        </template>
+        <template #icon>
+          <a href="/">
+            <img src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" alt="logo" class='w-12 h-12'/>
+          </a>
+        </template>
+      </TopbarNavbar>
+    </ICard>
+  </ICard>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ICard from '@/ui/card/card.vue'
+import DefaultNavbar from '@/views/components/navbar/default/DefaultNavbar.vue'
+import IButton from '@/ui/button/button.vue'
+import { Navbar } from '@/views/components/navbar/Navbar.ts'
+import TopbarNavbar from '@/views/components/navbar/topbar/TopbarNavbar.vue'
+
+export default defineComponent({
+  name: 'NavbarHome',
+  components: { TopbarNavbar, IButton, DefaultNavbar, ICard },
+  data()
+  {
+    return {
+      navigators: [
+        {
+          title: 'Navbar',
+          link: '/navbar',
+          external: false
+        },
+        {
+          title: 'Link 2',
+          link: '/',
+          external: false
+        },
+        {
+          title: 'Link 3 (External)',
+          link: 'https://datacap.devlive.org',
+          external: true
+        }
+      ] as Array<Navbar>
+    }
+  }
+})
+</script>