feat(fs.dev): Added theme picker to navigation

packages/freesewing.dev/hooks/useApp.js

@@ -25,6 +25,10 @@ function useApp(full = true) {
 
 
   return {
+    // Static vars
+    site: 'dev',
+    pitch: "This website does not track you",
+
     // State
     primaryMenu,
     theme,

packages/freesewing.shared/components/icon/icons.js

@@ -44,6 +44,8 @@ const showcase = "M 9,2 7.17,4 H 4 C 2.9,4 2,4.9 2,6 v 12 c 0,1.1 0.9,2 2,2 h 16
 
 const support = "M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"
 
+const theme = "M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10c1.38,0,2.5-1.12,2.5-2.5c0-0.61-0.23-1.2-0.64-1.67c-0.08-0.1-0.13-0.21-0.13-0.33 c0-0.28,0.22-0.5,0.5-0.5H16c3.31,0,6-2.69,6-6C22,6.04,17.51,2,12,2z M17.5,13c-0.83,0-1.5-0.67-1.5-1.5c0-0.83,0.67-1.5,1.5-1.5 s1.5,0.67,1.5,1.5C19,12.33,18.33,13,17.5,13z M14.5,9C13.67,9,13,8.33,13,7.5C13,6.67,13.67,6,14.5,6S16,6.67,16,7.5 C16,8.33,15.33,9,14.5,9z M5,11.5C5,10.67,5.67,10,6.5,10S8,10.67,8,11.5C8,12.33,7.33,13,6.5,13S5,12.33,5,11.5z M11,7.5 C11,8.33,10.33,9,9.5,9S8,8.33,8,7.5C8,6.67,8.67,6,9.5,6S11,6.67,11,7.5z"
+
 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 tutorials = 'M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'
@@ -88,6 +90,7 @@ export default {
   search,
   showcase,
   support,
+  theme,
   tip,
   tutorials,
   twitter,

packages/freesewing.shared/components/navigation/primary.js

@@ -3,6 +3,8 @@ import Icon from 'shared/components/icon/index.js'
 import nav from 'site/prebuild/navigation.js'
 import Link from 'next/link'
 import orderBy from 'lodash.orderby'
+import Logo from '@freesewing/components/Logo'
+import ThemePicker from 'shared/components/theme-picker.js'
 
 // TODO: Clean this up after restructuring markdown content
 const hide = ['contributors', 'developers', 'editors', 'translators']
@@ -113,6 +115,59 @@ const TopLevel = ({ icon, title, nav, current, slug, showChildren=false }) => (
   </details>
 )
 
+// Component that renders the logo first entry
+const TopLogo = ({ app }) => (
+  <div className={`
+    flex flex-row uppercase gap-4 font-bold text-lg
+    items-center
+    hover:cursor-row-resize
+    hover:bg-base-200
+    p-2
+    text-primary
+  `}>
+    <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
+        `}>{app.pitch}</p>
+    </div>
+  </div>
+)
+
+// Component that renders the theme picker first entry
+const TopTheme = ({ app }) => (
+  <>
+  <div className={`
+    flex flex-row uppercase gap-4 font-bold text-lg
+    items-center
+    hover:cursor-row-resize
+    hover:bg-base-200
+    p-2
+    text-primary
+  `}>
+    <Icon icon='theme' />
+    <div className={`
+      grow
+      hover:cursor-pointer hover:text-underline
+      hover:underline
+      hover:decoration-secondary
+      hover:decoration-4
+    `}>
+      Theme
+    </div>
+  </div>
+  <ThemePicker app={app} />
+  </>
+)
+
 // TODO: Get rid of this when markdown has been restructured
 const remove = ['contributors', 'developers', 'editors', 'translators']
 const Navigation = ({ nav, app }) => {
@@ -139,7 +194,9 @@ const PrimaryMenu = props => {
       sm:max-w-sm
       grow
     `}>
+      <TopLogo app={props.app}/>
       <Navigation nav={nav} app={props.app}/>
+      <TopTheme app={props.app}/>
     </nav>
   )
 }