Skip to content

Commit

Permalink
fix: remove resize observer, use css for responsive menu (#778)
Browse files Browse the repository at this point in the history 
remove resize observer, use css instead
  • Loading branch information
@dashcraft
dashcraft authored Jan 27, 2022
1 parent 04b56fe commit afc0292
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 86 deletions.
6 changes: 4 additions & 2 deletions packages/website/components/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export default function Button({
onClick && onClick(event)
}, [tracking, onClick, href])

const buttonStyle = small ? {} : { minWidth: '6rem', minHeight: '3.25rem' }
let variantClasses = ''

switch(variant) {
Expand All @@ -82,14 +81,17 @@ export default function Button({
'items-center',
'justify-center',
'px-4',
'min-h-2',
'min-w-2.5',
'md:min-h-3.25',
'md:min-w-6',
disabled ?
'cursor-auto opacity-50' :
'hover:opacity-90 focus:opacity-90 transition',
'typography-cta',
!small && 'w-full',
className
)}
style={buttonStyle}
onClick={onClickHandler}
disabled={disabled}
id={id}
Expand Down
179 changes: 114 additions & 65 deletions packages/website/components/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { getMagic } from '../lib/magic.js'
import countly from '../lib/countly'
import { useQueryClient } from 'react-query'
import Button from './button.js'
import { useResizeObserver } from '../hooks/resize-observer'
import clsx from 'clsx'
import Hamburger from '../icons/hamburger'

Expand All @@ -23,24 +22,11 @@ import Loading from './loading.js'
*/
export default function Navbar({ bgColor = '', isLoggedIn, isLoadingUser }) {
const containerRef = useRef(null)
const [isSmallVariant, setSmallVariant] = useState(false)
const [isMenuOpen, setMenuOpen] = useState(false)
const router = useRouter();
const router = useRouter()

useResizeObserver(containerRef, () => {
const shouldGoToSmallVariant = window.innerWidth < 640

if (shouldGoToSmallVariant && !isSmallVariant) {
setSmallVariant(true)
}

if (!shouldGoToSmallVariant && isSmallVariant) {
setSmallVariant(false)
}
})

const ITEMS = useMemo(() =>
[
const ITEMS = useMemo(
() => [
{
link: 'https://docs.web3.storage/',
slug: 'docs',
Expand All @@ -65,7 +51,9 @@ export default function Navbar({ bgColor = '', isLoggedIn, isLoadingUser }) {
name: 'Account',
spacing: `p-3 md:px-6`
}
], [isLoggedIn])
],
[isLoggedIn]
)

const queryClient = useQueryClient()
const onLinkClick = useCallback((event) => {
Expand All @@ -82,7 +70,9 @@ export default function Navbar({ bgColor = '', isLoggedIn, isLoadingUser }) {
}

const toggleMenu = () => {
isMenuOpen ? document.body.classList.remove('overflow-hidden') : document.body.classList.add('overflow-hidden')
isMenuOpen
? document.body.classList.remove('overflow-hidden')
: document.body.classList.add('overflow-hidden')
setMenuOpen(!isMenuOpen)
}

Expand All @@ -92,82 +82,141 @@ export default function Navbar({ bgColor = '', isLoggedIn, isLoadingUser }) {
id="logout"
wrapperClassName="inline-block ml-3 md:ml-6"
variant="outlined"
small={isSmallVariant}
tracking={{
event: countly.events.LOGOUT_CLICK,
ui: countly.ui.NAVBAR,
action: 'Logout'
}}>
}}
>
Logout
</Button>
)

const loginButton = (
<Button href="/login" id="login" wrapperClassName="inline-block ml-3 md:ml-6" small={isSmallVariant} tracking={{ ui: countly.ui.NAVBAR, action: 'Login' }}>
<Button
href="/login"
id="login"
variant="dark"
wrapperClassName="inline-block ml-3 md:ml-6 md:min-height[3.25rem]"
tracking={{ ui: countly.ui.NAVBAR, action: 'Login' }}
>
Login
</Button>
)
)

const spinnerButton = (
<Button href="#" id="loading-user" wrapperClassName="inline-block ml-3 md:ml-6" small={isSmallVariant} >
<Loading className='user-spinner' fill='white' height={10} />
<Button
href="#"
id="loading-user"
wrapperClassName="inline-block ml-3 md:ml-6"
>
<Loading className="user-spinner" fill="white" height={10} />
</Button>
)

return (
<nav className={clsx(bgColor, 'w-full z-40', isSmallVariant ? 'sticky top-0' : '')} ref={containerRef}>
<div className={clsx("py-3 text-w3storage-purple items-center w-100", isSmallVariant ? 'grid grid-cols-3 px-4' : 'flex justify-between layout-margins')}>
{ isSmallVariant &&
<div className="flex align-middle">
<button onClick={toggleMenu}>
<Hamburger className="w-6 m-2" aria-label="Toggle Navbar"/>
</button>
</div>
}
<nav className={clsx(bgColor, 'w-full z-40')} ref={containerRef}>
<div
className={clsx(
'py-3 text-w3storage-purple items-center w-100 grid grid-cols-3 md:flex md:justify-between layout-margins'
)}
>
<div className="flex flex-1 align-middle md:hidden">
<button onClick={toggleMenu}>
<Hamburger className="w-6 m-2" aria-label="Toggle Navbar" />
</button>
</div>
<div>
<Link href="/" >
<a title="Web3 Storage" className={clsx("flex items-center", isSmallVariant ? 'justify-center' : '')} onClick={onLinkClick}>
<Logo style={{ width: '1.9rem' }} className="fill-current text-w3storage-purple w-full" />
<span className="space-grotesk ml-2 text-w3storage-purple font-medium text-md hidden xl:inline-block">Web3.Storage</span>
<Link href="/">
<a
title="Web3 Storage"
className={clsx('flex items-center justify-center')}
onClick={onLinkClick}
>
<Logo
style={{ width: '1.9rem' }}
className="fill-current text-w3storage-purple w-full"
/>
<span className="space-grotesk ml-2 text-w3storage-purple font-medium text-md hidden xl:inline-block">
Web3.Storage
</span>
</a>
</Link>
</div>
<div className={clsx("flex items-center", isSmallVariant ? 'justify-end' : '')} style={{ minHeight: 52 }}>
{!isSmallVariant && ITEMS.map(item => (
<Link href={item.link} key={item.name} >
<a onClick={onLinkClick} className={clsx('text-sm text-w3storage-purple font-bold hover:underline align-middle', item.spacing, router.pathname.includes(item.slug) && 'underline')}>
{ item.name }
<div
className="flex flex-1 items-center justify-end"
style={{ minHeight: 52 }}
>
{ITEMS.map((item) => (
<Link href={item.link} key={item.name}>
<a
onClick={onLinkClick}
className={clsx(
'text-sm text-w3storage-purple font-bold hover:underline align-middle hidden md:flex',
item.spacing,
router.pathname.includes(item.slug) && 'underline'
)}
>
{item.name}
</a>
</Link>
))}
{isLoadingUser
? spinnerButton
: isLoggedIn
? logoutButton
: loginButton
}
? logoutButton
: loginButton}
</div>
</div>
<div className={clsx(
"transition-all duration-300 fixed top-0 left-0 bottom-0 shadow-2xl p-6 w-full bg-w3storage-blue-dark",
isSmallVariant && isMenuOpen ? 'flex justify-center opacity-100' : 'opacity-0 invisible'
)} aria-hidden={isSmallVariant && isMenuOpen}>
<div className="flex flex-col align-middle text-center mt-4">
<a href="/" title="Web3 Storage" className="flex justify-center mb-8">
<Logo style={{ height: '4rem', minWidth: '4rem' }} className="fill-current text-w3storage-red" />
</a>
{ ITEMS.map(item => (
<Link href={item.link} key={item.name}>
<a className={clsx('space-grotesk text-5xl text-white font-bold no-underline hover:underline align-middle mt-4', item.spacing)} onClick={() => toggleMenu()}>
{ item.name }
</a>
</Link>
))}
<button className="flex justify-center mt-16" onClick={ () => toggleMenu() }>
<Cross width="48" height="48" />
</button>
{isMenuOpen && (
<div
className={clsx(
'md:hidden transition-all duration-300 fixed top-0 left-0 bottom-0 shadow-2xl p-6 w-full bg-w3storage-blue-dark'
)}
>
<div className="flex flex-col align-middle text-center mt-4">
<a
href="/"
title="Web3 Storage"
className="flex justify-center mb-8"
>
<Logo
style={{ height: '4rem', minWidth: '4rem' }}
className="fill-current text-w3storage-red"
/>
</a>

{ITEMS.map((item) => (
<Link href={item.link} key={item.name}>
<a
className={clsx(
'space-grotesk text-5xl text-white font-bold no-underline hover:underline align-middle mt-4',
item.spacing
)}
onClick={() => toggleMenu()}
>
{item.name}
</a>
</Link>
))}
<button
className="flex justify-center mt-16"
onClick={() => toggleMenu()}
aria-labelledby="close-menu-text"
>
<span id="close-menu-text" hidden>
Close Menu
</span>
<Cross
width="48"
height="48"
aria-hidden="true"
focusable="false"
/>
</button>
</div>
</div>
</div>
)}
</nav>
)
}
19 changes: 0 additions & 19 deletions packages/website/hooks/resize-observer.js
View file

This file was deleted.

6 changes: 6 additions & 0 deletions packages/website/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@ module.exports = {
'3-auto': 'repeat(3, auto)',
'6-auto': 'repeat(6, auto)'
},
minHeight: {
'3.25': '3.25rem'
},
minWidth: {
'6': '6rem'
},
zIndex: {
'n1': '-1',
'0': 0,
Expand Down

0 comments on commit afc0292

Please sign in to comment.