personal: add navbar and redesign footer; wire into header

packages/blog-starter-kit/themes/personal/components/footer.tsx

@@ -1,11 +1,55 @@
 import { useAppContext } from './contexts/appContext';
+import Link from 'next/link';
+
+function ArrowIcon() {
+	return (
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 12 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.07102 11.3494L0.963068 10.2415L9.2017 1.98864H2.83807L2.85227 0.454545H11.8438V9.46023H10.2955L10.3097 3.09659L2.07102 11.3494Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
 
 export const Footer = () => {
 	const { publication } = useAppContext();
 
 	return (
-		<footer className="border-t pt-10 text-sm text-neutral-500 dark:border-neutral-800 dark:text-neutral-400">
-			&copy; {new Date().getFullYear()} {publication.title}
+		<footer className="mb-16">
+			<ul className="font-sm mt-8 flex flex-col space-x-0 space-y-2 text-neutral-600 md:flex-row md:space-x-4 md:space-y-0 dark:text-neutral-300">
+				<li>
+					<a
+						className="flex items-center transition-all hover:text-neutral-800 dark:hover:text-neutral-100"
+						rel="noopener noreferrer"
+						target="_blank"
+						href="https://www.tiktok.com/@sparkaflame.ministry?_t=8mItUBwjNJt&_r=1"
+					>
+						<ArrowIcon />
+						<p className="ml-2 h-7">follow me</p>
+					</a>
+				</li>
+				<li>
+					<a
+						className="flex items-center transition-all hover:text-neutral-800 dark:hover:text-neutral-100"
+						rel="noopener noreferrer"
+						target="_blank"
+						href="https://sparkaflamehub.substack.com/"
+					>
+						<ArrowIcon />
+						<p className="ml-2 h-7">get email updates</p>
+					</a>
+				</li>
+			</ul>
+			<p className="mt-8 text-neutral-600 dark:text-neutral-300">
+				© {new Date().getFullYear()} MIT Licensed
+			</p>
 		</footer>
 	);
 };

packages/blog-starter-kit/themes/personal/components/navbar.tsx

@@ -0,0 +1,69 @@
+import Link from 'next/link';
+import { useAppContext } from './contexts/appContext';
+import { PublicationNavbarItem } from '../generated/graphql';
+
+type NavItem = {
+  href: string;
+  name: string;
+  external?: boolean;
+};
+
+function hasUrl(navbarItem: PublicationNavbarItem): navbarItem is PublicationNavbarItem & { url: string } {
+  return !!navbarItem.url && navbarItem.url.length > 0;
+}
+
+export function Navbar() {
+  const { publication } = useAppContext();
+
+  // fallback static items
+  const fallback: NavItem[] = [
+    { href: '/', name: 'home' },
+    { href: '/Projects', name: 'Project' },
+    { href: 'https://google.com', name: 'blog', external: true },
+  ];
+
+  const navItems: NavItem[] = publication?.preferences?.navbarItems
+    ? publication.preferences.navbarItems.filter(hasUrl).map((i) => ({ href: i.url, name: i.label || i.url, external: true }))
+    : fallback;
+
+  return (
+    <aside className="-ml-[8px] mb-16 tracking-tight">
+      <div className="lg:sticky lg:top-20">
+        <nav
+          className="flex flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative"
+          id="nav"
+        >
+          <div className="flex flex-row space-x-0 pr-10">
+            {navItems.map(({ href, name, external }) => {
+              if (external) {
+                return (
+                  <a
+                    key={href}
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2"
+                  >
+                    {name}
+                  </a>
+                );
+              }
+
+              return (
+                <Link
+                  key={href}
+                  href={href}
+                  className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2"
+                >
+                  {name}
+                </Link>
+              );
+            })}
+          </div>
+        </nav>
+      </div>
+    </aside>
+  );
+}
+
+export default Navbar;

packages/blog-starter-kit/themes/personal/components/personal-theme-header.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { PublicationNavbarItem } from '../generated/graphql';
 import { useAppContext } from './contexts/appContext';
 import { ToggleTheme } from './toggle-theme';
+import Navbar from './navbar';
 
 function hasUrl(
 	navbarItem: PublicationNavbarItem,
@@ -88,7 +89,7 @@ export const PersonalHeader = () => {
 				</div>
 			</div>
 			<div className="col-span-full flex flex-row items-center justify-between gap-4 md:col-span-1 md:justify-end">
-				<nav>{navList}</nav>
+				<nav className="hidden md:block">{navList}</nav>
 				<ToggleTheme className="hidden md:block" />
 				{/* <Button
           label=""
@@ -100,3 +101,13 @@ export const PersonalHeader = () => {
 		</header>
 	);
 };
+
+// Render Navbar below header on smaller screens / as sidebar on large
+export const HeaderWithNavbar = () => {
+	return (
+		<>
+			<PersonalHeader />
+			<Navbar />
+		</>
+	);
+};