From 11c5adf02915e776d4102429772659549d56efad Mon Sep 17 00:00:00 2001
From: Brandon Krigbaum <brandonbk@gmail.com>
Date: Tue, 7 Jun 2022 10:43:11 -0500
Subject: [PATCH 1/4] Add theme-site-navbar components

---
 .../components/marko.json                     |  3 +-
 .../components/site-navbar/brand.marko        |  8 ++++
 .../components/site-navbar/index.marko        | 13 ++++++
 .../components/site-navbar/item.marko         | 46 +++++++++++++++++++
 .../components/site-navbar/items.marko        | 26 +++++++++++
 .../components/site-navbar/logo.marko         | 15 ++++++
 .../components/site-navbar/marko.json         | 17 +++++++
 .../site-navbar/utils/get-nav-items.js        | 21 +++++++++
 .../site-navbar/utils/is-active-link.js       |  1 +
 9 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/brand.marko
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/index.marko
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/item.marko
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/items.marko
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/logo.marko
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/marko.json
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/utils/get-nav-items.js
 create mode 100644 packages/marko-web-theme-monorail/components/site-navbar/utils/is-active-link.js

diff --git a/packages/marko-web-theme-monorail/components/marko.json b/packages/marko-web-theme-monorail/components/marko.json
index 9aa3e55f5..40b777fa5 100644
--- a/packages/marko-web-theme-monorail/components/marko.json
+++ b/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"
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/brand.marko b/packages/marko-web-theme-monorail/components/site-navbar/brand.marko
new file mode 100644
index 000000000..f4838e97b
--- /dev/null
+++ b/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>
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/index.marko b/packages/marko-web-theme-monorail/components/site-navbar/index.marko
new file mode 100644
index 000000000..15260100c
--- /dev/null
+++ b/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>
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/item.marko b/packages/marko-web-theme-monorail/components/site-navbar/item.marko
new file mode 100644
index 000000000..8557aa7a0
--- /dev/null
+++ b/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>
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/items.marko b/packages/marko-web-theme-monorail/components/site-navbar/items.marko
new file mode 100644
index 000000000..f2b430404
--- /dev/null
+++ b/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>
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/logo.marko b/packages/marko-web-theme-monorail/components/site-navbar/logo.marko
new file mode 100644
index 000000000..297b331e2
--- /dev/null
+++ b/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
+>
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/marko.json b/packages/marko-web-theme-monorail/components/site-navbar/marko.json
new file mode 100644
index 000000000..b030c2501
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/utils/get-nav-items.js b/packages/marko-web-theme-monorail/components/site-navbar/utils/get-nav-items.js
new file mode 100644
index 000000000..58a7909ed
--- /dev/null
+++ b/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;
+}));
diff --git a/packages/marko-web-theme-monorail/components/site-navbar/utils/is-active-link.js b/packages/marko-web-theme-monorail/components/site-navbar/utils/is-active-link.js
new file mode 100644
index 000000000..097ac2351
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-navbar/utils/is-active-link.js
@@ -0,0 +1 @@
+module.exports = (requestPath, navItemPath) => requestPath.indexOf(navItemPath) === 0;

From 971d0b3dd22f6ae72d3ae59a09fea0041a969c98 Mon Sep 17 00:00:00 2001
From: Brandon Krigbaum <brandonbk@gmail.com>
Date: Tue, 7 Jun 2022 10:43:26 -0500
Subject: [PATCH 2/4] Add theme-site-header component

---
 .../components/marko.json                     |  3 +
 .../components/site-header.marko              | 57 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/marko-web-theme-monorail/components/site-header.marko

diff --git a/packages/marko-web-theme-monorail/components/marko.json b/packages/marko-web-theme-monorail/components/marko.json
index 40b777fa5..fd3dd5106 100644
--- a/packages/marko-web-theme-monorail/components/marko.json
+++ b/packages/marko-web-theme-monorail/components/marko.json
@@ -23,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"
   },
diff --git a/packages/marko-web-theme-monorail/components/site-header.marko b/packages/marko-web-theme-monorail/components/site-header.marko
new file mode 100644
index 000000000..5915e4023
--- /dev/null
+++ b/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>

From 7d75bdb1bae47e911b4a30c13d962a889046dfcd Mon Sep 17 00:00:00 2001
From: Josh Worden <solocommand@gmail.com>
Date: Tue, 7 Jun 2022 11:29:21 -0500
Subject: [PATCH 3/4] Update
 packages/marko-web-theme-monorail/components/site-navbar/item.marko

---
 .../marko-web-theme-monorail/components/site-navbar/item.marko  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-theme-monorail/components/site-navbar/item.marko b/packages/marko-web-theme-monorail/components/site-navbar/item.marko
index 8557aa7a0..ec9c4cca0 100644
--- a/packages/marko-web-theme-monorail/components/site-navbar/item.marko
+++ b/packages/marko-web-theme-monorail/components/site-navbar/item.marko
@@ -6,7 +6,7 @@ $ const { req } = out.global;
 $ const blockName = input.blockName || "site-navbar";
 $ const linkMods = (href) => {
   const mods = [];
-  if (isActiveLink(req.path, href)) mods.push('active');
+  if (isActiveLink(req.path, href)) mods.push("active");
   return mods;
 };
 $ const containerMods = (href) => {

From dd58fee986284792f69ba44b3dfb77e97b72328c Mon Sep 17 00:00:00 2001
From: Josh Worden <solocommand@gmail.com>
Date: Tue, 7 Jun 2022 11:29:27 -0500
Subject: [PATCH 4/4] Update
 packages/marko-web-theme-monorail/components/site-navbar/item.marko

---
 .../marko-web-theme-monorail/components/site-navbar/item.marko  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-theme-monorail/components/site-navbar/item.marko b/packages/marko-web-theme-monorail/components/site-navbar/item.marko
index ec9c4cca0..85d31f445 100644
--- a/packages/marko-web-theme-monorail/components/site-navbar/item.marko
+++ b/packages/marko-web-theme-monorail/components/site-navbar/item.marko
@@ -11,7 +11,7 @@ $ const linkMods = (href) => {
 };
 $ const containerMods = (href) => {
   const mods = [...getAsArray(input, "modifiers")];
-  if (isActiveLink(req.path, href)) mods.push('active');
+  if (isActiveLink(req.path, href)) mods.push("active");
   return mods;
 };