Merge pull request #324 from brandonbk/theme-site-navbar

Add theme-site-navbar, theme-site-header components

packages/marko-web-theme-monorail/components/marko.json

@@ -8,7 +8,8 @@
     "./identity-x/marko.json",
     "./native-x/marko.json",
     "./nodes/marko.json",
-    "./page/marko.json"
+    "./page/marko.json",
+    "./site-navbar/marko.json"
   ],
   "<theme-client-side-block-loader>": {
     "template": "./client-side-block-loader.marko"
@@ -22,6 +23,9 @@
   "<theme-site-footer>": {
     "template": "./site-footer.marko"
   },
+  "<theme-site-header>": {
+    "template": "./site-header.marko"
+  },
   "<theme-site-menu>": {
     "template": "./site-menu/index.marko"
   },

packages/marko-web-theme-monorail/components/site-header.marko

@@ -0,0 +1,57 @@
+$ const { config, site } = out.global;
+
+$ const blockName = input.blockName || "site-header";
+
+$ const navigation = {
+  primary: site.getAsArray("navigation.primary.items"),
+  secondary: site.getAsArray("navigation.secondary.items"),
+  tertiary: site.getAsArray("navigation.tertiary.items"),
+};
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "header")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <${input.aboveNav} />
+  <theme-site-navbar modifiers=["secondary"] attrs={ "aria-label": "Secondary Navigation" }>
+    <theme-menu-toggle-button
+      class="site-navbar__toggler"
+      targets=[".site-menu", "body"]
+      toggle-class="site-menu--open"
+      icon-modifiers=["lg"]
+      icon-name="three-bars"
+    />
+
+    <theme-site-navbar-brand title=`${config.website("name")} Homepage`>
+      <theme-site-navbar-logo
+        alt=config.website("name")
+        src=site.get("logos.navbar.src")
+        srcset=site.getAsArray("logos.navbar.srcset").join(", ")
+        width=site.get("logos.navbar.width")
+        height=site.get("logos.navbar.height")
+      />
+    </theme-site-navbar-brand>
+
+    <theme-site-navbar-items
+      items=navigation.secondary
+      modifiers=["secondary"]
+      reg-enabled=input.regEnabled
+      has-user=input.hasUser
+    />
+
+    <marko-web-browser-component name="ThemeNewsletterToggleButton" ssr=true />
+  </theme-site-navbar>
+
+  <theme-site-navbar modifiers=["primary"] attrs={ "aria-label": "Primary Navigation" }>
+    <theme-site-navbar-items
+      items=navigation.primary
+      modifiers=["primary"]
+      reg-enabled=input.regEnabled
+      has-user=input.hasUser
+    />
+  </theme-site-navbar>
+  <${input.belowNav} />
+</marko-web-block>

packages/marko-web-theme-monorail/components/site-navbar/brand.marko

@@ -0,0 +1,8 @@
+$ const blockName = input.blockName || "site-navbar";
+$ const elementName = input.name || "brand";
+$ const classNames = [`${blockName}__${elementName}`, input.class];
+$ const href = input.href || "/";
+
+<marko-web-link href=(input.href || "/") class=classNames>
+  <${input.renderBody} />
+</marko-web-link>

packages/marko-web-theme-monorail/components/site-navbar/index.marko

@@ -0,0 +1,13 @@
+$ const blockName = input.blockName || "site-navbar";
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "nav")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <marko-web-element block-name=blockName name="container">
+    <${input.renderBody} />
+  </marko-web-element>
+</marko-web-block>

packages/marko-web-theme-monorail/components/site-navbar/item.marko

@@ -0,0 +1,46 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import isActiveLink from "./utils/is-active-link";
+
+$ const { req } = out.global;
+
+$ const blockName = input.blockName || "site-navbar";
+$ const linkMods = (href) => {
+  const mods = [];
+  if (isActiveLink(req.path, href)) mods.push("active");
+  return mods;
+};
+$ const containerMods = (href) => {
+  const mods = [...getAsArray(input, "modifiers")];
+  if (isActiveLink(req.path, href)) mods.push("active");
+  return mods;
+};
+
+<marko-web-element
+  block-name=blockName
+  name="item"
+  tag=(input.tag || "li")
+  modifiers=containerMods(input.href)
+>
+  $ const elementName = `${blockName}__link`;
+  $ const classNames = [elementName, ...linkMods(input.href).map(mod => `${elementName}--${mod}`)];
+  <marko-web-link
+    href=input.href
+    title=input.title
+    target=input.target
+    class=classNames
+  >
+    <if(input.icon)>
+      <marko-web-icon name=input.icon attrs={ title: input.label } class=`${blockName}__icon` />
+      <if(input.forceLabel)>
+        <span class=`${blockName}__label`>
+          $!{input.label}
+        </span>
+      </if>
+    </if>
+    <else>
+      <span class=`${blockName}__label`>
+        $!{input.label}
+      </span>
+    </else>
+  </marko-web-link>
+</marko-web-element>

packages/marko-web-theme-monorail/components/site-navbar/items.marko

@@ -0,0 +1,26 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import { asObject } from "@parameter1/base-cms-utils";
+import getNavItems from "./utils/get-nav-items";
+
+$ const blockName = input.blockName || "site-navbar";
+$ const items = getAsArray(input, "items");
+$ const regEnabled = input.regEnabled != null ? input.regEnabled : false;
+$ const hasUser = input.hasUser != null ? input.hasUser : false;
+
+<if(items.length)>
+  <marko-web-element tag="ul" block-name=blockName name="items" modifiers=input.modifiers>
+    <for|item| of=getNavItems({ items, hasUser, regEnabled })>
+      $ const obj = asObject(item);
+      <theme-site-navbar-item
+        block-name=blockName
+        href=obj.href
+        title=obj.title
+        target=obj.target
+        label=obj.label
+        icon=obj.icon
+        force-label=obj.forceLabel
+        modifiers=obj.modifiers
+      />
+    </for>
+  </marko-web-element>
+</if>

packages/marko-web-theme-monorail/components/site-navbar/logo.marko

@@ -0,0 +1,15 @@
+$ const blockName = input.blockName || "site-navbar";
+$ const elementName = input.name || "logo";
+$ const classNames = [`${blockName}__${elementName}`, input.class];
+$ const lazyload = input.lazyload != null ? input.lazyload : false;
+$ const loading = (lazyload) ? "lazy" : null;
+
+<img
+  class=classNames
+  alt=input.alt
+  src=input.src
+  srcset=input.srcset
+  loading=loading
+  width=input.width
+  height=input.height
+>

packages/marko-web-theme-monorail/components/site-navbar/marko.json

@@ -0,0 +1,17 @@
+{
+  "<theme-site-navbar>": {
+    "template": "./index.marko"
+  },
+  "<theme-site-navbar-brand>": {
+    "template": "./brand.marko"
+  },
+  "<theme-site-navbar-logo>": {
+    "template": "./logo.marko"
+  },
+  "<theme-site-navbar-items>": {
+    "template": "./items.marko"
+  },
+  "<theme-site-navbar-item>": {
+    "template": "./item.marko"
+  }
+}

packages/marko-web-theme-monorail/components/site-navbar/utils/get-nav-items.js

@@ -0,0 +1,21 @@
+const { asArray } = require('@parameter1/base-cms-utils');
+
+module.exports = ({
+  regEnabled,
+  hasUser,
+  items,
+}) => asArray(items.filter((item) => {
+  const { when, href } = item;
+  if (!href) return false;
+  if (!when) return true;
+  if (!regEnabled) return false;
+  if (hasUser) {
+    if (when === 'logged-in') return true;
+    if (when === 'logged-out') return false;
+  }
+  if (!hasUser) {
+    if (when === 'logged-in') return false;
+    if (when === 'logged-out') return true;
+  }
+  return false;
+}));

packages/marko-web-theme-monorail/components/site-navbar/utils/is-active-link.js

@@ -0,0 +1 @@
+module.exports = (requestPath, navItemPath) => requestPath.indexOf(navItemPath) === 0;