feat: add Header and MainMenu components
This commit is contained in:
96
src/components/layout/fragments/Header.tsx
Normal file
96
src/components/layout/fragments/Header.tsx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import { css, cx } from '@styled-system/css'
|
||||||
|
import { token } from '@styled-system/tokens'
|
||||||
|
import { type FC, useCallback, useEffect, useState } from 'react'
|
||||||
|
import SrJuggernautLogo from '@/components/assets/SrJuggernautLogo'
|
||||||
|
import MainMenu from '@/components/layout/fragments/MainMenu'
|
||||||
|
import srOnlyClass from '@/styles/srOnly'
|
||||||
|
|
||||||
|
const headerClass = css({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
transition: `background-color ${token('durations.slow')} ${token('easings.easeOutQuint')}`,
|
||||||
|
zIndex: 1,
|
||||||
|
flexShrink: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerUnscrolledClass = css({
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerScrolledClass = css({
|
||||||
|
backgroundColor: 'neutral.2'
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerContainerClass = css({
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
padding: 'md',
|
||||||
|
maxWidth: {
|
||||||
|
sm: 'breakpoint-sm',
|
||||||
|
md: 'breakpoint-md',
|
||||||
|
lg: 'breakpoint-lg',
|
||||||
|
xl: 'breakpoint-xl',
|
||||||
|
'2xl': 'breakpoint-2xl'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerLogoLinkClass = css({
|
||||||
|
color: 'neutral.12',
|
||||||
|
cursor: 'pointer'
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerLogoClass = css({
|
||||||
|
fill: 'neutral.12',
|
||||||
|
height: '30px',
|
||||||
|
width: 'auto'
|
||||||
|
})
|
||||||
|
|
||||||
|
const Header: FC = () => {
|
||||||
|
const [scrolled, setScrolled] = useState(false)
|
||||||
|
|
||||||
|
const handleScroll = useCallback(() => {
|
||||||
|
if (window.scrollY > 0) {
|
||||||
|
setScrolled(true)
|
||||||
|
} else {
|
||||||
|
setScrolled(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll)
|
||||||
|
}
|
||||||
|
}, [handleScroll])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className={cx(
|
||||||
|
headerClass,
|
||||||
|
scrolled ? headerScrolledClass : headerUnscrolledClass
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={headerContainerClass}>
|
||||||
|
<a
|
||||||
|
className={headerLogoLinkClass}
|
||||||
|
href="/"
|
||||||
|
>
|
||||||
|
<SrJuggernautLogo className={headerLogoClass} />
|
||||||
|
<span className={srOnlyClass}>Ir a la página principal</span>
|
||||||
|
</a>
|
||||||
|
<MainMenu />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
||||||
186
src/components/layout/fragments/MainMenu.tsx
Normal file
186
src/components/layout/fragments/MainMenu.tsx
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { css } from '@styled-system/css'
|
||||||
|
import { token } from '@styled-system/tokens'
|
||||||
|
import { type FC, type ReactNode, useRef } from 'react'
|
||||||
|
import SrJuggernautLogo from '@/components/assets/SrJuggernautLogo'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Menu, {
|
||||||
|
MenuGroup,
|
||||||
|
MenuItem,
|
||||||
|
MenuLabel,
|
||||||
|
MenuSeparator
|
||||||
|
} from '@/components/ui/Menu'
|
||||||
|
import srOnlyClass from '@/styles/srOnly'
|
||||||
|
|
||||||
|
const menuDialogClass = css({
|
||||||
|
position: 'fixed',
|
||||||
|
height: '100dvh',
|
||||||
|
width: {
|
||||||
|
base: '100%',
|
||||||
|
sm: '250px'
|
||||||
|
},
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
left: 'auto',
|
||||||
|
backgroundColor: 'neutral.2',
|
||||||
|
color: 'neutral.12',
|
||||||
|
transition: `transform ${token('durations.normal')} ${token('easings.easeOutQuint')}`,
|
||||||
|
transitionBehavior: 'allow-discrete',
|
||||||
|
transform: 'translateX(0)',
|
||||||
|
'@starting-style': {
|
||||||
|
transform: 'translateX(100%)',
|
||||||
|
_backdrop: {
|
||||||
|
opacity: 0,
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
transition: `background-color ${token('durations.normal')} ${token('easings.easeOutQuint')}, opacity ${token('durations.fast')} ${token('easings.easeOutQuint')}`,
|
||||||
|
transitionBehavior: 'allow-discrete'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_backdrop: {
|
||||||
|
opacity: 1,
|
||||||
|
backdropFilter: 'blur(5px)',
|
||||||
|
backgroundColor: 'neutral.1/80',
|
||||||
|
transition: `background-color ${token('durations.normal')} ${token('easings.easeOutQuint')}, opacity ${token('durations.fast')} ${token('easings.easeOutQuint')}`,
|
||||||
|
transitionBehavior: 'allow-discrete'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const menuHeaderContainerClass = css({
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
padding: 'md'
|
||||||
|
})
|
||||||
|
|
||||||
|
const menuHeaderLogoLinkClass = css({
|
||||||
|
color: 'neutral.12',
|
||||||
|
cursor: 'pointer'
|
||||||
|
})
|
||||||
|
|
||||||
|
const menuHeaderLogoClass = css({
|
||||||
|
fill: 'neutral.12',
|
||||||
|
height: '30px',
|
||||||
|
width: 'auto'
|
||||||
|
})
|
||||||
|
|
||||||
|
interface MainMenuLink {
|
||||||
|
type: 'link'
|
||||||
|
href: string
|
||||||
|
label: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MainMenuLabel {
|
||||||
|
type: 'label'
|
||||||
|
label: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MainMenuSeparator {
|
||||||
|
type: 'separator'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MainMenuGroup {
|
||||||
|
type: 'group'
|
||||||
|
label: ReactNode
|
||||||
|
content: (MainMenuLink | MainMenuLabel | MainMenuSeparator)[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type MenuItemType =
|
||||||
|
| MainMenuLink
|
||||||
|
| MainMenuSeparator
|
||||||
|
| MainMenuLabel
|
||||||
|
| MainMenuGroup
|
||||||
|
|
||||||
|
const menuContent: MenuItemType[] = [
|
||||||
|
{ type: 'link', href: '/', label: 'Inicio' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const RenderMenuItem: FC<MenuItemType> = (item) => {
|
||||||
|
switch (item.type) {
|
||||||
|
case 'link':
|
||||||
|
return (
|
||||||
|
<MenuItem render={<a href={item.href}>{item.label}</a>}>
|
||||||
|
{item.label}
|
||||||
|
</MenuItem>
|
||||||
|
)
|
||||||
|
case 'label':
|
||||||
|
return <MenuLabel>{item.label}</MenuLabel>
|
||||||
|
case 'separator':
|
||||||
|
return <MenuSeparator />
|
||||||
|
case 'group':
|
||||||
|
return (
|
||||||
|
<MenuGroup label={item.label}>
|
||||||
|
{item.content.map((item, index) => (
|
||||||
|
<RenderMenuItem
|
||||||
|
key={`group-${item.type}-${index.toString()}`}
|
||||||
|
{...item}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</MenuGroup>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainMenu: FC = () => {
|
||||||
|
const DialogMenuRef = useRef<HTMLDialogElement>(null)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
if (DialogMenuRef.current) {
|
||||||
|
DialogMenuRef.current.showModal()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faBars} />
|
||||||
|
</Button>
|
||||||
|
<dialog
|
||||||
|
ref={DialogMenuRef}
|
||||||
|
className={menuDialogClass}
|
||||||
|
closedby="any"
|
||||||
|
>
|
||||||
|
<header className={menuHeaderContainerClass}>
|
||||||
|
<a
|
||||||
|
className={menuHeaderLogoLinkClass}
|
||||||
|
href="/"
|
||||||
|
>
|
||||||
|
<SrJuggernautLogo className={menuHeaderLogoClass} />
|
||||||
|
<span className={srOnlyClass}>Ir a la página principal</span>
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
if (DialogMenuRef.current) {
|
||||||
|
DialogMenuRef.current.close()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTimes} />
|
||||||
|
</Button>
|
||||||
|
</header>
|
||||||
|
<Menu
|
||||||
|
render={<menu />}
|
||||||
|
className={css({
|
||||||
|
width: '100%'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{menuContent.map((item, index) => (
|
||||||
|
<RenderMenuItem
|
||||||
|
key={`menu-${item.type}-${index.toString()}`}
|
||||||
|
{...item}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</dialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainMenu
|
||||||
Reference in New Issue
Block a user