feat: navbar component

example/nextjs/pages/index.tsx

@@ -1,7 +1,8 @@
-import { OpenApi, Sidebar, utils } from "@raystack/chronicle";
+import { OpenApi, Sidebar, utils, Navbar } from "@raystack/chronicle";
 import { readApiYaml } from "../utils/index";
 import { Inter } from "next/font/google";
 import { SidebarConfig, readSidebarConfig } from "@/utils/sidebar";
+import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,13 +15,35 @@ export const getStaticProps = async () => {
 
 export default function Home({ schema, sidebarConfig }: { schema: any; sidebarConfig: SidebarConfig }) {
     return (
-        <div className="flex">
-            <div className="h-screen border-white border-r fixed">
-                <Sidebar.Root items={sidebarConfig.items} />
+        <div className="flex flex-col">
+            <Navbar.Root
+                logo="Chronicle"
+                className="fixed w-screen bg-black border-b border-white"
+                leftActionItems={[
+                    <Link href={"#"} key="products">
+                        Products
+                    </Link>,
+                    <Link href={"#"} key="solutions">
+                        Solutions
+                    </Link>,
+                ]}
+                rightActionItems={[
+                    <Link href={"#"} key="docs">
+                        Docs
+                    </Link>,
+                    <Link href={"#"} key="blogs">
+                        Blogs
+                    </Link>,
+                ]}
+            />
+            <div className="mt-[48px]">
+                <div className="h-screen border-white border-r fixed">
+                    <Sidebar.Root items={sidebarConfig.items} />
+                </div>
+                <main className={`p-24 ${inter.className} ml-[280px] w-[calc(100vw_-_280px)]`}>
+                    <OpenApi.Root schema={schema} />
+                </main>
             </div>
-            <main className={`p-24 ${inter.className} ml-[280px] w-[calc(100vw_-_280px)]`}>
-                <OpenApi.Root schema={schema} />
-            </main>
         </div>
     );
 }

packages/chronicle/package.json

@@ -63,8 +63,10 @@
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
     "@apidevtools/swagger-parser": "^10.1.0",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "clsx": "^1.2.1",
     "js-yaml": "^4.1.0",
     "openapi-to-postmanv2": "^4.14.0",
     "openapi-types": "^12.1.3",

packages/chronicle/src/Navbar/index.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from "react";
+import styles from "./styles.module.css";
+import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import clsx from "clsx";
+
+interface NavbarProps {
+    logo?: ReactNode | string;
+    leftActionItems?: ReactNode[];
+    rightActionItems?: ReactNode[];
+    className?: string;
+}
+
+interface MenuProps {
+    label: string;
+    items: ReactNode[];
+    menuPosition?: "left" | "right";
+}
+
+export function Menu({ label, items, menuPosition }: MenuProps) {
+    const contentStyle = menuPosition === "right" ? { right: 0 } : { left: 0 };
+    return (
+        <div className={styles.List}>
+            <NavigationMenu.Trigger className={styles.NavigationMenuTrigger}>
+                {label} <CaretDownIcon className="CaretDown" aria-hidden />
+            </NavigationMenu.Trigger>
+            <NavigationMenu.Content className={styles.NavigationMenuContent} forceMount style={contentStyle}>
+                <ul className={styles.NavigationMenuContentList}>
+                    {items?.map((item, i) => (
+                        <NavigationMenu.Item key={i} className={styles.NavigationMenuContentListItem}>
+                            {item}
+                        </NavigationMenu.Item>
+                    ))}
+                </ul>
+            </NavigationMenu.Content>
+        </div>
+    );
+}
+
+export function Root({ logo, leftActionItems = [], rightActionItems = [], className }: NavbarProps) {
+    return (
+        <header className={clsx(styles.Navbar, className)}>
+            <div style={{ display: "flex" }}>
+                <div className={styles.Logo}>{logo}</div>
+                <NavigationMenu.Root>
+                    <ul>
+                        {leftActionItems?.map((item, i) => (
+                            <NavigationMenu.Item key={i} className={styles.ActionItem}>
+                                {item}
+                            </NavigationMenu.Item>
+                        ))}
+                    </ul>
+                </NavigationMenu.Root>
+            </div>
+            <NavigationMenu.Root>
+                <ul>
+                    {rightActionItems?.map((item, i) => (
+                        <NavigationMenu.Item key={i} className={styles.ActionItem}>
+                            {item}
+                        </NavigationMenu.Item>
+                    ))}
+                </ul>
+            </NavigationMenu.Root>
+        </header>
+    );
+}

packages/chronicle/src/Navbar/navbar.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import * as Navbar from "./";
+import { SunIcon } from "@radix-ui/react-icons";
+
+const meta: Meta<typeof Navbar.Root> = {
+    title: "Navbar",
+    component: Navbar.Root,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextLogo: Story = {
+    args: {
+        logo: "Chronicle",
+        leftActionItems: [
+            <a href="/#" key="home">
+                Home
+            </a>,
+            <a href="/#" key="products">
+                Products
+            </a>,
+            <a href="/#" key="solutions">
+                Solutions
+            </a>,
+            <Navbar.Menu
+                key="menu"
+                label="Menu 1"
+                items={[
+                    <a href="/#" key="docs">
+                        Docs
+                    </a>,
+                    <a href="/#" key="blogs">
+                        Blogs
+                    </a>,
+                    <a href="/#" key="Github">
+                        Github
+                    </a>,
+                ]}
+            />,
+        ],
+        rightActionItems: [
+            <a href="/#" key="docs">
+                Docs
+            </a>,
+            <a href="/#" key="blogs">
+                Blogs
+            </a>,
+            <a href="/#" key="Github">
+                Github
+            </a>,
+            <Navbar.Menu
+                key="menu"
+                label="Menu 2"
+                menuPosition="right"
+                items={[
+                    <a href="/#" key="docs">
+                        Docs
+                    </a>,
+                    <a href="/#" key="blogs">
+                        Blogs
+                    </a>,
+                    <a href="/#" key="Github">
+                        Github
+                    </a>,
+                ]}
+            />,
+        ],
+    },
+};
+
+export const ComponentLogo: Story = {
+    args: {
+        logo: (
+            <>
+                <SunIcon />
+                <span style={{ marginLeft: "8px" }}>Chronicle</span>
+            </>
+        ),
+    },
+};

packages/chronicle/src/Navbar/styles.module.css

@@ -0,0 +1,59 @@
+.Navbar {
+  width: 100%;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.Logo {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.ActionItem {
+  margin: 0 4px;
+  display: inline-flex;
+}
+
+.List {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.NavigationMenuTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.NavigationMenuContent {
+  position: absolute;
+  width: max-content;
+  animation-duration: 250ms;
+  animation-timing-function: ease;
+  border: 0.5px solid rgba(0,0,0,0.1);
+  top: calc(100% + 2px);
+  padding: 8px;
+  background-color: white;
+}
+
+.NavigationMenuContentList {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.NavigationMenuContentListItem {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 16px;
+  text-decoration: none;
+}

packages/chronicle/src/index.tsx

@@ -1,3 +1,4 @@
 export * as OpenApi from "./OpenApi";
 export * as Sidebar from "./Sidebar";
+export * as Navbar from "./Navbar";
 export * as utils from "./utils";