chore(shared): Shared navigation and wordmark tweaks

sites/shared/components/navigation/aside.mjs

@@ -1,26 +1,28 @@
-import { PrimaryNavigation } from './primary.mjs'
+import { MainSections, ActiveSection } from './primary.mjs'
+import Link from 'next/link'
 
-export const AsideNavigation = ({ app, slug, mobileOnly = false, before = [], after = [] }) => (
+export const AsideNavigation = ({ app, mobileOnly = false, before = [], after = [] }) => (
   <aside
     className={`
-    fixed top-0 right-0 h-screen w-screen
+    fixed top-0 right-0 h-screen
     overflow-y-auto z-20
-    bg-base-100 text-base-content md:bg-base-50
-    transition-all
+    bg-base-100 text-base-content
     ${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
-    shrink-0
-    md:w-24 md:px-2 md:justify-center
-    lg:w-96 lg:pr-2 lg:border-r-2
-    xl:w-lg xl:border-0
-    2xl:pr-8
-    ${mobileOnly ? 'block md:hidden' : ''}
+    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-300 lg:bg-opacity-10
+    lg:pt-16
+    ${mobileOnly ? 'block lg:hidden w-full ' : ''}
   `}
   >
-    {before}
-    <PrimaryNavigation app={app} active={slug} />
-    {after}
+    <div className="w-screen lg:w-auto">
+      {before}
+      <MainSections app={app} />
+      <ActiveSection app={app} />
+      {after}
+    </div>
   </aside>
 )