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