From d735e327b2d3fe5aa571ed878b2718f39279f4eb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 25 Aug 2021 10:36:38 +0700 Subject: [PATCH] :art: styles: menu dropdown common :%s --- pages/index.tsx | 18 +++- .../MenuDropdown/MenuDropdown.module.scss | 91 +++++++++++++++++++ .../common/MenuDropdown/MenuDropdown.tsx | 38 ++++++++ src/components/common/index.ts | 2 + src/components/icons/IconUser.tsx | 11 +++ src/components/icons/index.ts | 1 + 6 files changed, 159 insertions(+), 2 deletions(-) create mode 100644 src/components/common/MenuDropdown/MenuDropdown.module.scss create mode 100644 src/components/common/MenuDropdown/MenuDropdown.tsx create mode 100644 src/components/icons/IconUser.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 238543466..e48fc3111 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,18 @@ -import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common'; -import { IconBuy } from 'src/components/icons'; +import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout, MenuDropdown } from 'src/components/common'; +import { IconBuy, IconUser } from 'src/components/icons'; + +const optionMenu = [ + { + link: '/', + name: 'Account', + }, + { + link: '/', + name: 'Logout', + }, + +] export default function Home() { return ( <> @@ -17,6 +29,8 @@ export default function Home() { }>Button + + ) } diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss new file mode 100644 index 000000000..93faf3dbb --- /dev/null +++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss @@ -0,0 +1,91 @@ +@import "../../../styles/utilities"; + +.menuDropdown { + // todo: remove + margin-left: 20rem; + + @apply relative cursor-pointer; + width: fit-content; + min-width: 4.8rem; + &:hover { + .label { + color: var(--primary); + svg path { + fill: currentColor; + } + } + .menu { + @apply block; + animation: menuDropdownAnimation 0.2s ease-out; + } + } + + .label { + @apply flex justify-end items-center transition-all duration-200; + svg path { + width: fit-content; + } + } + + &.arrow { + .label { + margin-right: 1.6rem; + } + &::after { + @apply inline-block absolute transition-all duration-100; + content: ""; + top: 35%; + right: 0; + border: solid currentColor; + border-width: 0 2px 2px 0; + padding: 2px; + transform: rotate(45deg); + } + &:hover { + &::after { + @apply border-primary; + transform: rotate(-135deg); + } + } + } + + .menu { + @apply hidden absolute; + // @apply absolute rounded list-none bg-white; + content: ""; + right: 0; + top: 0; + height: max-content; + min-width: 19.2rem; + &:hover { + @apply block shadow-md; + } + .menuIner { + @apply rounded list-none bg-white; + border: 1px solid var(--text-active); + margin-top: 2.4rem; + li { + @apply block transition-all duration-200 cursor-pointer text-active; + padding: 0.8rem 1.6rem; + &:hover { + @apply bg-primary-lightest; + color: var(--primary); + } + a { + @apply block; + } + } + } + } +} + +@keyframes menuDropdownAnimation { + 0% { + opacity: 0; + transform: translateY(1.6rem); + } + 100% { + opacity: 1; + transform: none; + } +} diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx new file mode 100644 index 000000000..86b7a084c --- /dev/null +++ b/src/components/common/MenuDropdown/MenuDropdown.tsx @@ -0,0 +1,38 @@ +import classNames from 'classnames'; +import Link from 'next/link'; +import React from 'react'; +import s from './MenuDropdown.module.scss'; + +interface Props { + children?: React.ReactNode, + options: { link: string, name: string }[], + isHasArrow?: boolean, +} + +const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => { + return ( +
+ + {children} + +
+ +
+
+ ); +}; + +export default MenuDropdown; \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 7a0f464a2..d1df223ba 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -8,3 +8,5 @@ export { default as Inputcommon} from './InputCommon/InputCommon' export { default as InputSearch} from './InputSearch/InputSearch' export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy' export { default as Banner} from './Banner/Banner' +export { default as Footer} from './Footer/Footer' +export { default as MenuDropdown} from './MenuDropdown/MenuDropdown' diff --git a/src/components/icons/IconUser.tsx b/src/components/icons/IconUser.tsx new file mode 100644 index 000000000..ea25fa34b --- /dev/null +++ b/src/components/icons/IconUser.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconUser = () => { + return ( + + + + ) +} + +export default IconUser diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index a26adde71..9557e7b18 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1,4 +1,5 @@ export { default as IconBuy } from './IconBuy' export { default as IconSearch } from './IconSearch' export { default as IconArrowRight } from './IconArrowRight' +export { default as IconUser } from './IconUser'