dev: Additions to navigation

do-ob-io · Jun 13, 2024 · 975ed02 · 975ed02
1 parent 2ba4f35
commit 975ed02
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git 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
@@ -15,16 +15,16 @@ 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">
         <div className={clsx(color && colors, 'flex gap-1 rounded-full px-4 py-1')}>
           <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
@@ -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
@@ -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
@@ -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;