feat(): stable navbar

* retrieve navbar dropdown tsx files * add story for docs navbar * feat(): pre-release * fix(): change prerelease name * fix(): change prerelease name to navbar * fix(): update link * fix(): revert to <a> tags for links * remove link footer component for trademark guidelines * remove redundant configs * convert links to use a tag * remove import and use of navschema in MobileMenu, NavigationMenu and scripts/nav/inedx.tsx
CQCL · Oct 10, 2024 · 2c5be12 · 2c5be12
1 parent 191bf2e
commit 2c5be12
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,10 @@
       {
         "name": "alpha",
         "prerelease": true
+      },
+      {
+        "name": "navbar",
+        "prerelease": true
       }
     ]
   },

diff --git a/src/custom/docs/components/footer/index.tsx b/src/custom/docs/components/footer/index.tsx
@@ -39,7 +39,7 @@ const footerConfig = {
           href: "https://www.quantinuum.com/about",
         }, {
           name: "Careers",
-          href: "https://www.quantinuum.com/publications",
+          href: "https://www.quantinuum.com/careers",
         },{
           name: "Events", 
           href: "https://www.quantinuum.com/events"
@@ -74,14 +74,9 @@ export const Footer = () => {
           <a target="_blank" href="https://www.quantinuum.com/privacy-statement" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>
             Privacy Policy
           </a><div>/</div>
-        </div>
-        <div className='flex items-center gap-2 mt-2'>
           <a target="_blank" href="https://www.quantinuum.com/cookie-notice" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>
             Cookie Notice
           </a><div>/</div>
-          <a target="_blank" href="https://cdn.prod.website-files.com/669960f53cd73aedb80c8eea/66d87306d9caeeb12196f409_666c39372d2febd0b0bedf71_Quantinuum%20Trademark%20Guidelines%20v1.1%20June%202024.pdf" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>
-            Trademark Guidelines
-          </a>
         </div>
       </div>
       <div className="grid grid-cols-1 gap-16 md:grid-cols-3 md:gap-24">

diff --git a/src/custom/docs/components/navmenu/MobileMenu.tsx b/src/custom/docs/components/navmenu/MobileMenu.tsx
@@ -8,9 +8,19 @@ import {
     DropdownMenuTrigger,
   } from "src"
 import { MenuIcon } from "lucide-react"
-import { NavConfig  } from "./schema"
 
-  export const MobileMenu = (props: Pick<NavConfig, 'navTextLinks'>) => {
+  export const MobileMenu = (props: {
+    navTextLinks: {
+      href: string,
+      title: string,
+      logo: JSX.Element,
+      description: string,
+      dropDown: {
+        href: string,
+        title: string, 
+      }[],
+    }[];
+  }) => {
     return <DropdownMenu>
     <DropdownMenuTrigger asChild><Button variant='outline' className="w-8 p-0 h-8"> <MenuIcon/></Button></DropdownMenuTrigger>
     <DropdownMenuContent>

diff --git a/src/custom/docs/components/navmenu/NavigationMenu.tsx b/src/custom/docs/components/navmenu/NavigationMenu.tsx
@@ -3,17 +3,25 @@ import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
+  NavigationMenuTrigger,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
+  NavigationMenuContent,
 } from 'src'
 
-import { Link } from './config'
-import { NavConfig } from './schema'
 
 export const Navigation = (props: {
-  activePath: string
-  linkComponent: Link
-} & Pick<NavConfig, 'navTextLinks'>) => {
+  activePath: string,
+  navTextLinks: {
+    href: string,
+    title: string,
+    logo: JSX.Element,
+    description: string,
+    dropDown: {
+      href: string,
+      title: string, 
+    }[],
+  }[];
+} ) => {
   const isActivePath = (activePath: string, path: string) => {
     return activePath.startsWith(path)
   }
@@ -23,15 +31,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>
+                      <a
+                        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>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                  { item.dropDown.map((subtitle) => {
+                    return (
+                    <li>
+                      <NavigationMenuLink asChild>
+                        <a
+                          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>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                  )})}
+                  </ul>
+                </NavigationMenuContent>
             </NavigationMenuItem>
           )
         })}

diff --git a/src/custom/docs/components/navmenu/config.tsx b/src/custom/docs/components/navmenu/config.tsx
diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx
@@ -1,57 +1,163 @@
 'use client'
 import { Navigation } from './NavigationMenu'
-import { ComponentProps } from 'react'
-import { Link } from './config'
 import { QuantinuumLogo } from './QuantinuumLogo'
 import { MobileMenu } from './MobileMenu'
 import { QuantinuumIdent } from './QuantinuumIdent'
 import { ModeSelector } from './ModeSelector'
-import { NavConfig } from './schema'
+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
   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">
+          <a href="/" className="ml-4 mr-4 flex items-center space-x-2">
             <span className="hidden font-bold">Quantinuum</span>
-          </Link>
+          </a>
 
         </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} navTextLinks={navConfig.navTextLinks} />
+          {props.enableModeSelector ? <> <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
         </div>
       </div>
     </div>

diff --git a/src/custom/docs/components/navmenu/schema.tsx b/src/custom/docs/components/navmenu/schema.tsx
diff --git a/src/custom/docs/scripts/nav/index.tsx b/src/custom/docs/scripts/nav/index.tsx
@@ -1,7 +1,7 @@
 
 import {createRoot} from "react-dom/client" 
+import { ComponentProps } from "react";
 import { NavBar } from "../../components/navmenu";
-import { navConfigSchema } from '../../components/navmenu/schema';
 
   (() => {
     const mountElement = document.querySelector('.nexus-nav')
@@ -10,13 +10,8 @@ import { navConfigSchema } from '../../components/navmenu/schema';
     mountElement.appendChild(renderIn)
 
     const root = createRoot(renderIn)
-
-    const navConfig = navConfigSchema.parse({
-      navTextLinks: typeof navTextLinks !== "undefined" ? navTextLinks : null,
-      navIconLinks: typeof navIconLinks !== "undefined" ? navIconLinks : null,
-      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="/" ></NavBar> </div></div>
     )
   })()