feat(breadcrumb): Design layout for breadcrumb | JIRA: PT-91

ltv · May 26, 2022 · 73bdebc · 73bdebc
1 parent c60d6a2
commit 73bdebc
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 14 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -0,0 +1,27 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    Main: typeof import('./src/components/Main/index.vue')['default']
+    Navigation: typeof import('./src/components/Navigation/index.vue')['default']
+    Sidebar: typeof import('./src/components/Sidebar/index.vue')['default']
+  }
+}
+
+export { }
diff --git a/src/components/Navigation/index.vue b/src/components/Navigation/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex items-center mx-0 p-4 shadow-sm bg-indigo-500 h-24">
+  <div
+    class="flex items-center mx-0 p-4 shadow-sm bg-indigo-500 h-24 border border-indigo-500 border-b-slate-50/10"
+  >
     <div class="w-full items-center justify-between px-3">
       <div class="w-full flex basis-auto md:grow items-center">
         <div

diff --git a/src/layouts/default-layout.vue b/src/layouts/default-layout.vue
@@ -2,12 +2,65 @@
   <div class="h-screen overflow-hidden flex bg-slate-100 w-full">
     <sidebar />
     <div
-      class="main-content flex flex-col flex-1 w-full"
+      class="main-content flex flex-col flex-1 w-full overflow-auto"
       :class="`${!isPin ? 'ml-14' : 'ml-64 cursor-pointer lg:cursor-default'}`"
     >
       <navigation />
+      <div class="w-full h-14 relative bg-indigo-500">
+        <div class="flex items-center p-4 pt-6">
+          <div class="w-full flex flex-wrap flex-row px-3">
+            <div class="flex w-1/2">
+              <div class="text-white text-xl font-semibold inline-block mb-0">Typography</div>
+              <div class="inline-block md:ml-6 hidden lg:block pt-1">
+                <el-breadcrumb separator="-" class="flex items-center justify-center">
+                  <el-breadcrumb-item :to="{ path: '/' }">
+                    <div class="inline-block items-center">
+                      <el-icon
+                        :size="22"
+                        class="cursor-pointer w-5 h-5 text-slate-50 hover:text-slate-300"
+                      >
+                        <HomeFilled />
+                      </el-icon>
+                    </div>
+                  </el-breadcrumb-item>
+                  <el-breadcrumb-item>
+                    <div class="inline-block items-center">
+                      <div>
+                        <el-link
+                          :underline="false"
+                          href="/"
+                          class="text-sm text-slate-50 hover:text-white font-semibold"
+                        >
+                          Components
+                        </el-link>
+                      </div>
+                    </div>
+                  </el-breadcrumb-item>
+                  <el-breadcrumb-item>
+                    <div class="inline-block items-center">
+                      <div class="text-sm text-slate-200 font-semibold">Typography</div>
+                    </div>
+                  </el-breadcrumb-item>
+                </el-breadcrumb>
+              </div>
+            </div>
+            <div class="w-1/2 text-right">
+              <el-button
+                size="small"
+                class="shadow-sm text-indigo-500 border-none hover:text-black hover:bg-white"
+                >New</el-button
+              >
+              <el-button
+                size="small"
+                class="shadow-sm text-indigo-500 border-none hover:text-black hover:bg-white"
+                >Filters</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
       <router-view v-slot="{ Component }">
-        <div class="overflow-auto p-4">
+        <div class="h-22 bg-indigo-500 px-2.5">
           <component :is="Component" />
         </div>
       </router-view>
@@ -16,15 +69,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref, watch } from 'vue'
 import { useDashboardStore } from '../modules/dashboard/store'
-
+import { HomeFilled } from '@element-plus/icons-vue'
+import navigation from '../components/Sidebar/SidebarNav'
+interface component {
+  title: string
+  path: string
+  name: string
+}
 export default defineComponent({
   name: 'Layout',
-  components: {},
+  components: {
+    HomeFilled,
+  },
 
   setup() {
     const store = useDashboardStore()
+    const currentComponent = ref<component[]>(navigation)
+    watch(navigation, () => {
+      console.log('current:::', navigation)
+    })
     const isPin = computed<boolean>(() => store.isPin)
     const setIsPin = (b: boolean) => store.setSideBar(b)
     return { isPin, setIsPin }

diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -29,7 +29,11 @@ const routes = [
     meta: {
       title: 'Dashboard',
       icon: HomeIcon,
-      color: 'text-left-bar-indigo'
+      color: 'text-left-bar-indigo',
+      breadcrumb: {
+        path: '/',
+        title: 'Dashboard'
+      }
     },
   },
   {
@@ -39,7 +43,11 @@ const routes = [
     meta: {
       title: 'Buttons',
       icon: CursorClickIcon,
-      color: 'text-left-bar-rose'
+      color: 'text-left-bar-rose',
+      breadcrumb: {
+        path: '/Components/buttons',
+        title: 'Buttons'
+      }
     },
   },
   {
@@ -49,7 +57,11 @@ const routes = [
     meta: {
       title: 'Notifications',
       icon: BellIcon,
-      color: 'text-left-bar-green'
+      color: 'text-left-bar-green',
+      breadcrumb: {
+        path: '/Components/notifications',
+        title: 'Notifications'
+      } 
     },
   },
   {
@@ -59,7 +71,11 @@ const routes = [
     meta: {
       title: 'Tables',
       icon: ViewBoardsIcon,
-      color: 'text-left-bar-indigo'
+      color: 'text-left-bar-indigo',
+      breadcrumb: {
+        path: '/Components/tables',
+        title: 'Tables'
+      } 
     },
   },
   {
@@ -69,7 +85,11 @@ const routes = [
     meta: {
       title: 'Grid',
       icon: ViewGridIcon,
-      color: 'text-left-bar-cyan'
+      color: 'text-left-bar-cyan',
+      breadcrumb: {
+        path: '/Components/grid',
+        title: 'Grid'
+      } 
     },
   },
   {
@@ -79,7 +99,11 @@ const routes = [
     meta: {
       title: 'Typography',
       icon: DocumentTextIcon,
-      color: 'text-left-bar-yellow'
+      color: 'text-left-bar-yellow',
+      breadcrumb: {
+        path: '/Components/typography',
+        title: 'Typography'
+      } 
     },
   },
   {
@@ -89,7 +113,11 @@ const routes = [
     meta: {
       title: 'Cards',
       icon: CreditCardIcon,
-      color: 'text-left-bar-orange'
+      color: 'text-left-bar-orange',
+      breadcrumb: {
+        path: '/Components/cards',
+        title: 'Cards'
+      } 
     },
   },
   {
@@ -99,7 +127,11 @@ const routes = [
     meta: {
       title: 'Icons',
       icon: StarIcon,
-      color: 'text-left-bar-red'
+      color: 'text-left-bar-red',
+      breadcrumb: {
+        path: '/Components/icons',
+        title: 'Icons'
+      } 
     },
   },
   {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,6 +24,10 @@ module.exports = {
       height: {
         13: '3.275rem',
         15: '3.75rem',
+        17: '4.25rem',
+        18: '4.5rem',
+        21: '5.25rem',
+        22: '5.5rem',
       },
       colors: {
         'left-bar-yellow': '#ffd600',