Setup Basic Mobile Menu Items Styling

This commit is contained in:
Nine
2021-10-20 19:19:24 +02:00
parent b34fdc362c
commit 0921933c2c
5 changed files with 40 additions and 18 deletions

View File

@@ -22,7 +22,7 @@ const SidebarLayout: FC<ComponentProps> = ({
<button
onClick={handleClose}
aria-label="Close"
className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none mr-6"
>
<Cross className="h-6 w-6 hover:text-accent-3" />
<span className="ml-2 text-accent-7 text-sm ">Close</span>

View File

@@ -0,0 +1,7 @@
.root {
@apply px-4 sm:px-6 flex-1 z-20;
}
.item {
@apply text-2xl font-bold;
}

View File

@@ -1,5 +1,5 @@
import cn from 'classnames'
import Link from 'next/link'
import s from './MenuSidebarView.module.css'
import { FC } from 'react'
import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
@@ -20,16 +20,23 @@ const MenuSidebarView: FC<MenuProps> = (props) => {
console.log(props.links)
return (
<SidebarLayout handleClose={handleClose}>
<div className="px-4 sm:px-6 flex-1">
<ul>
{props.links?.map((l: any) => (
<li key={l.href}>
<Link href={l.href}>
<a>{l.label}</a>
<div className={s.root}>
<nav>
<ul>
<li className={s.item}>
<Link href="/search">
<a>All</a>
</Link>
</li>
))}
</ul>
{props.links?.map((l: any) => (
<li key={l.href} className={s.item}>
<Link href={l.href}>
<a>{l.label}</a>
</Link>
</li>
))}
</ul>
</nav>
</div>
</SidebarLayout>
)

View File

@@ -1,5 +1,5 @@
.root {
@apply relative;
@apply relative flex items-center;
}
.list {
@@ -7,14 +7,14 @@
}
.item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
@apply ml-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
&:hover {
@apply text-accent-6 transition scale-110 duration-100;
}
&:last-child {
@apply mr-0;
&:first-child {
@apply ml-0;
}
&:focus,
@@ -35,6 +35,11 @@
@apply inline-flex justify-center rounded-full;
}
.avatarButton:focus {
@apply outline-none;
.mobileMenu {
@apply flex lg:hidden ml-6
}
.avatarButton:focus,
.mobileMenu:focus {
@apply outline-none;
}

View File

@@ -33,7 +33,10 @@ const UserNav: FC<Props> = ({ className }) => {
<Button
className={s.item}
variant="naked"
onClick={toggleSidebar}
onClick={() => {
setSidebarView('CART_VIEW')
toggleSidebar()
}}
aria-label="Cart"
>
<Bag />
@@ -67,7 +70,7 @@ const UserNav: FC<Props> = ({ className }) => {
)}
</li>
)}
<li className="block lg:hidden">
<li className={s.mobileMenu}>
<Button
className={s.item}
variant="naked"