Skip to content

Commit

Permalink
Merge pull request #36 from ltv/fix/PT-16
Browse files Browse the repository at this point in the history 
fix(topnav): layout and style for dropdown | JIRA: PT-16
  • Loading branch information
@dzunglee
dzunglee authored May 27, 2022
2 parents 0dfabb9 + 2123ea7 commit fc708c8
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 103 deletions.
127 changes: 71 additions & 56 deletions src/components/Navigation/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div
class="flex items-center mx-0 py-4 px-2.5 md:px-8 shadow-sm bg-indigo-500 h-20 border border-indigo-500 border-b-slate-50/10"
class="flex items-center mx-0 py-4 px-2.5 md:px-7 shadow-sm bg-indigo-500 h-20 border border-indigo-500 border-b-slate-50/10"
>
<div class="w-full items-center justify-between">
<div class="w-full flex basis-auto items-center">
<div
class="transition-all duration-300 w-full sm:w-auto mr-auto sm:mr-4 sm:transform-none sm:block"
:class="{ '-translate-x-3/2 hidden': isSearchOpen }"
>
<div class="relative flex-grow h-12 w-full">
<div class="relative flex-grow h-11.5 w-full">
<div class="z-10 absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<SearchIcon class="h-5 w-4 text-gray-800" aria-hidden="true" />
</div>
Expand Down Expand Up @@ -54,22 +54,28 @@
</div>
</div>
<div class="relative inline-block pt-1">
<el-dropdown placement="bottom-end" trigger="click" popper-class="notification-popper">
<el-dropdown
placement="bottom-end"
trigger="click"
popper-class="notification-popper"
@visible-change="clickIconBell = !clickIconBell"
>
<div class="el-dropdown-link">
<el-icon
:size="22"
class="cursor-pointer w-5 h-5 text-slate-50 hover:text-slate-300 focus:text-slate-300"
:size="20"
class="cursor-pointer w-5 h-5 text-slate-50 hover:text-slate-300"
:class="{ 'text-slate-300': clickIconBell }"
>
<BellFilled />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="m-0 hover:bg-white">
<div class="flex items-center w-full py-3 cursor-default">
<h6 class="text-sm lg:text-base text-slate-400 font-semibold m-0">
<div class="flex items-center w-full py-2.5 cursor-default">
<span class="text-sm text-slate-400 font-semibold m-0">
You have <strong class="text-primary">13</strong> notifications.
</h6>
</span>
</div>
</el-dropdown-item>
<el-dropdown-item
Expand All @@ -78,7 +84,7 @@
v-for="index in 5"
:key="index"
>
<div class="flex flex-row items-center w-full py-3">
<div class="flex flex-row items-center w-full py-2.75">
<div class="flex w-auto">
<el-avatar :size="48" src="src/assets/images/Jon_Snow.png" />
</div>
Expand All @@ -88,20 +94,20 @@
<h4 class="mb-0">John Snow</h4>
</div>
<div class="text-right">
<span class="text-90 lg:text-sm font-normal text-gray-400"
>2 hrs ago</span
>
<span class="text-90 font-normal text-gray-400">2 hrs ago</span>
</div>
</div>
<p class="mb-0 text-sm leading-relaxed md:text-base">
<p class="mb-0 text-sm leading-relaxed">
Let's meet at Starbucks at 11:30. Wdyt?
</p>
</div>
</div>
</el-dropdown-item>
<el-dropdown-item divided class="m-0">
<div class="flex items-center w-full py-3">
<a href="#!" class="mx-auto text-center text-primary font-bold text-base"
<div class="flex items-center w-full py-2">
<a
href="#!"
class="mx-auto text-center text-primary font-semibold text-medium"
>View all</a
>
</div>
Expand All @@ -111,111 +117,118 @@
</el-dropdown>
</div>
<div class="relative inline-block pt-1">
<el-popover placement="bottom-end" trigger="click" popper-class="menu-popper">
<el-popover
placement="bottom-end"
trigger="click"
popper-class="menu-popper"
@show="clickIconMenu = !clickIconMenu"
@hide="clickIconMenu = !clickIconMenu"
>
<template #reference>
<el-icon
:size="22"
class="cursor-pointer w-5 h-5 text-slate-50 hover:text-slate-300 focus:text-slate-300"
:size="20"
class="cursor-pointer w-5 h-5 text-slate-50 hover:text-slate-300"
:class="{ 'text-slate-300': clickIconMenu }"
>
<Menu />
</el-icon>
</template>
<div class="w-full m-0">
<div class="flex flex-wrap px-2 w-full m-0">
<div class="flex flex-wrap w-full m-0">
<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex h-16 w-16 content-center items-center text-center">
<div class="flex h-13 w-14 content-center items-center text-center">
<div class="mx-auto">
<font-awesome-icon
class="transition-all duration-150 hover:py-5 hover:px-5.5 text-center inline-flex items-center justify-center rounded-full py-4.5 px-5 text-white bg-gradient-to-r from-[#f5365c] to-[#f56036]"
class="transition-all p-[16.5px] hover:px-[18.5px] hover:py-[18px] duration-150 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#f5365c] to-[#f56036]"
:icon="['fas', 'calendar-days']"
size="lg"
/>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Calendar</span>
<span class="text-0.8125 text-white font-semibold mt-2.5">Calendar</span>
</a>

<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex h-16 w-16 content-center items-center text-center">
<div class="flex h-13 w-14 content-center items-center text-center">
<div class="mx-auto">
<font-awesome-icon
class="transition-all duration-150 hover:p-5 text-center inline-flex items-center justify-center rounded-full p-4.5 text-white bg-gradient-to-r from-[#fb6340] to-[#fbb140]"
class="transition-all p-[16.5px] hover:p-[18px] duration-150 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#fb6340] to-[#fbb140]"
:icon="['fas', 'envelope']"
size="lg"
/>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Email</span>
<span class="text-0.8125 text-white font-semibold mt-2.5">Email</span>
</a>

<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex h-16 w-16 content-center items-center text-center">
<div class="flex h-13 w-14 content-center items-center text-center">
<div class="mx-auto">
<font-awesome-icon
class="transition-all duration-150 hover:p-5 text-center inline-flex items-center justify-center rounded-full p-4.5 text-white bg-gradient-to-r from-[#11cdef] to-[#1171ef]"
class="transition-all duration-150 px-[16px] py-[16.5px] hover:p-[18px] text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#11cdef] to-[#1171ef]"
:icon="['fas', 'credit-card']"
size="lg"
/>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Payments</span>
<span class="text-0.8125 text-white font-semibold mt-2.5">Payments</span>
</a>

<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex text-center items-center content-center h-16 w-16">
<div class="flex text-center items-center content-center h-13 w-13">
<div
class="transition-all duration-150 hover:h-15 hover:w-15 h-14 w-14 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
class="transition-all duration-150 hover:h-13 hover:w-13 h-12 w-12 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
>
<el-icon :size="22" class="cursor-pointer w-8 h-6">
<List />
</el-icon>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Reports</span>
<span class="text-0.8125 text-white font-semibold mt-2.5">Reports</span>
</a>

<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex text-center items-center content-center h-16 w-16">
<div class="flex text-center items-center content-center h-13 w-13">
<div
class="transition-all duration-150 hover:h-15 hover:w-15 h-14 w-14 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#8965e0] to-[#bc65e0]"
class="transition-all duration-150 hover:h-13 hover:w-13 h-12 w-12 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#8965e0] to-[#bc65e0]"
>
<el-icon :size="22" class="cursor-pointer w-8 h-6">
<LocationFilled />
</el-icon>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Maps</span>
<span class="text-0.8125 text-white font-semibold mt-3">Maps</span>
</a>

<a
href="#!"
class="flex flex-col w-2/6 py-4 text-center items-center content-center"
class="flex flex-col w-2/6 py-3 text-center items-center content-center"
>
<div class="flex text-center items-center content-center h-16 w-16">
<div class="flex text-center items-center content-center h-13 w-13">
<div
class="transition-all duration-150 hover:h-15 hover:w-15 h-14 w-14 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#ffd600] to-[#beff00]"
class="transition-all duration-150 hover:h-13 hover:w-13 h-12 w-12 mx-auto text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#ffd600] to-[#beff00]"
>
<el-icon :size="22" class="cursor-pointer w-8 h-6">
<GoodsFilled />
</el-icon>
</div>
</div>
<span class="font-0.8125 text-white font-semibold mt-3">Shop</span>
<span class="text-0.8125 text-white font-semibold mt-3">Shop</span>
</a>
</div>
</div>
Expand All @@ -227,7 +240,7 @@
:class="[!isSearchOpen ? 'hidden sm:flex md:flex lg:flex' : '']"
>
<el-dropdown placement="bottom-end" trigger="click" popper-class="profile-popper">
<div class="flex flex-row items-center gap-1 md:gap-1.5">
<div class="flex flex-row items-center gap-1 md:gap-1.5 mb-1">
<div class="pt-1">
<el-link :underline="false">
<el-avatar
Expand All @@ -251,12 +264,12 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="m-0 hover:bg-white">
<div class="flex items-center w-full pt-2 cursor-default">
<div class="flex items-center w-full pt-1 cursor-default">
<h6 class="truncate m-0 text-[#32325d]">WELCOME!</h6>
</div>
</el-dropdown-item>
<el-dropdown-item class="mx-0 my-2 hover:bg-slate-100 text-zinc-800">
<div class="flex flex-row items-center w-full h-8">
<div class="flex flex-row items-center w-full h-6">
<div class="flex w-auto">
<el-icon :size="22" class="cursor-pointer w-5 h-6">
<UserFilled />
Expand All @@ -273,9 +286,9 @@
</el-dropdown-item>

<el-dropdown-item divided class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800">
<div class="flex flex-row items-center w-full h-8">
<div class="flex flex-row items-center w-full h-6">
<div class="flex w-auto">
<el-icon :size="22" class="cursor-pointer w-5 h-6">
<el-icon :size="20" class="cursor-pointer w-5 h-6">
<CircleClose />
</el-icon>
</div>
Expand Down Expand Up @@ -335,7 +348,8 @@ export default defineComponent({
const isPagesMenuOpen = ref(false)
const isSideMenuOpen = ref(false)
const isSearchOpen = ref(true)
const clickIconBell = ref(false)
const clickIconMenu = ref(false)
const textInput = ref('')
const togglePagesMenu = () => {
isSideMenuOpen.value = !isSideMenuOpen.value
Expand All @@ -356,6 +370,8 @@ export default defineComponent({
isSideMenuOpen,
isSearchOpen,
isPin,
clickIconBell,
clickIconMenu,
textInput,
setIsPin,
setSearchOpen,
Expand All @@ -367,24 +383,23 @@ export default defineComponent({
</script>
<style lang="scss">
.menu-popper {
@apply lg:w-96 md:w-96 sm:w-96 w-97/100 border-none bg-[#182c4e] top-4 sm:top-1 #{!important};
@apply lg:w-80 md:w-80 sm:w-80 w-97/100 border-none bg-[#182c4e] top-4 sm:top-1 rounded-lg #{!important};
}
.notification-popper {
@apply lg:w-100 md:w-100 sm:w-100 w-97/100 top-9/100 sm:top-16 #{!important};
@apply lg:w-98 md:w-98 sm:w-98 w-97/100 top-9/100 sm:top-16 rounded-lg #{!important};
}
.notification-popper .el-dropdown-menu {
@apply p-0 rounded-lg #{!important};
@apply p-0 #{!important};
}
.profile-popper {
@apply lg:w-48 md:w-48 sm:w-48 w-97/100 top-9/100 sm:top-18 #{!important};
@apply lg:w-48 md:w-48 sm:w-48 w-97/100 top-9/100 sm:top-18 rounded-lg #{!important};
}
.profile-popper .el-dropdown-menu {
@apply py-2 rounded-lg #{!important};
@apply py-2 #{!important};
}
.el-input {
--el-text-color-placeholder: #4c4c52;
.el-input__inner {
@apply relative transition-all duration-200 text-base w-full sm:w-72 h-12 resize-y leading-6 rounded-full bg-slate-100 pl-10 font-thin shadow-none border-none;
@apply relative transition-all duration-200 placeholder:pl-0.5 placeholder:text-sm placeholder:text-gray-500 text-base w-full sm:w-73.5 h-11.5 resize-y leading-6 rounded-full bg-slate-100 pl-10 font-thin shadow-none border-none;
&:focus {
@apply w-full sm:w-98 bg-white text-black border-indigo-400;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/SidebarNav.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, color: meta.color, title: meta.title, parentPath: meta.breadcrumb.parentPath })
prev.push({ name, href: path, icon: meta.icon, color: meta.color, title: meta.title, parentPath: meta.parentPath })
}
return prev
}, [])
Expand Down
6 changes: 3 additions & 3 deletions src/components/Sidebar/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,18 @@
<div class="lg:col-span-10 xl:col-span-10 flex">
<div class="hidden lg:block flex-grow">
<div class="flex items-center space-x-2 2xl:space-x-4 text-black px-5">
<MenuIcon v-if="!isPin" class="cursor-pointer h-7 w-6" @click="setIsPin(true)" />
<MenuIcon v-if="!isPin" class="cursor-pointer h-6 w-5" @click="setIsPin(true)" />
<MenuAlt1Icon
v-if="isPin"
class="cursor-pointer h-7 w-6"
class="cursor-pointer h-6 w-5"
@click="setIsPin(false)"
/>
</div>
</div>
</div>
</div>
</div>
<div ref="target" class="flex flex-col text-gray-500 px-6 before:block before:mt-2">
<div ref="target" class="flex flex-col text-gray-500 px-6 before:block before:mt-3.5">
<ul class="flex flex-col -mx-6">
<li
class="relative flex flex-row px-5 py-3 h-12"
Expand Down
Loading

0 comments on commit fc708c8

Please sign in to comment.