chore(dev): Menu tweaks

sites/dev/components/header.mjs

@@ -43,12 +43,16 @@ export const Header = ({ app, setSearch }) => {
               className={`
                   btn btn-sm btn-ghost
                   text-neutral-content bg-transparent
-                  hover:text-secondary-focus
+                  hover:bg-secondary hover:bg-opacity-50
                   lg:hidden
+                  rounded-none
+                  swap swap-rotate
                 `}
-              onClick={app.togglePrimaryMenu}
+              onClick={() => app.updateState('menu.main', app.state?.menu?.main ? false : true)}
             >
-              {app.primaryMenu ? <CloseIcon /> : <MenuIcon />}
+              <div className={`${app.state?.menu?.main ? 'rotate-90' : ''} transition-transform`}>
+                {app.state?.menu?.main ? <CloseIcon /> : <MenuIcon />}
+              </div>
             </button>
             <div className="hidden lg:block">
               <WordMark />
@@ -60,7 +64,7 @@ export const Header = ({ app, setSearch }) => {
           <div className="flex flex-row items-center lg:hidden pr-2">
             <button
               onClick={() => setSearch(true)}
-              className="btn btn-sm btn-ghost hover:text-secondary-focus"
+              className="btn btn-sm btn-ghost hover:bg-secondary hover:bg-opacity-50 rounded-none"
             >
               <SearchIcon />
             </button>
@@ -77,7 +81,9 @@ export const Header = ({ app, setSearch }) => {
               onClick={() => setSearch(true)}
             >
               <SearchIcon />
-              <span className="normal-case text-base font-medium">Ctrl K</span>
+              <keyb className="px-3 rounded text-base font-medium border border-solid border-base-300">
+                /
+              </keyb>
             </button>
             <ThemePicker app={app} />
           </div>

sites/dev/components/navigation/aside.mjs

@@ -7,20 +7,22 @@ export const AsideNavigation = ({ app, mobileOnly = false, before = [], after =
     fixed top-0 right-0 h-screen
     overflow-y-auto z-20
     bg-base-100 text-base-content
-    ${app.state.primaryMenu ? '' : 'translate-x-[-120%]'} transition-transform
+    ${app.state?.menu?.main ? '' : 'translate-x-[-120%]'} transition-transform
     px-0 pb-20 pt-8 shrink-0
 
     lg:w-auto
     lg:sticky lg:relative lg:transform-none
     lg:justify-center
-    lg:border-r-2 lg:border-base-200 lg:bg-base-200 lg:bg-opacity-50
+    lg:border-r-2 lg:border-base-200 lg:bg-base-300 lg:bg-opacity-10
-    lg:mt-16
+    lg:pt-16
     ${mobileOnly ? 'block lg:hidden w-full ' : ''}
   `}
   >
-    {before}
+    <div className="w-screen lg:w-auto">
-    <MainSections app={app} />
+      {before}
-    <ActiveSection app={app} />
+      <MainSections app={app} />
-    {after}
+      <ActiveSection app={app} />
+      {after}
+    </div>
   </aside>
 )

sites/dev/components/navigation/primary.mjs

@@ -35,9 +35,9 @@ const currentChildren = (current) =>
 
 // Shared classes for links
 // Exported for re-use
-export const linkClasses = `text-lg lg:text-xl
+export const linkClasses = `
   py-1
-  text-base-content sm:text-base-content
+  text-base text-base-content sm:text-base-content
   hover:text-secondary
   sm:hover:text-secondary
 `
@@ -180,8 +180,12 @@ export const MainSections = ({ app }) => {
     const act = isActive(page.s, app.state.slug)
     const txt = (
       <>
-        {icons[page.s] ? icons[page.s](`w-8 h-8 ${act ? 'text-accent' : ''}`) : <HelpIcon />}
+        {icons[page.s] ? (
-        <span className={`font-bold ${act ? 'text-accent' : ''}`}>{page.t}</span>
+          icons[page.s](`w-6 h-6 ${act ? 'text-secondary-content' : ''}`)
+        ) : (
+          <HelpIcon />
+        )}
+        <span className={`font-bold ${act ? 'text-secondary-content' : ''}`}>{page.t}</span>
       </>
     )
 
@@ -191,10 +195,12 @@ export const MainSections = ({ app }) => {
           <span
             className={`
                 flex flex-row gap-4 items-center
-                text-accent
+                text-secondary-content
                 hover:text-base-content
-                p-2 rounded
+                bg-secondary
+                p-2 px-4 rounded
                 bg-base-200
+                rounded-none
               `}
             title={page.t}
           >
@@ -205,8 +211,9 @@ export const MainSections = ({ app }) => {
             href={`/${page.s}`}
             className={`
               flex flex-row gap-4 items-center
-              hover:bg-secondary hover:bg-opacity-10 hover:cursor-pointer
+              hover:bg-secondary hover:bg-opacity-25 hover:cursor-pointer
-              p-2 rounded
+              p-2 px-4 rounded
+              rounded-none
             `}
             title={page.t}
           >

sites/dev/lib/load-navigation.mjs

@@ -8,6 +8,8 @@ import orderBy from 'lodash.orderby'
  * - 404 => no navigation shown
  * - home page => no navvigation shown
  * - /contact => Added below
+ *
+ * Note: Set 'h' to truthy to not show a top-level entry as a section
  */
 pbn.en.contact = { t: 'Contact information', s: 'contact', h: 1 }
 

sites/dev/pages/contact.mjs

@@ -19,16 +19,11 @@ const No = () => (
   </span>
 )
 
-const ContactPage = () => {
+const ContactPage = (props) => {
-  const app = useApp({
+  const app = useApp(props)
-    page: {
-      path: ['contact'],
-    },
-  })
-  const title = 'Contact information'
 
   return (
-    <PageWrapper app={app} title={title} slug="contact" crumbs={[[title, 'contact']]}>
+    <PageWrapper app={app}>
       <Head>
         <meta property="og:type" content="article" key="type" />
         <meta
@@ -220,6 +215,9 @@ export async function getStaticProps() {
   return {
     props: {
       ...(await serverSideTranslations('en')),
+      page: {
+        path: ['contact'],
+      },
     },
   }
 }

sites/shared/components/navigation/aside.mjs

@@ -7,7 +7,7 @@ export const AsideNavigation = ({ app, slug, mobileOnly = false, before = [], af
     overflow-y-auto z-20
     bg-base-100 text-base-content md:bg-base-50
     transition-all
-    ${app.primaryMenu ? '' : 'translate-x-[-120%]'} transition-transform
+    ${app.state?.menu?.main ? '' : 'translate-x-[-120%]'} transition-transform
     md:flex md:sticky md:flex-row-reverse
     md:relative md:transform-none
     px-6 py-24

sites/shared/components/theme-picker/index.mjs

@@ -16,7 +16,8 @@ export const ThemePicker = ({ app, iconOnly = false, bottom = false }) => {
       {() => (
         <>
           <Popover.Button
-            className={`h-12 group border-0 inline-flex items-center px-3 text-base text-neural-content hover:bg-neutral-focus`}
+            className={`h-12 group border-0 inline-flex items-center px-3 text-base
+              text-neural-content hover:bg-secondary hover:bg-opacity-50`}
           >
             <ThemeIcon />
             {!iconOnly && (

sites/shared/components/wrappers/page.mjs

@@ -32,8 +32,8 @@ export const PageWrapper = ({
    * Swipe handling for the entire site
    */
   const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => (app.primaryMenu ? app.setPrimaryMenu(false) : null),
+    onSwipedLeft: () => (app.state?.menu?.main ? app.updateState('menu.main', false) : null),
-    onSwipedRight: () => (app.primaryMenu ? null : app.setPrimaryMenu(true)),
+    onSwipedRight: () => (app.state?.menu?.main ? null : app.updateState('menu.main', true)),
     trackMouse: true,
   })
 
@@ -49,7 +49,7 @@ export const PageWrapper = ({
   // Always close modal when Escape key is hit
   useHotkeys('esc', (evt) => {
     evt.preventDefault()
-    app.setModal(false)
+    app.updateState('modal', null)
   })
 
   // Search state
@@ -63,7 +63,7 @@ export const PageWrapper = ({
     setSearch,
     toggleSearch: () => setSearch(!search),
     noSearch: noSearch,
-    title,
+    title: app.state.title ? app.state.title : title,
   }
 
   // Make layout prop into a (uppercase) component
@@ -87,7 +87,7 @@ export const PageWrapper = ({
               bg-base-100 bg-opacity-90 z-50 hover:cursor-pointer
               flex flex-row items-center justify-center
             `}
-          onClick={() => app.setModal(false)}
+          onClick={() => app.updateState('modal', false)}
         >
           {app.modal}
         </div>