mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Setup Basic Mobile Menu Items Styling
This commit is contained in:
@@ -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>
|
||||
|
@@ -0,0 +1,7 @@
|
||||
.root {
|
||||
@apply px-4 sm:px-6 flex-1 z-20;
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
@@ -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>
|
||||
)
|
||||
|
@@ -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;
|
||||
}
|
@@ -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"
|
||||
|
Reference in New Issue
Block a user