Skip to content

Commit

Permalink
Jaspers branch (vercel#29)
Browse files Browse the repository at this point in the history 
* 🐛 Removed search bar for launch

* 🐛 Fixed bugs with user nav mobile view overflowing the sidebar manu and showing up on cart sidebar

* Fixed Mobile SideBar

---------

Co-authored-by: Jasper-Rowan <jasper.rowan@berkeley.edu>
  • Loading branch information
@Wkasel @Jasper-Rowan
Wkasel and Jasper-Rowan committed Apr 8, 2023
1 parent f037cac commit c6d4fec
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 137 deletions.
6 changes: 3 additions & 3 deletions site/components/common/Navbar/Navbar.tsx
View file
Expand Up @@ -68,7 +68,7 @@ function DropDownMenu({ children, dropDownLinks, isActive, menuKey, setActiveMen
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 w-56 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="absolute right-0 z-10 w-56 origin-top-right rounded-md shadow-lg bg-primary ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{dropDownLinks.map((dropDownLink) => (
<Menu.Item key={dropDownLink.name}>
Expand Down Expand Up @@ -134,7 +134,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
))}
</nav>
<div className="flex items-center justify-end flex-1 flex-shrink-[2] space-x-8">
{process.env.COMMERCE_SEARCH_ENABLED && (
{/* {process.env.COMMERCE_SEARCH_ENABLED && (
<div className="flex items-center justify-center">
<button
onClick={() =>
Expand All @@ -154,7 +154,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
</svg>
</button>
</div>
)}
)} */}
<UserNav cart={true} wishlist={true} userAvatar={true} mobileMenu={true} />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/components/common/SidebarLayout/SidebarLayout.module.css
View file
@@ -1,11 +1,11 @@
.root {
@apply relative h-full flex flex-col;
@apply relative h-full flex flex-col bg-primary;
}

.header {
@apply sticky top-0 pl-4 py-4 pr-6
flex items-center justify-between
bg-accent-0 box-border w-full z-20;
bg-primary box-border w-full z-20;
min-height: 66px;
}

Expand Down
56 changes: 34 additions & 22 deletions site/components/common/SidebarLayout/SidebarLayout.tsx
View file
@@ -1,7 +1,8 @@
import React, { FC, ReactNode } from 'react'
import { Cross, ChevronLeft } from '@components/icons'
import { UserNav } from '@components/common'
import { ChevronLeft } from '@components/icons'
import { useUI } from '@components/ui/context'
import cn from 'clsx'
import { FC, ReactNode } from 'react'
import s from './SidebarLayout.module.css'

type ComponentProps = { className?: string; children?: ReactNode } & (
Expand All @@ -15,46 +16,57 @@ const SidebarLayout: FC<ComponentProps> = ({
handleBack,
handleClose,
}) => {
const { sidebarView } = useUI()
return (
<div className={cn(s.root, className)}>
<header className={s.header}>
{handleClose && (
{/* Temporary Hack to fix layout */}
<div className="flex items-center mr-6" />

{/* {handleClose && (
<button
onClick={handleClose}
aria-label="Close"
className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none mr-6"
className="flex items-center mr-6 transition duration-150 ease-in-out hover:text-accent-5 focus:outline-none"
>
<Cross className="h-6 w-6 hover:text-accent-3" />
<span className="ml-2 text-accent-7 text-sm ">Close</span>
<Cross className="w-6 h-6 hover:text-accent-3" />
<span className="ml-2 text-sm text-accent-7 ">Close</span>
</button>
)}
)} */}
{handleBack && (
<button
onClick={handleBack}
aria-label="Go back"
className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
className="flex items-center transition duration-150 ease-in-out hover:text-accent-5 focus:outline-none"
>
<ChevronLeft className="h-6 w-6 hover:text-accent-3" />
<span className="ml-2 text-accent-7 text-xs">Back</span>
<ChevronLeft className="w-6 h-6 hover:text-accent-3" />
<span className="ml-2 text-xs text-accent-7">Back</span>
</button>
)}

<UserNav mobileMenu={true} />
</header>
<div className={s.container}>{children}</div>
<div className="fixed bottom-0 left-0 w-full z-20 bg-white">
<div className="flex justify-center items-center h-24">
<div className="w-1/3 border border-black flex justify-center items-center h-full">
<UserNav cart={true} size={'large'} />
</div>
<div className="w-1/3 border-t border-b border-black flex justify-center items-center h-full border-l-0 border-r-0">
<UserNav wishlist={true} size={'large'} />
</div>
<div className="w-1/3 border border-black flex justify-center items-center h-full">
<UserNav userAvatar={true} size={'large'} />
<div className={s.container}>
{sidebarView === 'MOBILE_MENU_VIEW' && (

// create the mobile navbar
<div className="bottom-0 left-0 w-full z-100 bg-primary">
<div className="flex items-center justify-center h-24">
<div className="flex items-center justify-center w-1/3 h-full border border-gray-300">
<UserNav cart={true} size={'large'} />
</div>
<div className="flex items-center justify-center w-1/3 h-full border-t border-b border-l-0 border-r-0 border-gray-300">
<UserNav wishlist={true} size={'large'} />
</div>
<div className="flex items-center justify-center w-1/3 h-full border border-gray-300">
<UserNav userAvatar={true} size={'large'} />
</div>
</div>
</div>
</div>
)}
{children}
</div>

</div>
)
}
Expand Down
4 changes: 2 additions & 2 deletions site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css
View file
@@ -1,7 +1,7 @@
.root {
@apply px-4 sm:px-6 sm:w-full flex-1 z-10;
@apply px-4 sm:px-6 sm:w-full flex-1 z-10 bg-primary;
}

.item {
@apply text-xl font-bold py-2;
@apply text-xl font-bold py-2 bg-primary;
}
13 changes: 6 additions & 7 deletions site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx
View file
@@ -1,8 +1,8 @@
import React, { useState } from 'react'
import SidebarLayout from '@components/common/SidebarLayout'
import { useUI } from '@components/ui/context'
import Link from 'next/link'
import React, { useState } from 'react'
import s from './MenuSidebarView.module.css'
import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import type { Link as LinkProps } from './index'

export default function MenuSidebarView({
Expand All @@ -17,7 +17,7 @@ export default function MenuSidebarView({
setExpandedLink((current) => (current === href ? null : href))
}
console.log(links);


return (
<SidebarLayout handleClose={() => closeSidebar()}>
Expand All @@ -38,9 +38,8 @@ export default function MenuSidebarView({
<Link href={l.href} onClick={() => closeSidebar()} className='ml-2' >{l.label}</Link>
{l.subLinks.length > 0 && (
<span
className={`ml-auto mr-2 inline-block transition-transform duration-300 ${
expandedLink === l.href ? 'transform rotate-180' : ''
}`}
className={`ml-auto mr-2 inline-block transition-transform duration-300 ${expandedLink === l.href ? 'transform rotate-180' : ''
}`}
>
▼
</span>
Expand Down
2 changes: 1 addition & 1 deletion site/components/common/UserNav/UserNav.module.css
View file
@@ -1,5 +1,5 @@
.root {
@apply relative flex items-center;
@apply relative flex items-center bg-primary;
}

.list {
Expand Down
198 changes: 100 additions & 98 deletions site/components/common/UserNav/UserNav.tsx
View file
@@ -1,18 +1,18 @@
import cn from 'clsx'
import Link from 'next/link'
import s from './UserNav.module.css'
import { Avatar } from '@components/common'
import useCart from '@framework/cart/use-cart'
import { useUI } from '@components/ui/context'
import { Heart, Bag, Menu } from '@components/icons'
import CustomerMenuContent from './CustomerMenuContent'
import useCustomer from '@framework/customer/use-customer'
import React from 'react'
import { Bag, Heart, Menu } from '@components/icons'
import {
Button,
Dropdown,
DropdownTrigger as DropdownTriggerInst,
Button,
} from '@components/ui'
import { useUI } from '@components/ui/context'
import useCart from '@framework/cart/use-cart'
import useCustomer from '@framework/customer/use-customer'
import cn from 'clsx'
import Link from 'next/link'
import React from 'react'
import CustomerMenuContent from './CustomerMenuContent'
import s from './UserNav.module.css'

import type { LineItem } from '@commerce/types/cart'

Expand All @@ -33,99 +33,101 @@ const UserNav: React.FC<{
mobileMenu = false,
size = 'small',
}) => {
const { data } = useCart()
const { data: isCustomerLoggedIn } = useCustomer()
const { closeSidebarIfPresent, openModal, setSidebarView, openSidebar } =
useUI()

const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
const DropdownTrigger = isCustomerLoggedIn
? DropdownTriggerInst
: React.Fragment
const { data } = useCart()
const { data: isCustomerLoggedIn } = useCustomer()
const { closeSidebarIfPresent, openModal, setSidebarView, openSidebar } =
useUI()

return (
<nav className={cn(s.root, className)}>
<ul className={s.list}>
{process.env.COMMERCE_CART_ENABLED && cart && (
<li className={s.item}>
<Button
className={s.item}
variant="naked"
onClick={() => {
setSidebarView('CART_VIEW')
openSidebar()
}}
aria-label={`Cart items: ${itemsCount}`}
>
{size === 'small' && (
<>
<Bag />
{itemsCount > 0 && (
<span className={s.bagCount}>{itemsCount}</span>
)}
</>
)}
const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
const DropdownTrigger = isCustomerLoggedIn
? DropdownTriggerInst
: React.Fragment

{size === 'large' && (
<>
<Bag scale={2} />
{itemsCount > 0 && (
<span className={s.bagCountLarge}>{itemsCount}</span>
)}
</>
)}
</Button>
</li>
)}
{process.env.COMMERCE_WISHLIST_ENABLED && wishlist && (
<li className={s.item}>
<Link className="pb-0 mb-0" href="/wishlist">
<button
className=" pt-1"
onClick={closeSidebarIfPresent}
aria-label="Wishlist"
return (
<nav className={cn(s.root, className)}>
<ul className={s.list}>
{process.env.COMMERCE_CART_ENABLED && cart && (
<li className={s.item}>
<Button
className={s.item}
variant="naked"
onClick={() => {
setSidebarView('CART_VIEW');
openSidebar();
closeSidebarIfPresent();
}}
aria-label={`Cart items: ${itemsCount}`}
>
{size === 'small' && <Heart />}
{size === 'large' && <Heart scale={2} />}
</button>
</Link>
</li>
)}
{process.env.COMMERCE_CUSTOMERAUTH_ENABLED && userAvatar && (
<li className={s.item}>
<Dropdown>
<DropdownTrigger>
{size === 'small' && (
<>
<Bag />
{itemsCount > 0 && (
<span className={s.bagCount}>{itemsCount}</span>
)}
</>
)}

{size === 'large' && (
<>
<Bag scale={2} />
{itemsCount > 0 && (
<span className={s.bagCountLarge}>{itemsCount}</span>
)}
</>
)}
</Button>
</li>
)}
{process.env.COMMERCE_WISHLIST_ENABLED && wishlist && (
<li className={s.item}>
<Link className="pb-0 mb-0" href="/wishlist">
<button
aria-label="Menu"
className={s.avatarButton}
onClick={() => (isCustomerLoggedIn ? null : openModal())}
className="pt-1 "
onClick={closeSidebarIfPresent}
aria-label="Wishlist"
>
{size === 'small' && <Avatar />}
{size === 'large' && <Avatar scale={4} />}
{size === 'small' && <Heart />}
{size === 'large' && <Heart scale={2} />}
</button>
</DropdownTrigger>
<CustomerMenuContent />
</Dropdown>
</li>
)}
{mobileMenu && (
<li className={s.mobileMenu}>
<Button
className={s.item}
aria-label="Menu"
variant="naked"
onClick={() => {
setSidebarView('MOBILE_MENU_VIEW')
openSidebar()
}}
>
<Menu />
</Button>
</li>
)}
</ul>
</nav>
)
}
</Link>
</li>
)}
{process.env.COMMERCE_CUSTOMERAUTH_ENABLED && userAvatar && (
<li className={s.item}>
<Dropdown>
<DropdownTrigger>
<button
aria-label="Menu"
className={s.avatarButton}
onClick={() => (isCustomerLoggedIn ? null : openModal())}
>
{size === 'small' && <Avatar />}
{size === 'large' && <Avatar scale={4} />}
</button>
</DropdownTrigger>
<CustomerMenuContent />
</Dropdown>
</li>
)}
{mobileMenu && (
<li className={s.mobileMenu}>
<Button
className={s.item}
aria-label="Menu"
variant="naked"
onClick={() => {
setSidebarView('MOBILE_MENU_VIEW')
openSidebar()
closeSidebarIfPresent();
}}
>
<Menu />
</Button>
</li>
)}
</ul>
</nav>
)
}

export default UserNav

0 comments on commit c6d4fec

Please sign in to comment.