components: Desktop nav

packages/components/src/Navbar/ForDesktop/index.module.css

@@ -0,0 +1,72 @@
+.container {
+  @apply block w-full text-white pt-2 h-12 z-50 mx-auto pb-2;
+}
+
+.inner {
+  @apply flex justify-between items-center h-full px-6 w-full;
+
+  a,
+  button {
+    @apply text-sm font-normal text-white/90 hover:text-blue-200 tracking-wide;
+  }
+}
+
+.dark {
+  @apply text-background-acc-1;
+
+  a,
+  button {
+    @apply text-background-acc-1 font-semibold;
+
+    &:hover {
+      @apply text-primary text-opacity-80;
+    }
+  }
+}
+
+.large {
+  @apply h-16 px-8;
+
+  a,
+  button {
+    @apply text-base;
+  }
+}
+
+.left {
+  @apply flex w-1/3 ml-6 order-first;
+
+  a {
+    @apply ml-2 mr-10;
+  }
+}
+
+.logo {
+  img {
+    @apply max-h-6 max-w-60;
+  }
+}
+
+.right {
+  @apply flex justify-end mr-6 w-1/3;
+
+  a {
+    @apply mr-2 ml-10;
+  }
+}
+
+.logoLeft {
+  @apply justify-start relative;
+
+  .left {
+    @apply order-2 w-auto;
+  }
+
+  .logo {
+    @apply order-first ml-3 mr-3;
+  }
+
+  .right {
+    @apply order-3 w-auto absolute right-0 mr-4;
+  }
+}

packages/components/src/Navbar/ForDesktop/index.tsx

@@ -0,0 +1,38 @@
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import css from "./index.module.css";
+
+type Props = {
+  leftLinks: ReactNode;
+  logo: ReactNode;
+  rightLinks: ReactNode;
+  className?: string;
+  bgColor?: string;
+  large?: boolean;
+  dark?: boolean;
+  logoLeft?: boolean;
+};
+
+export default function DesktopNavbar(props: Props) {
+  return (
+    <div
+      className={cx(
+        css.container,
+        props.bgColor ?? "bg-background-acc-1",
+        { [css.large]: props.large, [css.dark]: props.dark },
+        props.className,
+      )}
+    >
+      <div
+        className={cx(css.inner, {
+          [css.dark]: props.dark,
+          [css.logoLeft]: props.logoLeft,
+        })}
+      >
+        <div className={css.left}>{props.leftLinks}</div>
+        <div className={css.logo}>{props.logo}</div>
+        <div className={css.right}>{props.rightLinks}</div>
+      </div>
+    </div>
+  );
+}

packages/components/src/Navbar/index.module.css → packages/components/src/Navbar/ForMobile/index.module.css

@@ -1,9 +1,5 @@
 .container {
   @apply w-full text-white px-5 py-2 h-14;
-
-  @screen lg {
-    @apply hidden;
-  }
 }
 
 .top {

packages/components/src/Navbar/ForMobile.tsx → packages/components/src/Navbar/ForMobile/index.tsx

@@ -2,7 +2,7 @@ import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
 import { AiOutlineMenu } from "@react-icons/all-files/ai/AiOutlineMenu";
 import cx from "classnames";
 import React, { ReactNode, useState } from "react";
-import Btn from "../Btn";
+import Btn from "../../Btn";
 import css from "./index.module.css";
 
 type CommonProps = {

packages/components/src/__stories__/MobileFormModal.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import Button from "../Button";
 import ForMobile from "../CommentForm/ForMobile";
 import MobileFormModal from "../MobileFormModal";
-import Navbar from "../Navbar";
+import MobileNavbar from "../Navbar/ForMobile";
 
 const meta: Meta<typeof MobileFormModal> = {
   title: "MobileFormModal",
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof MobileFormModal>;
 
 const Nav = (
-  <Navbar
+  <MobileNavbar
     logo={
       <img
         src="https://dolthub.awsdev.ld-corp.com/blog/static/bd834a2859f2246200c1692940ff1409/222b7/dolt-logo-1.png"
@@ -44,7 +44,7 @@ const Nav = (
     <a>Blog</a>
     <a>Documentation</a>
     <Button.Outlined>Sign out</Button.Outlined>
-  </Navbar>
+  </MobileNavbar>
 );
 
 const Form = (

packages/components/src/__stories__/Navbar.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import DesktopNavbar from "../Navbar/ForDesktop";
+
+const meta: Meta<typeof DesktopNavbar> = {
+  title: "DesktopNavbar",
+  component: DesktopNavbar,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DesktopNavbar>;
+
+export const Basic: Story = {
+  args: {
+    logo: (
+      <img
+        src="https://dolthub.awsdev.ld-corp.com/blog/static/bd834a2859f2246200c1692940ff1409/222b7/dolt-logo-1.png"
+        alt="LOGO"
+      />
+    ),
+    leftLinks: (
+      <>
+        <a>Pricing</a>
+        <a>Blog</a>
+        <a>Documentation</a>
+      </>
+    ),
+    rightLinks: (
+      <>
+        <a>Profile</a>
+        <a>Another</a>
+      </>
+    ),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Basic.args,
+    large: true,
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    ...Basic.args,
+    dark: true,
+    bgColor: "bg-transparent",
+  },
+  parameters: {
+    backgrounds: { default: "lightish" },
+  },
+};
+
+export const LogoLeft: Story = {
+  args: {
+    ...Basic.args,
+    logoLeft: true,
+  },
+};

packages/components/src/index.ts

@@ -14,7 +14,8 @@ export type * as FormSelectTypes from "./FormSelect/types";
 export { default as Loader } from "./Loader";
 export { default as Markdown } from "./Markdown";
 export { default as MobileFormModal } from "./MobileFormModal";
-export { default as Navbar } from "./Navbar";
+export { default as DesktopNavbar } from "./Navbar/ForDesktop";
+export { default as MobileNavbar } from "./Navbar/ForMobile";
 export { default as Popup, PopupProps } from "./Popup";
 export { default as Radio } from "./Radio";
 export { default as ScrollToButton } from "./ScrollToButton";