VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(fs.dev): Work on themes and themed logo

Browse source
This commit is contained in:
Joost De Cock 2021-12-21 18:50:19 +01:00
parent ed922f4d99
commit 9b0530daca
10 changed files with 342 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

87
packages/freesewing.shared/components/navigation/primary.js
View file

@ -21,7 +21,7 @@ const force = [
// Component for the collapse toggle
const Chevron = ({w=8, m=2}) => <svg
className={`fill-current opacity-75 w-${w} h-${w} mr-${m} details-toggle`}
className={`fill-current opacity-75 w-${w} h-${w} mr-${m} details-toggle hover:text-secondary`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
</svg>
@ -30,6 +30,8 @@ const Chevron = ({w=8, m=2}) => <svg
const currentChildren = current => Object.values(current)
.filter(entry => (typeof entry === 'object'))
const linkClasses = "text-lg py-2 text-base-content hover:cursor-pointer hover:text-secondary bg-opacity-50"
// Component that renders a sublevel of navigation
const SubLevel = ({ nodes={} }) => (
<ul className='list-inside'>
@ -38,23 +40,13 @@ const SubLevel = ({ nodes={} }) => (
<li key={child.__slug}>
<details>
<summary className={`
flex flex-row gap-4 font-bold
flex flex-row gap-4
p-1 px-2
text-base-content
hover:cursor-row-resize
hover:bg-base-200
p-1
px-2
text-primary
`}>
<Link href={child.__slug}>
<a title={child.__title} className={`
grow
text-primary
color-primary
hover:cursor-pointer
hover:underline
hover:decoration-secondary
hover:decoration-2
`}>
<a title={child.__title} className={`grow ${linkClasses}`}>
{ child?.__linktitle || child.__title }
</a>
</Link>
@ -64,20 +56,12 @@ const SubLevel = ({ nodes={} }) => (
</details>
</li>
) : (
<li className='text-primary pl-2 font-bold'>
<div className={`
p-1
text-primary
color-primary
hover:cursor-pointer
hover:underline
hover:decoration-secondary
hover:decoration-2
`}>
<li className='pl-2'>
<Link href={child.__slug} title={child.__title}>
{child.__linktitle}
<a className={linkClasses}>
{child.__linktitle}
</a>
</Link>
</div>
</li>
)
@ -87,23 +71,17 @@ const SubLevel = ({ nodes={} }) => (
// Component that renders a toplevel of navigation
const TopLevel = ({ icon, title, nav, current, slug, showChildren=false }) => (
<details className='p-2' open={((keepClosed.indexOf(current._slug) === -1) ? 1 : 0)}>
<details className='py-1' open={((keepClosed.indexOf(current._slug) === -1) ? 1 : 0)}>
<summary className={`
flex flex-row uppercase gap-4 font-bold text-lg
hover:cursor-row-resize
hover:bg-base-200
p-2
text-primary
text-base-content
items-center
`}>
{icon}
<Link href={`/${current._slug}/`}>
<a className={`
grow
hover:cursor-pointer hover:text-underline
hover:underline
hover:decoration-secondary
hover:decoration-4
`}>
<a className={`grow ${linkClasses}`}>
{title}
</a>
</Link>
@ -119,23 +97,18 @@ const TopLogo = ({ app }) => (
flex flex-row uppercase gap-4 font-bold text-lg
items-center
hover:cursor-row-resize
hover:bg-base-200
p-2
text-primary
text-base-content
`}>
<Logo size={32} />
<div className={`
grow
hover:cursor-pointer hover:text-underline
hover:underline
hover:decoration-secondary
hover:decoration-4
`}>
<Link href='/'>
<a>freesewing.{app.site}</a>
</Link>
<p className={`text-base text-captalize text-primary text-sm font-normal
`}>{getTagline()}</p>
<div>
<Link href='/'>
<a className={`grow ${linkClasses}`}>
freesewing.{app.site}
</a>
</Link>
<p className={`text-base-content text-captalize text-sm font-normal
`}>{getTagline()}</p>
</div>
</div>
)
@ -151,14 +124,8 @@ const TopTheme = ({ app }) => (
p-2
text-primary
`}>
<Icon icon='theme' />
<div className={`
grow
hover:cursor-pointer hover:text-underline
hover:underline
hover:decoration-secondary
hover:decoration-4
`}>
<Icon icon='theme' className="text-secondary"/>
<div className={`grow`}>
Theme
</div>
</div>
@ -173,7 +140,7 @@ const Navigation = ({ app }) => {
const output = []
for (const key of Object.keys(app.navigation).sort()) {
if (hide.indexOf(key) === -1) output.push(<TopLevel
icon={<Icon icon={key}/>}
icon={<Icon icon={key} className="text-secondary"/>}
title={key}
slug={key}
key={key}