Skip to content

Commit

Permalink
fix(): Revert docs nav changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@aidanCQ
aidanCQ committed Oct 7, 2024
1 parent 491626a commit 8a925c0
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 194 deletions.
62 changes: 10 additions & 52 deletions src/custom/docs/components/navmenu/NavigationMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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";
148 changes: 18 additions & 130 deletions src/custom/docs/components/navmenu/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
14 changes: 3 additions & 11 deletions src/custom/docs/components/navmenu/schema.tsx
View file
Original file line number Diff line number Diff line change
@@ -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']
Expand Down
52 changes: 51 additions & 1 deletion stories/custom/docs-nav.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down

0 comments on commit 8a925c0

Please sign in to comment.