feat: Adds navbar (#54)

Co-authored-by: Omar White <[email protected]>
omawhite · Nov 28, 2023 · e853475 · e853475
1 parent 28600bc
commit e853475
Show file tree

Hide file tree

Showing 13 changed files with 871 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,10 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@staticcms/core": "^4.0.0-beta.11",
     "class-variance-authority": "^0.7.0",
@@ -28,6 +31,7 @@
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.263.1",
     "next": "^13.4.12",
+    "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark": "^13.0.0",

diff --git a/src/components/ColorModeToggle.stories.tsx b/src/components/ColorModeToggle.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ColorModeToggle from './ColorModeToggle';
+
+const meta: Meta<typeof ColorModeToggle> = {
+  component: ColorModeToggle,
+  title: 'Components/ColorModeToggle',
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorModeToggle>;
+
+export const Primary: Story = {};
diff --git a/src/components/ColorModeToggle.tsx b/src/components/ColorModeToggle.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/shadcn/ui/dropdown-menu';
+
+export default function ColorModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/Header.stories.tsx b/src/components/Header.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Header from './Header';
 import { Meta } from '@storybook/react';
 

diff --git a/src/components/Layout/LayoutNew.tsx b/src/components/Layout/LayoutNew.tsx
@@ -7,6 +7,7 @@ import {
 import { siteTitle } from 'src/constants';
 import Head from 'next/head';
 import Link from 'next/link';
+import Navbar from '../Navbar';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -26,11 +27,17 @@ export default function Layout({
   documentTitle,
 }: LayoutProps) {
   const title = documentTitle ? `${documentTitle} - ${siteTitle}` : siteTitle;
+  const navbarLinks = [
+    { label: 'Home', href: '/', key: 'home' },
+    { label: 'Blog', href: '/blog', key: 'blog' },
+    { label: 'Contact', href: '/contact', key: 'contact' },
+  ];
   return (
     <>
       <Head>
         <title>{title}</title>
       </Head>
+      <Navbar links={navbarLinks} />
       {!hideHeader && (
         <header className="p-6 flex flex-col items-center">
           {shouldAvatarLinkToHome ? (

diff --git a/src/components/Navbar.stories.tsx b/src/components/Navbar.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Navbar from './Navbar';
+
+const meta: Meta<typeof Navbar> = {
+  component: Navbar,
+  title: 'Components/Navbar',
+  args: {
+    links: [{ label: 'Home', href: '/', key: 'home' }],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+export const Primary: Story = {};
+
+export const MultipleLinks: Story = {
+  args: {
+    links: [
+      { label: 'Home', href: '/', key: 'home' },
+      { label: 'Blog', href: '/blog', key: 'blog' },
+      { label: 'Contact', href: '/contact', key: 'contact' },
+    ],
+  },
+};