Merge pull request #24 from ltv/feat/PT-66

feat(frontend)::guitar: Design Left Sidebar layout || JIRA: PT-66

Author: dzunglee

src/components/Navigation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center px-4 py-2 shadow-sm">
+  <div class="flex items-center px-4 py-2 shadow-sm bg-slate-100">
     <div class="mr-auto"><strong>Hi Bieber,</strong> Have a nice day!</div>
     <div class="flex">
       <el-button type="primary" class="rounded-full px-2 ml-2">

src/components/Sidebar/SidebarNav.ts

@@ -4,7 +4,7 @@ const navigation = () => {
   return routes.reduce((prev: any, curr) => {
     const { meta, path, name } = curr
     if (meta.icon) {
-      prev.push({ name, href: path, icon: meta.icon, title: meta.title })
+      prev.push({ name, href: path, icon: meta.icon, color: meta.color, title: meta.title })
     }
     return prev
   }, [])

src/components/Sidebar/index.vue

@@ -1,27 +1,73 @@
 <template>
   <aside
+    @mouseover="hoverLeftBar(true)"
+    @mouseleave="hoverLeftBar(false)"
     aria-labelledby="primary-heading"
-    class="z-20 bg-slate-100 flex-shrink-0 w-64 overflow-y-auto h-full rounded-tr-3xl rounded-br-3xl hidden md:block"
+    class="transition-all duration-300 fixed z-20 bg-white flex-shrink-0 w-15 overflow-y-auto h-full hidden md:block items-center"
+    :class="{ 'w-64': isHover }"
   >
-    <div class="py-4 text-gray-500">
-      <ul class="mt-2">
-        <li class="relative px-6 py-3" v-for="(item, index) in menuItems" :key="index">
-          <span
-            v-if="route.name === item.name"
-            class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
-            aria-hidden="true"
-          ></span>
-          <router-link
-            :class="{ 'text-gray-800': route.name === item.name }"
-            class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800"
-            :to="{ name: item.name }"
-            :title="item.title"
+    <div class="container flex flex-col mx-auto items-stretch">
+      <div class="h-20 flex items-center">
+        <a
+          v-if="isHover"
+          class="flex p-6 block"
+          href="https://argon-dashboard-pro-laravel.creative-tim.com/dashboard"
+        >
+          <img
+            src="https://argon-dashboard-pro-laravel.creative-tim.com/argon/img/brand/blue.png"
+            class="max-h-9 max-w-full align-middle"
+            alt="..."
+          />
+        </a>
+        <div class="ml-auto">
+          <div class="lg:col-span-10 xl:col-span-10 flex">
+            <div class="hidden md:block flex-grow">
+              <div class="flex items-center space-x-2 2xl:space-x-4 text-black px-5">
+                <MenuIcon v-if="isHide" class="cursor-pointer h-6 w-6" @click="isHide = !isHide" />
+                <MenuAlt1Icon
+                  v-if="isHover && !isHide"
+                  class="cursor-pointer h-6 w-6"
+                  @click="isHide = !isHide"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col text-gray-400 px-6 before:block before:mt-6">
+        <ul class="flex flex-col -mx-6">
+          <li
+            class="relative flex flex-row px-5 py-3 h-12"
+            v-for="(item, index) in menuItems"
+            :key="index"
           >
-            <component :is="item.icon" class="h-5 w-5" aria-hidden="true" />
-            <span class="ml-4">{{ item.title }}</span>
-          </router-link>
-        </li>
-      </ul>
+            <span
+              v-if="route.name === item.name"
+              class="absolute flex inset-y-1 left-0 w-0.5 h-5/6 bg-indigo-500 rounded-tr-lg rounded-br-lg"
+              aria-hidden="true"
+            ></span>
+            <router-link
+              class="inline-flex items-center w-full text-sm my-0.5 transition-colors duration-150 hover:text-gray-800"
+              :class="{ 'text-gray-800': route.name === item.name }"
+              :to="{ name: item.name }"
+              :title="item.title"
+            >
+              <div>
+                <component
+                  :is="item.icon"
+                  :class="'h-6 w-6 block ' + item.color"
+                  aria-hidden="true"
+                />
+              </div>
+              <span
+                class="transition-opacity opacity-1 duration-300 ml-4 text-base"
+                :class="{ 'opacity-0': !isHover }"
+                >{{ item.title }}</span
+              >
+            </router-link>
+          </li>
+        </ul>
+      </div>
     </div>
   </aside>
 </template>
@@ -30,35 +76,58 @@
 import { defineComponent, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import navigation from './SidebarNav'
+import { BellIcon, MenuIcon, MenuAlt1Icon } from '@heroicons/vue/outline'
+import { useDashboardStore } from '../../modules/dashboard/store'
 
 interface MenuItem {
   title: string
   icon: any
   path: string
   name: string
+  color: string
 }
 
 export default defineComponent({
   name: 'Sidebar',
+  components: {
+    BellIcon,
+    MenuIcon,
+    MenuAlt1Icon,
+  },
   setup() {
     const route = useRoute()
-    const menuItems = ref<MenuItem[]>(navigation)
+    const store = useDashboardStore()
+    const routeItems = ref<MenuItem[]>(navigation)
+    const menuItems = routeItems.value.sort((a, b) => a.title.localeCompare(b.title))
     const isPagesMenuOpen = ref(false)
     const isSideMenuOpen = ref(false)
+    const isHover = ref<boolean>(true)
+    const isHide = ref<boolean>(false)
+
+    watch(isHide, () => {
+      store.setSideBar(isHide.value)
+    })
+
     const togglePagesMenu = () => {
       isSideMenuOpen.value = !isSideMenuOpen.value
     }
+
     const closeSideMenu = () => {
       isSideMenuOpen.value = false
     }
-    watch(route, () => {
-      console.log(route.name)
-    })
+
+    const hoverLeftBar = (b: boolean) => {
+      if (isHide.value) isHover.value = b
+    }
+
     return {
       isPagesMenuOpen,
+      isHover,
       isSideMenuOpen,
       menuItems,
       route,
+      isHide,
+      hoverLeftBar,
       togglePagesMenu,
       closeSideMenu,
     }

src/layouts/default-layout.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="h-screen overflow-hidden flex bg-white">
+  <div class="h-screen overflow-hidden flex bg-slate-100">
     <sidebar />
-    <div class="flex flex-col flex-1 w-full">
+    <div
+      class="transition-all duration-300 flex flex-col flex-1 w-full"
+      :class="`${isExpanded ? 'ml-14' : 'ml-64'}`"
+    >
       <navigation />
       <router-view v-slot="{ Component }">
         <div class="overflow-auto p-4">
@@ -13,14 +16,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { useDashboardStore } from '../modules/dashboard/store'
 
 export default defineComponent({
   name: 'Layout',
   components: {},
 
   setup() {
-    return {}
+    const store = useDashboardStore()
+    const isExpanded = computed(() => store.isHide)
+    return { isExpanded }
   },
 })
 </script>

src/modules/dashboard/store/actions.ts

@@ -17,8 +17,11 @@ export const useActions = defineStore('dashboard.actions', () => {
     state.welcomeText = value
   }
 
+  const setSideBar = (value:boolean) => state.isHide = value
+
   return {
     showWelcomeText,
     setWelcomeText,
+    setSideBar,
   }
 })

src/modules/dashboard/store/state.ts

@@ -6,6 +6,7 @@ export const useState = defineStore({
   state: (): DashboardState => {
     return {
       welcomeText: 'Welcome to Dashboard! ...',
+      isHide: false,
     }
   },
 })

src/modules/dashboard/store/types.ts

@@ -1,3 +1,4 @@
 export interface DashboardState {
   welcomeText: string
+  isHide?: boolean
 }

src/router/routes.ts

@@ -1,13 +1,15 @@
 import {
-  HomeIcon,
+  ViewBoardsIcon,
   TableIcon,
   ViewGridIcon,
   CreditCardIcon,
-  IdentificationIcon,
-  MenuAlt1Icon,
-  AnnotationIcon,
+  CursorClickIcon,
+  DocumentTextIcon,
+  GlobeAltIcon,
+  BellIcon,
 } from '@heroicons/vue/outline'
 
+
 const NotFound = () => import('modules/pages/views/404.vue')
 const Dashboard = () => import('modules/dashboard/views/index.vue')
 const Table = () => import('modules/table/views/index.vue')
@@ -23,8 +25,9 @@ const routes = [
     component: Dashboard,
     name: 'Dashboard',
     meta: {
-      title: 'Dashboard',
-      icon: HomeIcon,
+      title: 'Dashboards',
+      icon: ViewBoardsIcon,
+      color: 'text-left-bar-gray'
     },
   },
   {
@@ -33,7 +36,8 @@ const routes = [
     name: 'Button',
     meta: {
       title: 'Buttons',
-      icon: MenuAlt1Icon,
+      icon: CursorClickIcon,
+      color: 'text-left-bar-orange'
     },
   },
   {
@@ -42,7 +46,8 @@ const routes = [
     name: 'Notifications',
     meta: {
       title: 'Notifications',
-      icon: AnnotationIcon,
+      icon: BellIcon,
+      color: 'text-left-bar-rose'
     },
   },
   {
@@ -52,6 +57,7 @@ const routes = [
     meta: {
       title: 'Tables',
       icon: TableIcon,
+      color: 'text-left-bar-red'
     },
   },
   {
@@ -61,6 +67,7 @@ const routes = [
     meta: {
       title: 'Grid',
       icon: ViewGridIcon,
+      color: 'text-left-bar-cyan'
     },
   },
   {
@@ -69,7 +76,8 @@ const routes = [
     name: 'Typography',
     meta: {
       title: 'Typography',
-      icon: HomeIcon,
+      icon: DocumentTextIcon,
+      color: 'text-left-bar-yellow'
     },
   },
   {
@@ -79,6 +87,7 @@ const routes = [
     meta: {
       title: 'Cards',
       icon: CreditCardIcon,
+      color: 'text-left-bar-indigo'
     },
   },
   {
@@ -87,7 +96,8 @@ const routes = [
     name: 'Icons',
     meta: {
       title: 'Icons',
-      icon: IdentificationIcon,
+      icon: GlobeAltIcon,
+      color: 'text-left-bar-red'
     },
   },
   {

tailwind.config.js

@@ -3,7 +3,17 @@ module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      width: {
+        '15': '3.75rem',
+      },
       colors: {
+        'left-bar-yellow': '#ffd600',
+        'left-bar-indigo': '#5e72e4',
+        'left-bar-gray': '#939cac',
+        'left-bar-red': '#f5365c',
+        'left-bar-orange': '#fb6340',
+        'left-bar-cyan': '#22d1f0',
+        'left-bar-rose': '#f4645f',
         primary: {
           DEFAULT: 'rgb(50 50 93)',
           100: 'rgb(82 95 127)',