VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Fix icon view for nav

Browse source
This commit is contained in:
Joost De Cock 2023-03-26 08:49:21 +02:00
parent 4697fbd999
commit 1745469bb0
5 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
sites/dev/components/header.mjs
View file

@ -81,9 +81,9 @@ export const Header = ({ app, setSearch }) => {
onClick={() => setSearch(true)} onClick={() => setSearch(true)}
> >
<SearchIcon /> <SearchIcon />
<keyb className="px-3 rounded text-base font-medium border border-solid border-base-300"> <span className="px-3 rounded text-base font-medium border border-solid border-base-300">
/ /
</keyb> </span>
</button> </button>
<ThemePicker app={app} /> <ThemePicker app={app} />
</div> </div>

6
sites/dev/components/navigation/primary.mjs
View file

@ -157,9 +157,11 @@ export const Icons = ({
flex flex-col items-center`, flex flex-col items-center`,
linkStyle = {}, linkStyle = {},
}) => { }) => {
if (!app.navigation) return null console.log(app.state)
if (!app.state?.nav) return null
const output = [] const output = []
for (const page of order(app.navigation)) { for (const page of order(app.state.nav)) {
output.push( output.push(
<li key={page.s}> <li key={page.s}>
<Link href={`${page.s}`} className={linkClasses} title={page.t} style={linkStyle}> <Link href={`${page.s}`} className={linkClasses} title={page.t} style={linkStyle}>

7
sites/dev/lib/load-navigation.mjs
View file

@ -37,13 +37,14 @@ const createSections = () => {
export const loadNavigation = (path = []) => { export const loadNavigation = (path = []) => {
// Creat crumbs array // Creat crumbs array
const crumbs = createCrumbs(path) const crumbs = createCrumbs(path)
const sections = createSections()
return { return {
path, path,
slug: path.join('/'), slug: path.join('/'),
crumbs, crumbs,
sections: createSections(), sections,
nav: path.length > 1 ? get(pbn.en, path[0]) : pbn.en[path[0]], nav: path.length > 1 ? get(pbn.en, path[0]) : path.length === 0 ? sections : pbn.en[path[0]],
title: crumbs.slice(-1)[0].t, title: crumbs.length > 0 ? crumbs.slice(-1)[0].t : '',
} }
} }

11
sites/dev/pages/index.mjs
View file

@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Head from 'next/head' import Head from 'next/head'
import { PageWrapper } from 'shared/components/wrappers/page.mjs' import { PageWrapper } from 'shared/components/wrappers/page.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs' import { BareLayout } from 'site/components/layouts/bare.mjs'
import { Icons } from 'shared/components/navigation/primary.mjs' import { Icons } from 'site/components/navigation/primary.mjs'
import { Highlight } from 'shared/components/mdx/highlight.mjs' import { Highlight } from 'shared/components/mdx/highlight.mjs'
import { Popout } from 'shared/components/popout.mjs' import { Popout } from 'shared/components/popout.mjs'
import { WebLink } from 'shared/components/web-link.mjs' import { WebLink } from 'shared/components/web-link.mjs'
@ -14,8 +14,8 @@ import { PageLink } from 'shared/components/page-link.mjs'
const title = 'Welcome to FreeSewing.dev' const title = 'Welcome to FreeSewing.dev'
const HomePage = () => { const HomePage = (props) => {
const app = useApp() const app = useApp(props)
return ( return (
<PageWrapper app={app} title={title} layout={BareLayout}> <PageWrapper app={app} title={title} layout={BareLayout}>
<Head> <Head>
@ -71,7 +71,6 @@ const HomePage = () => {
</div> </div>
<Icons <Icons
app={app} app={app}
active="/"
ulClasses="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-8 mt-8 max-w-6xl" ulClasses="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-8 mt-8 max-w-6xl"
liClasses="" liClasses=""
linkClasses={` linkClasses={`
@ -206,7 +205,6 @@ const HomePage = () => {
<div className="px-8 text-base-content"> <div className="px-8 text-base-content">
<Icons <Icons
app={app} app={app}
active="/"
ulClasses="grid grid-cols-2 gap-4 w-full lg:grid-cols-4 lg:gap-8 mt-8 max-w-6xl" ulClasses="grid grid-cols-2 gap-4 w-full lg:grid-cols-4 lg:gap-8 mt-8 max-w-6xl"
liClasses="" liClasses=""
linkClasses={` linkClasses={`
@ -227,6 +225,9 @@ export async function getStaticProps() {
return { return {
props: { props: {
...(await serverSideTranslations('en')), ...(await serverSideTranslations('en')),
page: {
path: [],
},
}, },
} }
} }

6
sites/shared/hooks/use-app.mjs
View file

@ -20,7 +20,9 @@ const defaultState = {
*/ */
export function useApp(props = {}) { export function useApp(props = {}) {
const { bugsnag = false, page = {}, loadState = {} } = props const { bugsnag = false, page = {}, loadState = {} } = props
const { path = [] } = page const { path = false } = page
if (!path) throw 'You MUST pass a page.path prop to the useApp hook'
const reportError = useBugsnag(props?.bugsnag) const reportError = useBugsnag(props?.bugsnag)
@ -29,7 +31,7 @@ export function useApp(props = {}) {
useEffect(() => { useEffect(() => {
// Force update of navigation info (nav, title, crumbs) on each page change // Force update of navigation info (nav, title, crumbs) on each page change
if (path.length > 0) setState({ ...state, ...loadNavigation(path) }) if (path) setState({ ...state, ...loadNavigation(path) })
}, [path, state.slug, state.title]) }, [path, state.slug, state.title])
/* /*