From 975ed02a89caf0658a5991271e93b8ca50161c2e Mon Sep 17 00:00:00 2001
From: "eric.crowell" <eric.crowell@ecrow.dev>
Date: Fri, 14 Jun 2024 01:25:57 +0200
Subject: [PATCH] dev: Additions to navigation

---
 .../ui/src/Navigation/Navigation.stories.tsx  | 14 +++++
 .../ui/src/Navigation/NavigationIsland.tsx    |  6 +--
 .../ui/src/Navigation/NavigationStandard.tsx  |  9 +++-
 .../Navigation/parts/NavigationPart_Brand.tsx |  4 +-
 .../Navigation/parts/NavigationPart_Links.tsx | 53 ++++++++++++++++---
 5 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/Navigation/Navigation.stories.tsx b/packages/ui/src/Navigation/Navigation.stories.tsx
index 8ad3d7e..c2f53dc 100644
--- a/packages/ui/src/Navigation/Navigation.stories.tsx
+++ b/packages/ui/src/Navigation/Navigation.stories.tsx
@@ -26,6 +26,20 @@ const links: Link[] = [
   {
     title: 'Contact',
     url: '#contact',
+    links: [
+      {
+        title: 'Location',
+        url: '#location',
+      },
+      {
+        title: 'Email',
+        url: '#email',
+      },
+      {
+        title: 'Phone',
+        url: '#phone',
+      },
+    ],
   },
 ];
 
diff --git a/packages/ui/src/Navigation/NavigationIsland.tsx b/packages/ui/src/Navigation/NavigationIsland.tsx
index fb11467..c110927 100644
--- a/packages/ui/src/Navigation/NavigationIsland.tsx
+++ b/packages/ui/src/Navigation/NavigationIsland.tsx
@@ -15,8 +15,8 @@ export function NavigationIsland({
   const [ colors ] = twColors(color);
 
   return (
-    <Navbar>
-      <NavbarContent justify="start" className="py-3">
+    <Navbar className="items-center justify-center">
+      <NavbarContent justify="start" className="flex items-center">
         <NavigationPart_Brand title={title} />
       </NavbarContent>
       <NavbarContent justify="center">
@@ -24,7 +24,7 @@ export function NavigationIsland({
           <NavigationPart_Links links={links} />
         </div>
       </NavbarContent>
-      <NavbarContent justify="start">
+      <NavbarContent justify="end">
 
       </NavbarContent>
     </Navbar>
diff --git a/packages/ui/src/Navigation/NavigationStandard.tsx b/packages/ui/src/Navigation/NavigationStandard.tsx
index 884c98c..aeaa221 100644
--- a/packages/ui/src/Navigation/NavigationStandard.tsx
+++ b/packages/ui/src/Navigation/NavigationStandard.tsx
@@ -3,19 +3,26 @@ import { twColors } from '@do-ob/ui/utility';
 import { clsx } from '@do-ob/core';
 import type { NavigationProps } from './Navigation';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
+import { NavigationPart_Links } from './parts/NavigationPart_Links';
 
 export function NavigationStandard({
   title,
   color,
+  links,
 }: NavigationProps) {
 
   const [ colors ] = twColors(color);
 
   return (
     <Navbar className={clsx(color && colors)}>
-      <NavbarContent>
+      <NavbarContent justify="start">
         <NavigationPart_Brand title={title} />
       </NavbarContent>
+
+      <NavbarContent justify="center">
+        <NavigationPart_Links links={links} />
+      </NavbarContent>
+
     </Navbar>
   );
 }
diff --git a/packages/ui/src/Navigation/parts/NavigationPart_Brand.tsx b/packages/ui/src/Navigation/parts/NavigationPart_Brand.tsx
index 53c017a..01e3a92 100644
--- a/packages/ui/src/Navigation/parts/NavigationPart_Brand.tsx
+++ b/packages/ui/src/Navigation/parts/NavigationPart_Brand.tsx
@@ -1,4 +1,4 @@
-import { NavbarBrand } from '@nextui-org/react';
+import { NavbarBrand, Link } from '@nextui-org/react';
 
 /**
  * Navigation Brand properties
@@ -18,7 +18,7 @@ export function NavigationPart_Brand({
 }: NavigationPart_BrandProps) {
   return (
     <NavbarBrand>
-      <h1 className="text-2xl">{title}</h1>
+      <Link href="/" className="text-lg text-inherit">{title}</Link>
     </NavbarBrand>
   );
 }
diff --git a/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx b/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx
index 1009144..b16de1b 100644
--- a/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx
+++ b/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx
@@ -1,4 +1,5 @@
-import { NavbarMenuItem, Link, Button } from '@nextui-org/react';
+import { NavbarMenuItem, Link, Button, Popover, PopoverTrigger, PopoverContent } from '@nextui-org/react';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import { Link as LinkType } from '@do-ob/ui/types';
 
 /**
@@ -11,18 +12,56 @@ export interface NavigationPart_LinksProps {
   links?: LinkType[];
 }
 
+function LinkLeaf({ link }: { link: LinkType }) {
+  return (
+    <NavbarMenuItem>
+      <Button
+        as={Link}
+        href={link.url}
+        variant="light"
+        className="text-inherit"
+      >
+        {link.title}
+      </Button>
+    </NavbarMenuItem>
+  );
+}
+
+function LinkBranch({ link }: { link: LinkType }) {
+  return (
+    <Popover
+      placement="bottom"
+    >
+      <NavbarMenuItem>
+        <PopoverTrigger>
+          <Button
+            variant="light"
+            className="text-inherit"
+            endContent={<ChevronDownIcon className="size-4" />}
+          >
+            {link.title}
+          </Button>
+        </PopoverTrigger>
+      </NavbarMenuItem>
+      <PopoverContent className="min-w-32 items-start p-2">
+        <Link href={link.url} className="w-full rounded px-4 py-2 text-inherit">
+          {link.title}
+        </Link>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /**
  * Navigation Links component
  */
 export function NavigationPart_Links({
   links = [],
 }: NavigationPart_LinksProps) {
-  return links.length ? links.map((link) => (
-    <NavbarMenuItem>
-      <Button as={Link} href={link.url} variant="light" className="text-inherit">
-        {link.title}
-      </Button>
-    </NavbarMenuItem>
+  return links.length ? links.map((link) => !link.links?.length ? (
+    <LinkLeaf key={link.title} link={link} />
+  ) : (
+    <LinkBranch key={link.title} link={link} />
   )) : (
     <NavbarMenuItem>
       &nbsp;