Skip to content

Commit 2b3d55a

Browse files
dzungleedzunglee
authored
Merge pull request #17 from ltv/feat/add-sidebar-navigation
feat(sidebar): add sidebar and navigation
2 parents 77ee088 + 726da4c commit 2b3d55a

File tree

12 files changed

+535
-277
lines changed

12 files changed

+535
-277
lines changed

‎src/assets/css/el-button.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,38 @@ body {
1313
--el-button-border-color: var(--button-border-color) !important;
1414
--el-button-hover-border-color: var(--button-hover-border-color) !important;
1515
--el-button-active-border-color: var(--button-active-border-color) !important;
16-
16+
background-color: var(--el-button-bg-color, var(--el-color-white));
1717
@apply hover:pt-1.5 hover:shadow-sm active:bg-[#6cffff];
18-
1918
}
2019

2120
@each $type in $types {
2221
.el-button--#{$type} {
2322
@if $type == 'primary' {
2423
background-color: var(--button-bg-color-#{$type}) !important;
2524
}
26-
--el-button-bg-color: var(--button-bg-color-#{$type}) !important;
27-
--el-button-hover-bg-color: var(--button-hover-bg-color-#{$type}) !important;
28-
--el-button-active-bg-color: var(--button-active-bg-color-#{$type}) !important;
25+
--el-button-bg-color: var(--button-bg-color-#{$type}) !important;
26+
--el-button-hover-bg-color: var(--button-hover-bg-color-#{$type}) !important;
27+
--el-button-active-bg-color: var(--button-active-bg-color-#{$type}) !important;
2928

30-
--el-button-border-color: var(--button-border-color-#{$type}) !important;
31-
--el-button-hover-border-color: var(--button-hover-border-color-#{$type}) !important;
32-
--el-button-active-border-color: var(--button-active-border-color-#{$type}) !important;
29+
--el-button-border-color: var(--button-border-color-#{$type}) !important;
30+
--el-button-hover-border-color: var(--button-hover-border-color-#{$type}) !important;
31+
--el-button-active-border-color: var(--button-active-border-color-#{$type}) !important;
3332

34-
--el-button-text-color: var(--button-text-color-#{$type});
35-
--el-button-hover-text-color: var(--button-hover-text-color-#{$type}) !important;
36-
--el-button-active-text-color: var(--button-active-text-color-#{$type}) !important;
33+
--el-button-text-color: var(--button-text-color-#{$type});
34+
--el-button-hover-text-color: var(--button-hover-text-color-#{$type}) !important;
35+
--el-button-active-text-color: var(--button-active-text-color-#{$type}) !important;
36+
37+
@if $type == 'secondary' {
38+
@apply shadow-lg;
39+
}
3740

38-
@if $type == 'secondary' {
39-
@apply shadow-lg;
40-
}
41-
42-
&:hover, &:focus {
43-
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
44-
background: var(--button-hover-bg-color-#{$type});
45-
}
41+
&:hover,
42+
&:focus {
43+
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
44+
background: var(--button-hover-bg-color-#{$type});
45+
}
4646
}
47-
.el-button--#{$type}:active,
47+
.el-button--#{$type}:active,
4848
.el-button--#{$type}.el-button--large:active,
4949
.el-button--#{$type}.el-button--small:active {
5050
filter: drop-shadow(0 0 #0000);
@@ -56,7 +56,7 @@ body {
5656

5757
.el-button.el-button--#{$type}.is-plain {
5858
background: none !important;
59-
59+
6060
--el-button-hover-bg-color: var(--button-hover-bg-color-#{$type}) !important;
6161
--el-button-active-bg-color: var(--button-active-bg-color-#{$type}) !important;
6262

@@ -67,7 +67,7 @@ body {
6767
--el-button-text-color: var(--button-text-color-#{$type});
6868
--el-button-hover-text-color: var(--button-hover-text-color-#{$type}) !important;
6969
--el-button-active-text-color: var(--button-active-text-color-#{$type}) !important;
70-
70+
7171
&:active {
7272
filter: drop-shadow(0 0 #0000) !important;
7373
background: var(--button-active-bg-color-#{$type}) !important;
@@ -77,11 +77,11 @@ body {
7777
@apply shadow-none border-slate-100;
7878
}
7979

80-
&:hover, &:focus {
80+
&:hover,
81+
&:focus {
8182
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
8283
background: var(--button-hover-bg-color-#{$type}) !important;
8384
}
84-
8585
}
8686
}
8787
}

‎src/components/Main/index.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<template>
2-
<div class="p-6 h-full">
3-
<div class="block rounded h-full w-full">
4-
<slot></slot>
5-
</div>
6-
</div>
2+
<slot></slot>
73
</template>
84

95
<script lang="ts">

‎src/components/Navigation/index.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="flex items-center px-4 py-2">
3+
<div class="mr-auto"><strong>Hi Bieber,</strong> Have a nice day!</div>
4+
<div class="flex">
5+
<el-input placeholder="Please Input" :prefix-icon="Search" />
6+
<el-button type="primary" class="rounded-full px-2 ml-2">
7+
<el-icon class="mr-1"><BellFilled /></el-icon>15
8+
</el-button>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script lang="ts">
14+
import { defineComponent, ref } from 'vue'
15+
import { Search, BellFilled } from '@element-plus/icons-vue'
16+
17+
export default defineComponent({
18+
name: 'Sidebar',
19+
components: { Search, BellFilled },
20+
setup() {
21+
const isPagesMenuOpen = ref(false)
22+
const isSideMenuOpen = ref(false)
23+
const togglePagesMenu = () => {
24+
isSideMenuOpen.value = !isSideMenuOpen.value
25+
}
26+
const closeSideMenu = () => {
27+
isSideMenuOpen.value = false
28+
}
29+
return {
30+
isPagesMenuOpen,
31+
isSideMenuOpen,
32+
Search,
33+
BellFilled,
34+
togglePagesMenu,
35+
closeSideMenu,
36+
}
37+
},
38+
})
39+
</script>

‎src/components/Sidebar/SidebarNav.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import routes from 'router/routes'
2+
3+
const navigation = () => {
4+
return routes.reduce((prev: any, curr) => {
5+
const { meta, path, name } = curr
6+
if (meta.icon) {
7+
prev.push({ name, href: path, icon: meta.icon, title: meta.title })
8+
}
9+
return prev
10+
}, [])
11+
}
12+
13+
export default navigation()

‎src/components/Sidebar/index.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<aside
3+
aria-labelledby="primary-heading"
4+
class="z-20 bg-gray-100 flex-shrink-0 w-64 overflow-y-auto h-full rounded-tr-3xl rounded-br-3xl hidden lg:block"
5+
>
6+
<div class="py-4 text-gray-500">
7+
<ul class="mt-2">
8+
<li class="relative px-6 py-3" v-for="(item, index) in menuItems" :key="index">
9+
<span
10+
v-if="route.name === item.name"
11+
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
12+
aria-hidden="true"
13+
></span>
14+
<router-link
15+
:class="{ 'text-gray-800': route.name === item.name }"
16+
class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800"
17+
:to="{ name: item.name }"
18+
:title="item.title"
19+
>
20+
<component :is="item.icon" class="h-5 w-5" aria-hidden="true" />
21+
<span class="ml-4">{{ item.title }}</span>
22+
</router-link>
23+
</li>
24+
</ul>
25+
</div>
26+
</aside>
27+
<div
28+
v-if="isSideMenuOpen"
29+
x-transition:enter="transition ease-in-out duration-150"
30+
x-transition:enter-start="opacity-0"
31+
x-transition:enter-end="opacity-100"
32+
x-transition:leave="transition ease-in-out duration-150"
33+
x-transition:leave-start="opacity-100"
34+
x-transition:leave-end="opacity-0"
35+
class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
36+
></div>
37+
</template>
38+
39+
<script lang="ts">
40+
import { defineComponent, ref, watch } from 'vue'
41+
import { useRoute } from 'vue-router'
42+
import navigation from './SidebarNav'
43+
44+
interface MenuItem {
45+
title: string
46+
icon: any
47+
path: string
48+
name: string
49+
}
50+
51+
export default defineComponent({
52+
name: 'Sidebar',
53+
setup() {
54+
const route = useRoute()
55+
const menuItems = ref<MenuItem[]>(navigation)
56+
const isPagesMenuOpen = ref(false)
57+
const isSideMenuOpen = ref(false)
58+
const togglePagesMenu = () => {
59+
isSideMenuOpen.value = !isSideMenuOpen.value
60+
}
61+
const closeSideMenu = () => {
62+
isSideMenuOpen.value = false
63+
}
64+
watch(route, () => {
65+
console.log(route.name)
66+
})
67+
return {
68+
isPagesMenuOpen,
69+
isSideMenuOpen,
70+
menuItems,
71+
route,
72+
togglePagesMenu,
73+
closeSideMenu,
74+
}
75+
},
76+
})
77+
</script>

‎src/components/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import 'assets/css/index.scss'
22
import { App } from 'vue'
33
import { useElementPlus } from './element-plus'
44
import Main from './Main/index.vue'
5+
import Sidebar from './Sidebar/index.vue'
6+
import Navigation from './Navigation/index.vue'
57

68
export default {
79
install: (app: App) => {
810
// Register it globally
911
app.component('Main', Main)
12+
app.component('Sidebar', Sidebar)
13+
app.component('Navigation', Navigation)
1014

1115
// Element Plus
1216
useElementPlus(app)

‎src/layouts/default-layout.vue

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
<template>
2-
<div class="h-screen overflow-auto flex bg-white">
3-
<div class="flex-1 min-w-0 flex flex-col ">
4-
<main class="flex-1 flex ">
5-
<div class="flex-1 flex w-full">
6-
<section
7-
aria-labelledby="primary-heading"
8-
class="min-w-0 flex-1 h-full flex flex-col"
9-
>
10-
<router-view v-slot="{ Component }">
11-
<component :is="Component" />
12-
</router-view>
13-
</section>
2+
<div class="h-screen overflow-hidden flex bg-gray-200">
3+
<sidebar />
4+
<div class="flex flex-col flex-1 w-full">
5+
<navigation />
6+
<router-view v-slot="{ Component }">
7+
<div class="overflow-auto p-4">
8+
<component :is="Component" />
149
</div>
15-
</main>
10+
</router-view>
1611
</div>
1712
</div>
1813
</template>

0 commit comments

Comments
 (0)