[WWW]: Add Contact to Nav (#165)

apps/www/src/components/MainNavSubLinks.tsx

@@ -0,0 +1,22 @@
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+} from "@/components/ui/NavigationMenu";
+import { cn } from "@/lib/utils";
+import type { NavItem } from "@/types";
+import { SubLinks } from "./SubLinks";
+
+export const MainNavSubLinks: React.FC<{
+  navItem: NavItem;
+  titleClass: string;
+}> = ({ navItem, titleClass }) => (
+  <NavigationMenuItem>
+    <NavigationMenuTrigger className={cn(titleClass, "-mx-4")}>
+      {navItem.title}
+    </NavigationMenuTrigger>
+    <NavigationMenuContent>
+      <SubLinks navItem={navItem} />
+    </NavigationMenuContent>
+  </NavigationMenuItem>
+);

apps/www/src/components/SubLinks.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+import type { NavItem } from "@/types";
+
+export const SubLinks: React.FC<{
+  navItem: NavItem;
+}> = ({ navItem }) => (
+  <ul className="grid gap-3 p-4 grid-cols-1 lg:w-[300px] ">
+    {navItem.subLinks?.map((subLink) => (
+      <li key={subLink.href}>
+        <a
+          href={subLink.href}
+          className={cn(
+            "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
+          )}
+        >
+          <div className="flex flex-col text-sm font-medium leading-none gap-2">
+            <span>{subLink.title}</span>
+            <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+              {subLink.description}
+            </p>
+          </div>
+        </a>
+      </li>
+    ))}
+  </ul>
+);

apps/www/src/components/layout/MainNav.tsx

@@ -0,0 +1,47 @@
+import { cn, extractSegmentURL } from "@/lib/utils";
+import type { MainNavItem } from "@/types";
+import { MainNavSubLinks } from "../MainNavSubLinks";
+import { NavigationMenu, NavigationMenuList } from "../ui/NavigationMenu";
+
+type Props = {
+  items: MainNavItem[];
+  pathname: string;
+};
+
+export const MainNav: React.FC<Props> = ({ items, pathname }) => {
+  const segment = extractSegmentURL(pathname);
+
+  return items?.length ? (
+    <NavigationMenu>
+      <NavigationMenuList className="hidden gap-6 md:flex">
+        {items?.map((item) => {
+          const titleClass = cn(
+            "hover:text-foreground/80 flex items-center text-lg font-medium sm:text-sm",
+            item.href?.startsWith(`/${segment}`)
+              ? "text-foreground"
+              : "text-foreground/60",
+            item.disabled && "cursor-not-allowed opacity-80",
+          );
+          if (item.subLinks) {
+            return (
+              <MainNavSubLinks
+                key={item.title}
+                navItem={item}
+                titleClass={titleClass}
+              />
+            );
+          }
+          return (
+            <a
+              key={item.href}
+              href={item.disabled ? "#" : item.href}
+              className={titleClass}
+            >
+              {item.title}
+            </a>
+          );
+        })}
+      </NavigationMenuList>
+    </NavigationMenu>
+  ) : null;
+};

apps/www/src/components/layout/SheetMobileNav.tsx

@@ -52,7 +52,7 @@ export const SheetMobileNav = ({
                         href={item.href}
                         className="text-muted-foreground"
                         onClick={() =>
-                          item.href.startsWith("/#")
+                          item.href?.startsWith("/#")
                             ? setOpen(false)
                             : undefined
                         }
@@ -77,22 +77,27 @@ export const SheetMobileNav = ({
                   return (
                     <div key={index} className="flex flex-col space-y-3 pt-6">
                       <h4 className="font-medium">{item.title}</h4>
-                      {activeItems.map((subItem, idx) => (
-                        <React.Fragment key={subItem.href + idx}>
-                          {subItem.href ? (
-                            <a
-                              href={subItem.href}
-                              target={subItem?.external ? "_blank" : undefined}
-                              rel="noreferrer"
-                              className="text-muted-foreground"
-                            >
-                              {subItem.title}
-                            </a>
-                          ) : (
-                            subItem.title
-                          )}
-                        </React.Fragment>
-                      ))}
+                      {activeItems.map((subItem, idx) => {
+                        if (!subItem.href) return null;
+                        return (
+                          <React.Fragment key={subItem.href + idx}>
+                            {subItem.href ? (
+                              <a
+                                href={subItem.href}
+                                target={
+                                  subItem?.external ? "_blank" : undefined
+                                }
+                                rel="noreferrer"
+                                className="text-muted-foreground"
+                              >
+                                {subItem.title}
+                              </a>
+                            ) : (
+                              subItem.title
+                            )}
+                          </React.Fragment>
+                        );
+                      })}
                     </div>
                   );
                 })}

apps/www/src/config/marketing.tsx

@@ -12,6 +12,28 @@ export const marketingConfig: MarketingConfig = {
       title: "Changelog",
       href: `${siteConfig.links.github}/releases`,
     },
+
+    {
+      title: "Contact",
+      href: "/contact",
+      subLinks: [
+        {
+          title: "Email us",
+          description: "[email protected]",
+          href: `mailto:[email protected]`,
+        },
+        {
+          title: "Open a Github issue",
+          description: "For a bug or feature request",
+          href: `${siteConfig.links.github}/issues/new`,
+        },
+        {
+          title: "Get help on Discord",
+          description: "Ask questions on Discord",
+          href: siteConfig.links.discord,
+        },
+      ],
+    },
     {
       title: "About",
       href: "/about",

apps/www/src/layouts/MainLayout.astro

@@ -10,7 +10,7 @@ import { siteConfig } from "@/config/site";
 import { Icon } from "astro-icon/components";
 import { marketingConfig } from "@/config/marketing";
 import { docsConfig } from "@/config/docs";
-import MainNav from "@/components/layout/MainNav.astro";
+import { MainNav } from "@/components/layout/MainNav";
 
 type Props = {
   title: string;
@@ -24,7 +24,12 @@ const { title, description, mainClass, bodyClass } = Astro.props;
 
 <BaseLayout title={title} description={description} bodyClass={bodyClass}>
   <Header className="border-b">
-    <MainNav items={marketingConfig.mainNav} slot="left-header" />
+    <MainNav
+      items={marketingConfig.mainNav}
+      pathname={Astro.url.pathname}
+      slot="left-header"
+      client:load
+    />
     <SheetMobileNav
       mainNavItems={marketingConfig.mainNav}
       sidebarNavItems={docsConfig.sidebarNav}

apps/www/src/pages/about.astro

@@ -17,8 +17,8 @@ import { siteConfig } from "@/config/site";
           <br />
           <br />If you have any questions or just want to say hi, you can reach
           me on <a class="link" href={siteConfig.links.discord}>discord</a> or via
-          email <a class="link" href="mailto:richard@rgill.co.uk"
-            >richard@rgill.co.uk</a
+          email <a class="link" href="mailto:richard@llm-ui.com"
+            >richard@llm-ui.com</a
           >.
         </p>
       </div>

apps/www/src/pages/contact.astro

@@ -0,0 +1,19 @@
+---
+import { SubLinks } from "@/components/SubLinks";
+import MainLayout from "@/layouts/MainLayout.astro";
+import { marketingConfig } from "@/config/marketing";
+const contact = marketingConfig.mainNav.find((n) => n.title === "Contact");
+if (!contact) {
+  throw new Error("Contact nav item not found");
+}
+---
+
+<MainLayout title="Contact">
+  <section class="h-full space-y-5">
+    <section
+      class="container relative mb-28 mt-40 max-w-screen-md sm:mt-20 lg:mt-28"
+    >
+      <SubLinks navItem={contact} />
+    </section>
+  </section>
+</MainLayout>

apps/www/src/pages/demo/presentation/25.astro

@@ -5,7 +5,7 @@ import { AvatarComponent } from "@/components/ui/custom/AvatarComponent";
 
 <Slide>
   <h1 class="font-heading text-7xl">llm-ui.com</h1>
-  <h1 class="mt-8 text-3xl">hi@llm-ui.com</h1>
+  <h1 class="mt-8 text-3xl">richard@llm-ui.com</h1>
   <div class="flex flex-row items-center gap-4 pt-10">
     <AvatarComponent
       client:load

apps/www/src/types/index.ts

@@ -2,9 +2,10 @@ import type { ReactNode } from "react";
 
 export type NavItem = {
   title: string;
-  href: string;
+  href?: string;
   disabled?: boolean;
   isDesktopOnly?: boolean;
+  subLinks?: { title: string; description: string; href: string }[];
 };
 export type MenuItem = NavItem & {
   image?: string;