chore(fs.dev): Work on navigation menu
This commit is contained in:
Joost De Cock
parent
586cb2ed3b
commit
13af8b478c
10 changed files with 70 additions and 43 deletions
|
|
@ -15,7 +15,6 @@ export default (props) => {
|
|||
>Toggle</button>
|
||||
</p>
|
||||
<ThemePicker app={app} />
|
||||
<pre>{JSON.stringify(nav, null ,2)}</pre>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const github = 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6
|
|||
|
||||
const google = 'M 12.25009,0 C 7.5567085,0 3.5033589,2.69334 1.530043,6.613315 0.71674427,8.240005 0.25,10.06676 0.25,12.00009 c 0,1.93333 0.46674427,3.759905 1.280043,5.386595 C 3.5033589,21.30666 7.5567085,24 12.25009,24 c 3.239959,0 5.959944,-1.066635 7.94668,-2.906575 2.266629,-2.093365 3.573349,-5.173415 3.573349,-8.826735 0,-0.98666 -0.08023,-1.70661 -0.253496,-2.453265 l -11.266533,0 0,4.45322 6.613137,0 c -0.133283,1.106705 -0.853233,2.77333 -2.453266,3.89327 -1.013315,0.706675 -2.373243,1.199975 -4.159871,1.199975 -3.173318,0 -5.8666835,-2.09327 -6.826777,-4.986605 -0.2533286,-0.746655 -0.399991,-1.54657 -0.399991,-2.373195 0,-0.82672 0.1467055,-1.62672 0.386706,-2.373375 C 6.3834495,6.73338 9.076772,4.63993 12.25009,4.63993 c 2.253301,0 3.773228,0.973465 4.639932,1.786855 L 20.27666,3.12004 C 18.196718,1.186705 15.490049,0 12.25009,0 Z'
|
||||
|
||||
const guide = 'M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z'
|
||||
const guides = 'M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z'
|
||||
|
||||
const help = 'M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z'
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ const support = "M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7
|
|||
|
||||
const tip = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'
|
||||
|
||||
const tutorial = 'M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'
|
||||
const tutorials = 'M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'
|
||||
|
||||
const twitter = 'M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z'
|
||||
|
||||
|
|
@ -74,8 +74,9 @@ export default {
|
|||
freesewing,
|
||||
github,
|
||||
google,
|
||||
guide,
|
||||
guides,
|
||||
help,
|
||||
howtos: help,
|
||||
instagram,
|
||||
language,
|
||||
measurement,
|
||||
|
|
@ -83,11 +84,12 @@ export default {
|
|||
middot,
|
||||
note: down,
|
||||
reddit,
|
||||
reference: docs,
|
||||
search,
|
||||
showcase,
|
||||
support,
|
||||
tip,
|
||||
tutorial,
|
||||
tutorials,
|
||||
twitter,
|
||||
unit,
|
||||
warning,
|
||||
|
|
|
|||
|
|
@ -39,8 +39,9 @@ const DefaultLayout = props => {
|
|||
fixed top-0 right-0
|
||||
${props.app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
|
||||
sm:relative sm:transform-none
|
||||
h-screen
|
||||
w-screen
|
||||
h-screen w-screen
|
||||
bg-base-200
|
||||
sm:bg-base-100
|
||||
sm:max-w-[38.2%]
|
||||
sm:flex sm:flex-row-reverse
|
||||
`}>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
import Icon from 'shared/components/icon/index.js'
|
||||
import nav from 'site/prebuild/navigation.js'
|
||||
import Link from 'next/link'
|
||||
|
||||
const TopLevel = ({ icon, title }) => (
|
||||
<details className='p-3'>
|
||||
<summary className='flex flex-row uppercase font-bold text-lg gap-6'>
|
||||
{icon}
|
||||
{title}
|
||||
const keepClosed = ['blog', 'showcase', ]
|
||||
|
||||
const TopLevel = ({ icon, title, nav, current }) => (
|
||||
<details className='p-2' 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
|
||||
`}>
|
||||
<Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{icon}</Link>
|
||||
<Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{title}</Link>
|
||||
</summary>
|
||||
<div className='pl-4'>
|
||||
<ul>
|
||||
|
|
@ -18,19 +26,35 @@ const TopLevel = ({ icon, title }) => (
|
|||
</details>
|
||||
)
|
||||
|
||||
// TODO: Get rid of this when markdown has been restructured
|
||||
const remove = ['contributors', 'developers', 'editors', 'translators']
|
||||
const Navigation = ({ nav, app }) => {
|
||||
const output = []
|
||||
for (const key of Object.keys(nav[app.language]).sort()) {
|
||||
if (
|
||||
key.slice(0,1) !== '_' &&
|
||||
remove.indexOf(key) === -1
|
||||
) output.push(<TopLevel
|
||||
icon={<Icon icon={key}/>}
|
||||
title={key}
|
||||
key={key}
|
||||
nav={nav}
|
||||
current={nav[app.language][key]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
const PrimaryMenu = props => {
|
||||
|
||||
return (
|
||||
<nav className={`
|
||||
sm:max-w-sm
|
||||
bg-base-200
|
||||
grow
|
||||
`}>
|
||||
<TopLevel icon={<Icon icon='tutorial' size={28}/>} title='tutorials' />
|
||||
<TopLevel icon={<Icon icon='guide' size={28}/>} title='guides' />
|
||||
<TopLevel icon={<Icon icon='help' size={28}/>} title='howtos' />
|
||||
<TopLevel icon={<Icon icon='docs' size={28}/>} title='reference' />
|
||||
<pre>{Object.keys(nav[props.app.language])}</pre>
|
||||
<Navigation nav={nav} app={props.app}/>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"autoprefixer": "^10.4.0",
|
||||
"lodash.set": "^4.3.2",
|
||||
"postcss": "^8.4.4",
|
||||
"tailwindcss": "^3.0.1"
|
||||
"tailwindcss": "^3.0.1",
|
||||
"tailwindcss-open-variant": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
const gray = colors.trueGray
|
||||
const gray = colors.neutral
|
||||
|
||||
module.exports = {
|
||||
icon: "👨💼",
|
||||
|
|
@ -34,9 +34,9 @@ module.exports = {
|
|||
'--rounded-box': '2px',
|
||||
'--rounded-btn': '2px',
|
||||
|
||||
'--pattern-fabric': colors.trueGray['700'],
|
||||
'--pattern-fabric': colors.neutral['700'],
|
||||
'--pattern-lining': colors.emerald['500'],
|
||||
'--pattern-interfacing': colors.trueGray['400'],
|
||||
'--pattern-interfacing': colors.neutral['400'],
|
||||
'--pattern-canvas': colors.amber['600'],
|
||||
'--pattern-various': colors.red['500'],
|
||||
'--pattern-mark': colors.blue['500'],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
const gray = colors.trueGray
|
||||
const gray = colors.neutral
|
||||
|
||||
module.exports = {
|
||||
icon: "🌚",
|
||||
|
|
@ -31,9 +31,9 @@ module.exports = {
|
|||
'warning': colors.amber['500'],
|
||||
'error': colors.red['400'],
|
||||
|
||||
'--pattern-fabric': colors.trueGray['300'],
|
||||
'--pattern-fabric': colors.neutral['300'],
|
||||
'--pattern-lining': colors.emerald['700'],
|
||||
'--pattern-interfacing': colors.trueGray['500'],
|
||||
'--pattern-interfacing': colors.neutral['500'],
|
||||
'--pattern-canvas': colors.amber['700'],
|
||||
'--pattern-various': colors.red['700'],
|
||||
'--pattern-mark': colors.blue['700'],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
const gray = colors.trueGray
|
||||
const gray = colors.neutral
|
||||
|
||||
module.exports = {
|
||||
icon: "👩💻",
|
||||
|
|
@ -33,9 +33,9 @@ module.exports = {
|
|||
|
||||
'--rounded-btn': '0',
|
||||
|
||||
'--pattern-fabric': colors.trueGray['700'],
|
||||
'--pattern-fabric': colors.neutral['700'],
|
||||
'--pattern-lining': colors.emerald['500'],
|
||||
'--pattern-interfacing': colors.trueGray['400'],
|
||||
'--pattern-interfacing': colors.neutral['400'],
|
||||
'--pattern-canvas': colors.amber['600'],
|
||||
'--pattern-various': colors.red['500'],
|
||||
'--pattern-mark': colors.blue['500'],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
const gray = colors.trueGray
|
||||
const gray = colors.neutral
|
||||
|
||||
module.exports = {
|
||||
icon: "🐕",
|
||||
|
|
@ -33,9 +33,9 @@ module.exports = {
|
|||
|
||||
'--rounded-btn': '10rem',
|
||||
|
||||
'--pattern-fabric': colors.trueGray['700'],
|
||||
'--pattern-fabric': colors.neutral['700'],
|
||||
'--pattern-lining': colors.emerald['500'],
|
||||
'--pattern-interfacing': colors.trueGray['400'],
|
||||
'--pattern-interfacing': colors.neutral['400'],
|
||||
'--pattern-canvas': colors.amber['600'],
|
||||
'--pattern-various': colors.red['500'],
|
||||
'--pattern-mark': colors.blue['500'],
|
||||
|
|
|
|||
|
|
@ -40,20 +40,20 @@ module.exports = {
|
|||
*/
|
||||
|
||||
// base-100: The default background color
|
||||
'base-100': colors.trueGray['100'],
|
||||
'base-100': colors.neutral['100'],
|
||||
// base-200: A slightly different background color, used for hovers and so on
|
||||
'base-200': colors.trueGray['200'],
|
||||
'base-200': colors.neutral['200'],
|
||||
// base-300: A shade midway between dark and light
|
||||
'base-300': colors.trueGray['400'],
|
||||
'base-300': colors.neutral['400'],
|
||||
// base-content: The default text color
|
||||
'base-content': colors.trueGray['700'],
|
||||
'base-content': colors.neutral['700'],
|
||||
|
||||
// primary: The main brand color and color of the primary button
|
||||
'primary': colors.trueGray['900'],
|
||||
'primary': colors.neutral['900'],
|
||||
// primary-focus: The :hover color for the primary button
|
||||
'primary-focus': colors.violet['600'],
|
||||
// primary-content: The text color for the primary button
|
||||
'primary-content': colors.trueGray['200'],
|
||||
'primary-content': colors.neutral['200'],
|
||||
|
||||
// secondary: The link color
|
||||
'secondary': colors.violet['500'],
|
||||
|
|
@ -69,15 +69,15 @@ module.exports = {
|
|||
// accent-focus: The :hover color for the accent button
|
||||
'accent-focus': colors.emerald['400'],
|
||||
// accent-content: The text color for the accent button
|
||||
'accent-content': colors.trueGray['900'],
|
||||
'accent-content': colors.neutral['900'],
|
||||
|
||||
// neutral: Used as the background for the footer and code blocks.
|
||||
// Should always be dark(ish) because of prism syntax highlighting
|
||||
'neutral': colors.trueGray['800'],
|
||||
'neutral': colors.neutral['800'],
|
||||
// neutral-focus: Typically a shade lighter than neutral
|
||||
'neutral-focus': colors.trueGray['700'],
|
||||
'neutral-focus': colors.neutral['700'],
|
||||
// neutral-content: The text color on neutral backgrounds
|
||||
'neutral-content': colors.trueGray['200'],
|
||||
'neutral-content': colors.neutral['200'],
|
||||
|
||||
// info: Used rarely, can be another color best somewhat neutral looking
|
||||
// and should work with the default text color
|
||||
|
|
@ -127,11 +127,11 @@ module.exports = {
|
|||
*/
|
||||
|
||||
// Color for the main fabric
|
||||
'--pattern-fabric': colors.trueGray['700'],
|
||||
'--pattern-fabric': colors.neutral['700'],
|
||||
// Color for lining fabric
|
||||
'--pattern-lining': colors.emerald['500'],
|
||||
// Color for interfacing
|
||||
'--pattern-interfacing': colors.trueGray['400'],
|
||||
'--pattern-interfacing': colors.neutral['400'],
|
||||
// Color for canvas
|
||||
'--pattern-canvas': colors.amber['600'],
|
||||
// Color for various fabric types
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue