4
0
forked from crowetic/commerce

Latest updates

This commit is contained in:
Belen Curcio 2020-10-24 17:06:20 -03:00
parent 34f270a353
commit 8bb39b3a83
3 changed files with 18 additions and 20 deletions

View File

@ -3,7 +3,7 @@
}
.button {
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
}
.dropdownMenu {

View File

@ -2,9 +2,6 @@
@apply relative;
}
.mainContainer {
}
.list {
@apply flex flex-row items-center justify-items-end h-full;
}
@ -25,3 +22,11 @@
@apply outline-none;
}
}
.bagCount {
@apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
}
.avatarButton {
@apply inline-flex justify-center rounded-full outline-none focus:outline-none;
}

View File

@ -20,7 +20,6 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart()
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
return (
@ -32,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
>
<Bag />
{itemsCount > 0 && (
<span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
{itemsCount}
</span>
)}
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
</li>
<Link href="/wishlist">
<li className={s.item}>
@ -45,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
</Link>
<li className={s.item}>
<Menu>
{({ open }) => {
return (
<>
<Menu.Button className="inline-flex justify-center rounded-full">
<Avatar />
</Menu.Button>
<DropdownMenu open={open} />
</>
)
}}
{({ open }) => (
<>
<Menu.Button className={s.avatarButton}>
<Avatar />
</Menu.Button>
<DropdownMenu open={open} />
</>
)}
</Menu>
</li>
</ul>