Prerelease navbar

package.json

@@ -20,6 +20,10 @@
       {
         "name": "alpha",
         "prerelease": true
+      },
+      {
+        "name": "prerelease_navbar",
+        "prerelease": true
       }
     ]
   },

src/custom/docs/components/navmenu/NavigationMenu.tsx

@@ -3,16 +3,19 @@ import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
+  NavigationMenuTrigger,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
+  NavigationMenuContent,
 } from 'src'
 
-import { Link } from './config'
+import { RegularLink } from './config'
 import { NavConfig } from './schema'
+import NextLink from 'next/link'
+
 
 export const Navigation = (props: {
   activePath: string
-  linkComponent: Link
+  linkComponent: typeof NextLink  | typeof RegularLink
 } & Pick<NavConfig, 'navTextLinks'>) => {
   const isActivePath = (activePath: string, path: string) => {
     return activePath.startsWith(path)
@@ -23,15 +26,37 @@ export const Navigation = (props: {
         { props.navTextLinks.map((item) => {
           return (
             <NavigationMenuItem key={item.title}>
-              <NavigationMenuLink
-                className={navigationMenuTriggerStyle()}
-                asChild
-                active={isActivePath(props.activePath, item.href)}
-              >
-                <props.linkComponent href={item.href}>
-                  {item.title}
-                </props.linkComponent>
-              </NavigationMenuLink>
+              <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> 
+                  <li className="row-span-4">
+                    <NavigationMenuLink asChild>
+                      <props.linkComponent
+                        className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                        href={item.href}
+                      >
+                        {item.logo}
+                        <p className="text-sm leading-tight text-muted-foreground py-6">
+                          {item.description}
+                        </p>
+                      </props.linkComponent>
+                    </NavigationMenuLink>
+                  </li>
+                  { item.dropDown.map((subtitle) => {
+                    return (
+                    <li>
+                      <NavigationMenuLink asChild>
+                        <props.linkComponent
+                          className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                          href={subtitle.href}
+                        >
+                          <div className="text-sm font-medium leading-none">{subtitle.title}</div>
+                        </props.linkComponent>
+                      </NavigationMenuLink>
+                    </li>
+                  )})}
+                  </ul>
+                </NavigationMenuContent>
             </NavigationMenuItem>
           )
         })}

src/custom/docs/components/navmenu/config.tsx

@@ -16,5 +16,4 @@ export const navConfigSchema = z.object({
 
 
 export type ActivePaths = (z.infer<typeof navConfigSchema>['navTextLinks'])[number]['href']
-const defaultLink = (props: ComponentProps<'a'>) => <a {...props}></a>
-export type Link = typeof defaultLink
+export const RegularLink = (props: ComponentProps<'a'>) => <a {...props}></a>

src/custom/docs/components/navmenu/index.tsx

@@ -1,57 +1,166 @@
 'use client'
 import { Navigation } from './NavigationMenu'
-import { ComponentProps } from 'react'
-import { Link } from './config'
+import NextLink from 'next/link'
 import { QuantinuumLogo } from './QuantinuumLogo'
 import { MobileMenu } from './MobileMenu'
 import { QuantinuumIdent } from './QuantinuumIdent'
 import { ModeSelector } from './ModeSelector'
-import { NavConfig } from './schema'
+import { RegularLink } from './config'
+import React from 'react'
+import { HSeriesLogo } from '../logos/HSeriesLogo'
+import { NexusLogo } from '../logos/NexusLogo'
+import { TKETLogo } from '../logos/TKETLogo'
+import { InquantoLogo } from '../logos/InQuantoLogo'
+import { LambeqLogo } from '../logos/LambeqLogo'
+
+
+const navConfig = {
+  navTextLinks: [
+    {
+      title: 'H-Series',
+      href: '/h-series/index.html',
+      pathMatch: 'somewhere',
+      logo: <HSeriesLogo width={150 * 1.5} height={16 * 1.5}></HSeriesLogo>,
+      description: "Quantinuum's QCCD ion-trap hardware, the world's highest peforming quantum computer.",
+      dropDown: [{
+        title: "Guides",
+        href: "/h-series/guides.html",
+      },{
+        title: "Getting Started",
+        href: "/h-series/trainings/getting_started/getting_started_index.html",
+      },{
+        title: "Knowledge Articles",
+        href: "/h-series/trainings/knowledge_articles/ka_index.html",
+      },{
+        title: "Support",
+        href: "/h-series/support.html",
+      }]
+    }, {
+      title: 'Nexus',
+      href: '/nexus/index.html',
+      pathMatch: 'somewhere',
+      logo: <NexusLogo variant="horizontal"  className="h-10 w-48 -mt-1"  />,
+      description: "Cloud platform connecting users with hardware and compilation services, alongside associated data.",
+      dropDown: [{
+        title: 'Guides',
+        href: '/nexus/guides.html',
+      },
+      {
+        title: 'Trainings',
+        href: '/nexus/trainings/getting_started.html',
+      },
+      {
+        title: 'API Reference',
+        href: '/nexus/api_index.html',
+      },
+      {
+        title: 'Support',
+        href: '/nexus/support_index.html',
+      },]
+    }, {
+      title: "TKET",
+      href: "/tket/index.html",
+      pathMatch: "",
+      logo: <TKETLogo className="h-8 w-32" ></TKETLogo>,
+      description: "Quantum computing toolkit and optimizing compiler",
+      dropDown: [{
+          title: 'API Docs',
+          href: '/tket/api-docs',
+        },{
+          title: 'User Guide',
+          href: '/tket/user-guide',
+      },{
+          title: 'Blog',
+          href: '/tket/blog/',
+        },]
+    }, {
+      title: "InQuanto",
+      href: "/inquanto/index.html",
+      pathMatch: "",
+      logo: <InquantoLogo className="h-8 w-56"></InquantoLogo>,
+      description: "Toolkit for complex molecular and materials simulations",
+      dropDown: [{
+          title: 'Introduction',
+          href: '/inquanto/introduction/overview.html',
+        },
+        {
+          title: 'User Guide',
+          href: '/inquanto/manual/howto.html',
+        },
+        {
+          title: 'Tutorials',
+          href: '/inquanto/tutorials/tutorial_overview.html',
+        },
+        {
+          title: 'Examples',
+          href: '/inquanto/tutorials/examples_overview.html',
+        },
+        {
+          title: 'API Reference',
+          href: '/inquanto/api/inquanto_api_intro.html',
+        },]
+    }, {
+      title: "\u03BBambeq",
+      href: "/lambeq/index.html",
+      logo: <LambeqLogo className="h-8 w-48"></LambeqLogo>,
+      description: "A Python toolkit for quantum natural language processing",
+      dropDown: [{
+        title: 'Getting Started',
+        href: '/lambeq/intro.html',
+      },
+      {
+        title: 'User Guide',
+        href: '/lambeq/pipeline.html',
+      },
+      {
+        title: 'Tutorials',
+        href: '/lambeq/tutorials/sentence-input.html',
+      },
+      {
+        title: 'Code Examples',
+        href: '/lambeq/notebooks.html',
+      },
+      {
+        title: 'API Reference',
+        href: '/lambeq/root-api.html',
+      },]
+    }
+  ],
+}
+
 
 export const NavBar = (props: {
-  linkComponent?: Link
+  linkComponent: typeof NextLink  | typeof RegularLink
   activePath: string
   enableModeSelector?: boolean
-} & NavConfig) => {
-  const Link = props.linkComponent
-    ? props.linkComponent
-    : (props: ComponentProps<'a'>) => <a {...props}></a>
+}) => {
   return (
     <div className="bg-background text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm">
       <div className=" bg-background px-3 md:px-4 mx-auto max-w-[90rem] flex h-14 items-center justify-between">
         <div className="mr-4 flex items-center">
           <div className='block md:hidden mr-3'>
-            <MobileMenu {...props}/>
+            <MobileMenu {...navConfig}/>
           </div>
           <div className="whitespace-nowrap flex items-center gap-2">
-          <a href="https://docs.quantinuum.com/" aria-label='Quantinuum Docs' title="Quantinuum Docs"   className='hover:cursor-pointer hover:opacity-50 transition'>
+          <a href="/" aria-label='Quantinuum Documentation' title="Quantinuum Documentation" className='hover:cursor-pointer hover:opacity-50 transition'>
             <div className='hidden sm:block'><QuantinuumLogo />
             </div>
             <div className='block sm:hidden'>
               <QuantinuumIdent/>
             </div>
             </a>
-            {props.navProductName !== '' ? <div className="text-muted-foreground text-xs font-medium flex items-center gap-1.5">
-              <div className='mx-0.5 text-muted-foreground/50'>|</div><div>{props.navProductName}</div>
-            </div> : null}
+            <div className="text-muted-foreground text-xs font-medium flex items-center gap-1.5">
+              <div className='mx-0.5 text-muted-foreground/50'>|</div><div>Documentation</div>
+            </div>
           </div>
-          <Link href="/" className="ml-4 mr-4 flex items-center space-x-2">
+          <props.linkComponent href="/" className="ml-4 mr-4 flex items-center space-x-2">
             <span className="hidden font-bold">Quantinuum</span>
-          </Link>
+          </props.linkComponent>
 
         </div>
         <div className="flex items-center gap-5">
-
-        <Navigation activePath={props.activePath} linkComponent={Link} navTextLinks={props.navTextLinks} />
-          <div className="flex items-center gap-2">
-            {props.navIconLinks.map(link => {
-                return <Link href={link.href} target='_blank' key={link.title}>
-               <img src={link.iconImageURL} className='dark:invert flex-shrink-0 min-w-6 max-w-6 min-h-6 max-h-6 hover:opacity-70 transition'></img>
-             </Link>
-            })}
-          </div>
-
-          {props.enableModeSelector ?  <>     <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
+          <Navigation activePath={props.activePath} linkComponent={props.linkComponent} navTextLinks={navConfig.navTextLinks} />
+          {props.enableModeSelector ? <> <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
         </div>
       </div>
     </div>

src/custom/docs/components/navmenu/schema.tsx

@@ -1,18 +1,25 @@
 import { ComponentProps } from 'react'
+import React from 'react';
 import { z } from 'zod';
 
-
+const dropDownSchema = z.object({
+    href: z.string(),
+    title: z.string(), 
+});
 const linkSchema = z.object({
     href: z.string(),
     title: z.string(),
+    logo: z.custom<React.JSX.Element>(
+        e => (e as any)?.$$typeof === Symbol.for("react.element"),
+        "value must be a React Element"
+    ),
+    description: z.string(),
     external: z.boolean().optional(),
+    dropDown: z.array(dropDownSchema),
 });
 export const navConfigSchema = z.object({
     navTextLinks: z.array(linkSchema),
-    navIconLinks: z.array(z.intersection(linkSchema, z.object({iconImageURL: z.string()}))),
-    navProductName: z.string()
 })
 export type NavConfig = z.infer<typeof navConfigSchema>
 export type ActivePaths = (NavConfig['navTextLinks'])[number]['href']
-const defaultLink = (props: ComponentProps<'a'>) => <a {...props}></a>
-export type Link = typeof defaultLink
+export const RegularLink = (props: ComponentProps<'a'>) => <a {...props}></a>

src/custom/docs/scripts/nav/index.tsx

@@ -1,5 +1,6 @@
 
 import {createRoot} from "react-dom/client" 
+import { ComponentProps } from "react";
 import { NavBar } from "../../components/navmenu";
 import { navConfigSchema } from '../../components/navmenu/schema';
 
@@ -17,6 +18,6 @@ import { navConfigSchema } from '../../components/navmenu/schema';
       navProductName: typeof navProductName !== "undefined" ? navProductName : null
   })
     root.render(
-      <div className="use-tailwind">  <div className="antialiased" style={{fontFamily: `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`}}><NavBar activePath="" {...navConfig}></NavBar> </div></div>
+      <div className="use-tailwind">  <div className="antialiased" style={{fontFamily: `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`}}><NavBar activePath="/" linkComponent={(props: ComponentProps<'a'>) => <a {...props}></a>}></NavBar> </div></div>
     )
   })()

stories/custom/docs-nav.stories.tsx

@@ -1,58 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import {DocsNavBar } from "src";
-const navConfig = {
-    navTextLinks: [
-      {
-        title: 'Nexus Concepts',
-        href: 'concepts/projects.html',
-        pathMatch: 'somewhere',
-      },
-      {
-        title: 'User Guide',
-        href: 'user_guide/sign_up.html',
-        pathMatch: 'somewhere',
-      },
-      {
-        title: 'Admin Guide',
-        href: 'admin_guide/quotas.html',
-        pathMatch: 'somewhere',
-      },
-      {
-        title: 'Code Examples',
-        href: 'examples/overview.html',
-        pathMatch: 'somewhere',
-      },
-      {
-        title: 'API Reference',
-        href: '"qnexus_api/auth.html',
-        pathMatch: 'somewhere',
-      },
-    ],
-    navProductName: 'Nexus',
-    navIconLinks: [
-      {
-        title: 'TKET Github',
-        href: 'https://github.com/CQCL/tket',
-        pathMatch: 'somewhere',
-        iconImageURL: '/github.svg',
-      },
-      {
-        title: 'TKET Slack Channel',
-        href: 'https://tketusers.slack.com/',
-        pathMatch: 'somewhere',
-        iconImageURL: '/slack.svg',
-      },
-      {
-        title: 'TKET Stack Exchange',
-        href: 'https://quantumcomputing.stackexchange.com/questions/tagged/pytket',
-        pathMatch: 'somewhere',
-        iconImageURL: '/stack.svg',
-      },
-    ],
-  }
 
 export function DocsNavDemo() {
-  return <DocsNavBar {...navConfig }activePath="/" />;
+  return <DocsNavBar activePath="/" linkComponent={(props: ComponentProps<'a'>) => <a {...props}></a>} />;
 }
 
 const meta: Meta<typeof DocsNavDemo> = {