VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(new-design): Initial work to port to v3

Browse source
This commit is contained in:
Joost De Cock 2022-10-06 14:15:13 +02:00
parent a94f1cc3ef
commit 9c488f6bcb
22 changed files with 999 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

88
packages/new-design/shared/lab/components/header.js
View file

@ -2,21 +2,18 @@ import { useState, useEffect } from 'react'
import Link from 'next/link'
import ThemePicker from 'shared/components/theme-picker.js'
import LocalePicker from 'shared/components/locale-picker.js'
import DesignPicker from 'site/components/design-picker.js'
import CloseIcon from 'shared/components/icons/close.js'
import MenuIcon from 'shared/components/icons/menu.js'
import HelpIcon from 'shared/components/icons/help.js'
import Ribbon from 'shared/components/ribbon.js'
import { WordMark } from 'shared/components/wordmark.js'
import DocsIcon from 'shared/components/icons/docs.js'
import { useTranslation } from 'next-i18next'
const Right = props => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
)
const Left = props => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
)
const btnClasses =
'btn btn-ghost text-base font-medium btn-sm text-neutral-content ' +
' capitalize hover:bg-transparent hover:text-secondary-focus'
const Header = ({ app }) => {
const { t } = useTranslation(['common'])
@ -27,11 +24,10 @@ const Header = ({ app }) => {
useEffect(() => {
if (typeof window !== 'undefined') {
const handleScroll = () => {
const curScrollPos = (typeof window !== 'undefined') ? window.pageYOffset : 0
const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
if (curScrollPos >= prevScrollPos) {
if (show && curScrollPos > 20) setShow(false)
}
else setShow(true)
} else setShow(true)
setPrevScrollPos(curScrollPos)
}
window.addEventListener('scroll', handleScroll)
@ -39,59 +35,53 @@ const Header = ({ app }) => {
}
}, [prevScrollPos, show])
return (
<header className={`
<header
className={`
fixed top-0 left-0
bg-neutral
w-full
z-30
transition-transform
drop-shadow-xl
${show ? '': 'fixed top-0 left-0 -translate-y-20'}
${app.loading ? "theme-gradient loading" : ""}
`}>
<div className="max-w-6xl m-auto">
<div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
${show ? '' : 'fixed top-0 left-0 -translate-y-20'}
`}
>
<div>
<div className="p-2 flex flex-row justify-between text-neutral-content">
<div className="flex flex-row items-center">
<button
className={`
btn btn-sm
text-neutral-content bg-transparent
border border-transparent
hover:bg-transparent hover:border-base-100
md:hidden
h-12
`}
onClick={app.togglePrimaryMenu}>
{app.primaryMenu
? <><CloseIcon /><span className="opacity-50 pl-2 flex flex-row items-center gap-1"><Left />swipe</span></>
: <><MenuIcon /><span className="opacity-50 pl-2 flex flex-row items-center gap-1"><Right />swipe</span></>
}
btn btn-sm btn-ghost
text-neutral-content bg-transparent
hover:text-secondary-focus
lg:hidden
`}
onClick={app.togglePrimaryMenu}
>
{app.primaryMenu ? <CloseIcon /> : <MenuIcon />}
</button>
<WordMark />
<div className="hidden md:flex flex-row items-center">
<a role="button" className="btn btn-link btn-sm text-neutral-content" href="https://freesewing.dev/">
<DocsIcon /><span className="ml-2">{t('docs')}</span>
<a role="button" className={btnClasses} href="https://freesewing.dev/">
<DocsIcon />
<span className="ml-2">{t('docs')}</span>
</a>
<Link href="/support">
<a role="button" className="btn btn-link btn-sm text-neutral-content ">
<DocsIcon /><span className="ml-2">{t('support')}</span>
<a role="button" className={btnClasses}>
<HelpIcon />
<span className="ml-2">{t('support')}</span>
</a>
</Link>
</div>
<div className="hidden md:flex md:flex-row gap-2">
<Link href="/">
<a role="button" className="btn btn-link btn-sm text-neutral-content h-12 font-normal lowercase text-2xl">
<span className="font-black px-1 normal-case">FreeSewing</span>
</a>
</Link>
</div>
<div className="hidden md:flex flex-row items-center">
<ThemePicker app={app} />
<LocalePicker app={app} />
</div>
</div>
<div className="hidden md:flex flex-row items-center gap-2">
<ThemePicker app={app} />
<LocalePicker app={app} />
</div>
</div>
</header>
</div>
<Ribbon loading={app.loading} theme={app.theme} />
</header>
)
}