fix(): Revert docs nav changes. (#32)

CQCL · Oct 7, 2024 · 191bf2e · 191bf2e
1 parent 491626a
commit 191bf2e
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 194 deletions.
diff --git a/src/custom/docs/components/navmenu/NavigationMenu.tsx b/src/custom/docs/components/navmenu/NavigationMenu.tsx
@@ -3,17 +3,13 @@ import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
-  NavigationMenuTrigger,
   NavigationMenuList,
-  NavigationMenuContent,
-  cn
+  navigationMenuTriggerStyle,
 } from 'src'
 
 import { Link } from './config'
 import { NavConfig } from './schema'
 
-import React from 'react';
-
 export const Navigation = (props: {
   activePath: string
   linkComponent: Link
@@ -27,57 +23,19 @@ export const Navigation = (props: {
         { props.navTextLinks.map((item) => {
           return (
             <NavigationMenuItem key={item.title}>
-              <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((item2) => {
-                    return (<ListItem key={item2.title} title={item2.title} href={item2.href}></ListItem>
-                  )})}
-                  </ul>
-                </NavigationMenuContent>
+              <NavigationMenuLink
+                className={navigationMenuTriggerStyle()}
+                asChild
+                active={isActivePath(props.activePath, item.href)}
+              >
+                <props.linkComponent href={item.href}>
+                  {item.title}
+                </props.linkComponent>
+              </NavigationMenuLink>
             </NavigationMenuItem>
           )
         })}
       </NavigationMenuList>
     </NavigationMenu>
   )
 }
-
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "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",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  );
-});
-ListItem.displayName = "ListItem";
diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx
@@ -1,139 +1,18 @@
 'use client'
 import { Navigation } from './NavigationMenu'
 import { ComponentProps } from 'react'
-import React from 'react'
 import { Link } from './config'
 import { QuantinuumLogo } from './QuantinuumLogo'
 import { MobileMenu } from './MobileMenu'
 import { QuantinuumIdent } from './QuantinuumIdent'
 import { ModeSelector } from './ModeSelector'
-
-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: 'https://docs.quantinuum.com/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: "https://docs.quantinuum.com/h-series/guides.html",
-      },{
-        title: "Getting Started",
-        href: "https://docs.quantinuum.com/h-series/trainings/getting_started/getting_started_index.html",
-      },{
-        title: "Knowledge Articles",
-        href: "https://docs.quantinuum.com/h-series/trainings/knowledge_articles/ka_index.html",
-      },{
-        title: "Support",
-        href: "https://docs.quantinuum.com/h-series/support.html",
-      }]
-    }, {
-      title: 'Nexus',
-      href: 'https://docs.quantinuum.com/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: 'https://docs.quantinuum.com/nexus/guides.html',
-      },
-      {
-        title: 'Trainings',
-        href: 'https://docs.quantinuum.com/nexus/trainings/getting_started.html',
-      },
-      {
-        title: 'API Reference',
-        href: 'https://docs.quantinuum.com/nexus/api_index.html',
-      },
-      {
-        title: 'Support',
-        href: 'https://docs.quantinuum.com/nexus/support_index.html',
-      },]
-    }, {
-      title: "TKET",
-      href: "https://docs.quantinuum.com/tket/index.html",
-      pathMatch: "",
-      logo: <TKETLogo className="h-8 w-32" ></TKETLogo>,
-      description: "Quantum computing toolkit and optimizing compiler",
-      dropDown: [{
-          title: 'API Docs',
-          href: 'https://docs.quantinuum.com/tket/api-docs',
-        },{
-          title: 'User Guide',
-          href: 'https://docs.quantinuum.com/tket/user-guide',
-      },{
-          title: 'Blog',
-          href: 'https://docs.quantinuum.com/tket/blog/',
-        },]
-    }, {
-      title: "InQuanto",
-      href: "https://docs.quantinuum.com/inquanto/index.html",
-      pathMatch: "",
-      logo: <InquantoLogo className="h-8 w-56"></InquantoLogo>,
-      description: "Toolkit for complex molecular and materials simulations",
-      dropDown: [{
-          title: 'Introduction',
-          href: 'https://docs.quantinuum.com/inquanto/introduction/overview.html',
-        },
-        {
-          title: 'User Guide',
-          href: 'https://docs.quantinuum.com/inquanto/manual/howto.html',
-        },
-        {
-          title: 'Tutorials',
-          href: 'https://docs.quantinuum.com/inquanto/tutorials/tutorial_overview.html',
-        },
-        {
-          title: 'Examples',
-          href: 'https://docs.quantinuum.com/inquanto/tutorials/examples_overview.html',
-        },
-        {
-          title: 'API Reference',
-          href: 'https://docs.quantinuum.com/inquanto/api/inquanto_api_intro.html',
-        },]
-    }, {
-      title: "\u03BBambeq",
-      href: "https://docs.quantinuum.com/lambeq/index.html",
-      logo: <LambeqLogo className="h-8 w-48"></LambeqLogo>,
-      description: "Α Python toolkit for quantum natural language processing",
-      dropDown: [{
-        title: 'Getting Started',
-        href: 'https://docs.quantinuum.com/lambeq/intro.html',
-      },
-      {
-        title: 'User Guide',
-        href: 'https://docs.quantinuum.com/lambeq/pipeline.html',
-      },
-      {
-        title: 'Tutorials',
-        href: 'https://docs.quantinuum.com/lambeq/tutorials/sentence-input.html',
-      },
-      {
-        title: 'Code Examples',
-        href: 'https://docs.quantinuum.com/lambeq/notebooks.html',
-      },
-      {
-        title: 'API Reference',
-        href: 'https://docs.quantinuum.com/lambeq/root-api.html',
-      },]
-    }
-  ],
-}
+import { NavConfig } from './schema'
 
 export const NavBar = (props: {
   linkComponent?: Link
   activePath: string
   enableModeSelector?: boolean
-}) => {
+} & NavConfig) => {
   const Link = props.linkComponent
     ? props.linkComponent
     : (props: ComponentProps<'a'>) => <a {...props}></a>
@@ -142,28 +21,37 @@ export const NavBar = (props: {
       <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 {...navConfig}/>
+            <MobileMenu {...props}/>
           </div>
           <div className="whitespace-nowrap flex items-center gap-2">
-          <a href="https://docs.quantinuum.com/" aria-label='Quantinuum Documentation' title="Quantinuum Documentation" className='hover:cursor-pointer hover:opacity-50 transition'>
+          <a href="https://docs.quantinuum.com/" aria-label='Quantinuum Docs' title="Quantinuum Docs"   className='hover:cursor-pointer hover:opacity-50 transition'>
             <div className='hidden sm:block'><QuantinuumLogo />
             </div>
             <div className='block sm:hidden'>
               <QuantinuumIdent/>
             </div>
             </a>
-            <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>
+            {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>
           <Link href="/" className="ml-4 mr-4 flex items-center space-x-2">
             <span className="hidden font-bold">Quantinuum</span>
           </Link>
 
         </div>
         <div className="flex items-center gap-5">
-          <Navigation activePath={props.activePath} linkComponent={Link} navTextLinks={navConfig.navTextLinks} />
-          {props.enableModeSelector ? <> <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
+
+        <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}
         </div>
       </div>
     </div>

diff --git a/src/custom/docs/components/navmenu/schema.tsx b/src/custom/docs/components/navmenu/schema.tsx
@@ -1,24 +1,16 @@
 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']

diff --git a/stories/custom/docs-nav.stories.tsx b/stories/custom/docs-nav.stories.tsx
@@ -1,8 +1,58 @@
 import { Meta, StoryObj } from "@storybook/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 activePath="/" />;
+  return <DocsNavBar {...navConfig }activePath="/" />;
 }
 
 const meta: Meta<typeof DocsNavDemo> = {