4
0
forked from crowetic/commerce

UI Tweaks

This commit is contained in:
Belen Curcio 2020-10-26 13:20:56 -03:00
parent 52dbbb8ad8
commit 8e1c9f36f1
4 changed files with 28 additions and 5 deletions

View File

@ -9,3 +9,12 @@
.link:focus { .link:focus {
@apply outline-none text-accents-8; @apply outline-none text-accents-8;
} }
.logo {
@apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
&:hover {
@apply shadow-md;
transform: scale(1.05);
}
}

View File

@ -15,7 +15,7 @@ const Navbar: FC<Props> = ({ className }) => {
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative"> <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
<div className="flex flex-1 items-center"> <div className="flex flex-1 items-center">
<Link href="/"> <Link href="/">
<a className="cursor-pointer" aria-label="Logo"> <a className={s.logo} aria-label="Logo">
<Logo /> <Logo />
</a> </a>
</Link> </Link>

View File

@ -15,6 +15,10 @@
@apply bg-accents-1; @apply bg-accents-1;
} }
.link.active {
@apply font-bold bg-accents-2;
}
.off { .off {
@apply hidden; @apply hidden;
} }

View File

@ -6,6 +6,8 @@ import s from './DropdownMenu.module.css'
import { Moon, Sun } from '@components/icons' import { Moon, Sun } from '@components/icons'
import { Menu, Transition } from '@headlessui/react' import { Menu, Transition } from '@headlessui/react'
import useLogout from '@lib/bigcommerce/use-logout' import useLogout from '@lib/bigcommerce/use-logout'
import { useRouter } from 'next/router'
interface DropdownMenuProps { interface DropdownMenuProps {
open: boolean open: boolean
} }
@ -20,7 +22,7 @@ const LINKS = [
href: '/profile', href: '/profile',
}, },
{ {
name: 'Cart', name: 'My Cart',
href: '/cart', href: '/cart',
}, },
] ]
@ -28,6 +30,8 @@ const LINKS = [
const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => { const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const logout = useLogout() const logout = useLogout()
const { pathname } = useRouter()
return ( return (
<Transition <Transition
show={open} show={open}
@ -41,11 +45,17 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
<Menu.Items className={s.dropdownMenu}> <Menu.Items className={s.dropdownMenu}>
{LINKS.map(({ name, href }) => ( {LINKS.map(({ name, href }) => (
<Menu.Item key={href}> <Menu.Item key={href}>
{({ active }) => ( <div>
<Link href={href}> <Link href={href}>
<a className={cn(s.link, { [s.active]: active })}>{name}</a> <a
className={cn(s.link, {
[s.active]: pathname === href,
})}
>
{name}
</a>
</Link> </Link>
)} </div>
</Menu.Item> </Menu.Item>
))} ))}
<Menu.Item> <Menu.Item>