chore(shared): Header tweaks

sites/org/components/header/header.en.yaml

@@ -10,4 +10,4 @@ language: Language
 search: Search
 sets: Measurements
 patterns: Patterns
-
+new: New

sites/org/components/header/index.mjs

@@ -16,13 +16,14 @@ import {
   I18nIcon,
   MeasureIcon,
   PageIcon,
+  PlusIcon,
 } from 'shared/components/icons.mjs'
 import { Ribbon } from 'shared/components/ribbon.mjs'
 import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs'
 import { ModalLocalePicker, ns as localeNs } from 'shared/components/modal/locale-picker.mjs'
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
 
-import { NavButton, NavSpacer, colors } from 'shared/components/workbench/header.mjs'
+import { NavButton, NavSpacer, colors } from 'shared/components/header.mjs'
 
 export const ns = ['header', 'sections', ...themeNs, ...localeNs]
 
@@ -93,6 +94,9 @@ const NavIcons = ({ setModal, setSearch }) => {
       <NavButton href="/account" label={t('header:account')} color={colors[9]}>
         <UserIcon className={iconSize} />
       </NavButton>
+      <NavButton href="/new" label={t('header:new')} color={colors[10]}>
+        <PlusIcon className={iconSize} />
+      </NavButton>
     </>
   )
 }

sites/shared/components/header.mjs

@@ -0,0 +1,48 @@
+import Link from 'next/link'
+
+export const colors = [
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'teal',
+  'cyan',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+]
+
+export const NavButton = ({
+  href,
+  label,
+  color,
+  children,
+  onClick = false,
+  extraClasses = '',
+  active = false,
+}) => {
+  const className =
+    'border-0 px-1 lg:px-4 text-base py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' +
+    `hover:bg-${color}-400 text-${color}-400 hover:text-neutral grow lg:grow-0 relative ${extraClasses} ${
+      active ? 'font-heavy' : ''
+    }`
+  const span = <span className="block font-bold hidden 2xl:block">{label}</span>
+
+  return onClick ? (
+    <button {...{ onClick, className }} title={label}>
+      {children}
+      {span}
+    </button>
+  ) : (
+    <Link {...{ href, className }} title={label}>
+      {children}
+      {span}
+    </Link>
+  )
+}
+
+export const NavSpacer = () => (
+  <div className="hidden lg:block text-base lg:text-4xl font-thin opacity-30 px-0.5 lg:px-2">|</div>
+)