Merge pull request #62 from abusix/pla-801-create-new-sidebar-navigat…

…ion-to-hailstorm feat(components): add navigation
abusix · Dec 4, 2023 · 2b7cb86 · 2b7cb86
2 parents 57bc007 + 48ce146
commit 2b7cb86
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 1 deletion.
diff --git a/src/components/navigation/navigation-disclosure-panel.tsx b/src/components/navigation/navigation-disclosure-panel.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Disclosure } from "@headlessui/react";
+import { classNames } from "../../util/class-names";
+
+export interface NavigationDisclosurePanelItemProps {
+    children: React.ReactNode;
+    isActive?: boolean;
+    isIndented?: boolean;
+}
+
+const NavigationDisclosurePanelItem = ({
+    children,
+    isActive,
+    isIndented,
+}: NavigationDisclosurePanelItemProps) => {
+    return (
+        <div
+            className={classNames(
+                "relative w-full px-8 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10",
+                isIndented && "px-14",
+                isActive && "bg-primary-900+20 font-semibold hover:bg-primary-900+20"
+            )}
+        >
+            {children}
+            {isActive && (
+                <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
+            )}
+        </div>
+    );
+};
+
+export interface NavigationDisclosurePanelProps {
+    children: React.ReactNode;
+}
+
+const NavigationDisclosurePanel = ({ children }: NavigationDisclosurePanelProps) => {
+    return <Disclosure.Panel>{children}</Disclosure.Panel>;
+};
+
+NavigationDisclosurePanel.Item = NavigationDisclosurePanelItem;
+
+export { NavigationDisclosurePanel };
diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
@@ -0,0 +1,35 @@
+import { Disclosure } from "@headlessui/react";
+import React from "react";
+import { NavigationDisclosurePanel } from "./navigation-disclosure-panel";
+
+interface NavigationDisclosureButtonProps {
+    children: React.ReactNode;
+    LeftIcon?: React.ElementType;
+}
+
+const NavigationDisclosureButton = ({ children, LeftIcon }: NavigationDisclosureButtonProps) => {
+    return (
+        <Disclosure.Button className="flex w-full items-center gap-x-3 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold">
+            {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
+            {children}
+        </Disclosure.Button>
+    );
+};
+
+export interface NavigationDisclosureProps {
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+
+const NavigationDisclosure = ({ children, defaultOpen }: NavigationDisclosureProps) => {
+    return (
+        <Disclosure as="div" defaultOpen={defaultOpen}>
+            {children}
+        </Disclosure>
+    );
+};
+
+NavigationDisclosure.Panel = NavigationDisclosurePanel;
+NavigationDisclosure.Button = NavigationDisclosureButton;
+
+export { NavigationDisclosure };
diff --git a/src/components/navigation/navigation-group.tsx b/src/components/navigation/navigation-group.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+export interface NavigationGroupItemProps {
+    children: React.ReactNode;
+    isActive?: boolean;
+    LeftIcon?: React.ElementType;
+}
+
+const NavigationGroupItem = ({ children, isActive, LeftIcon }: NavigationGroupItemProps) => {
+    return (
+        <div
+            className={classNames(
+                "relative flex items-center gap-x-3 px-4 py-3 text-sm text-neutral-0 hover:bg-primary-900+10",
+                isActive && "bg-primary-900+20 font-semibold hover:bg-primary-900+20"
+            )}
+        >
+            {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
+            {children}
+            {isActive && (
+                <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
+            )}
+        </div>
+    );
+};
+
+const NavigationGroup = ({ children }: { children: React.ReactNode }) => {
+    return <div className="pt-4">{children}</div>;
+};
+
+NavigationGroup.Item = NavigationGroupItem;
+
+export { NavigationGroup };
diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Navigation } from "./navigation";
+import { CogIcon, HelpIcon, InfoSignIcon } from "../../icons";
+
+const meta: Meta<typeof Navigation> = {
+    title: "Navigation",
+    component: Navigation,
+};
+
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+
+export const Default: Story = {
+    render: () => (
+        <div className="flex min-h-[1200px] flex-col">
+            <Navigation>
+                <Navigation.Logo>
+                    <div className="text-neutral-0">Abusix</div>
+                </Navigation.Logo>
+                <nav className="flex flex-1 flex-col">
+                    <Navigation.Group>
+                        <Navigation.Group.Item>Home</Navigation.Group.Item>
+                        <Navigation.Group.Item isActive>Dashboard</Navigation.Group.Item>
+                    </Navigation.Group>
+                    <Navigation.Group>
+                        <Navigation.Group.Item>Lookup & Delist</Navigation.Group.Item>
+                        <Navigation.Group.Item>Mail Intelligence</Navigation.Group.Item>
+                        <Navigation.Disclosure>
+                            <Navigation.Disclosure.Button>AbuseHQ</Navigation.Disclosure.Button>
+                            <Navigation.Disclosure.Panel>
+                                <Navigation.Disclosure.Panel.Item>
+                                    Cases
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item isActive>
+                                    Event Inbox
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item>
+                                    Mailbox
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item>
+                                    Dashboard
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item>
+                                    Statistics
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item>
+                                    Settings
+                                </Navigation.Disclosure.Panel.Item>
+                            </Navigation.Disclosure.Panel>
+                        </Navigation.Disclosure>
+                    </Navigation.Group>
+                    <Navigation.Group>
+                        <Navigation.Group.Item>Networks</Navigation.Group.Item>
+                        <Navigation.Group.Item>Data Channels</Navigation.Group.Item>
+                    </Navigation.Group>
+                    <div className="mt-auto">
+                        <Navigation.Group.Item LeftIcon={HelpIcon}>Support</Navigation.Group.Item>
+                        <Navigation.Disclosure>
+                            <Navigation.Disclosure.Button LeftIcon={InfoSignIcon}>
+                                Plans & Billing
+                            </Navigation.Disclosure.Button>
+                            <Navigation.Disclosure.Panel>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Subscriptions
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Billing
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Invoices
+                                </Navigation.Disclosure.Panel.Item>
+                            </Navigation.Disclosure.Panel>
+                        </Navigation.Disclosure>
+                        <Navigation.Disclosure>
+                            <Navigation.Disclosure.Button LeftIcon={CogIcon}>
+                                Settings
+                            </Navigation.Disclosure.Button>
+                            <Navigation.Disclosure.Panel>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Profile
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Team
+                                </Navigation.Disclosure.Panel.Item>
+                                <Navigation.Disclosure.Panel.Item isIndented>
+                                    Sign out
+                                </Navigation.Disclosure.Panel.Item>
+                            </Navigation.Disclosure.Panel>
+                        </Navigation.Disclosure>
+                    </div>
+                </nav>
+            </Navigation>
+        </div>
+    ),
+};
diff --git a/src/components/navigation/navigation.tsx b/src/components/navigation/navigation.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { NavigationDisclosure } from "./navigation-disclosure";
+import { NavigationGroup } from "./navigation-group";
+
+export interface NavigationLogoProps {
+    children: React.ReactNode;
+}
+
+const NavigationLogo = ({ children }: NavigationLogoProps) => {
+    return <div className="px-4 py-3">{children}</div>;
+};
+
+export interface NavigationProps {
+    children: React.ReactNode;
+}
+
+const Navigation = ({ children }: NavigationProps) => {
+    return (
+        <div className="flex w-[180px] grow flex-col overflow-y-auto bg-primary-900 pb-5 pt-3">
+            {children}
+        </div>
+    );
+};
+
+Navigation.Logo = NavigationLogo;
+Navigation.Group = NavigationGroup;
+Navigation.Disclosure = NavigationDisclosure;
+
+export { Navigation };
diff --git a/src/components/sidesheet/sidesheet.tsx b/src/components/sidesheet/sidesheet.tsx
@@ -36,7 +36,7 @@ const Sidesheet = ({ children, isOpen, onClose, initialFocus }: SidesheetProps)
                     leaveFrom="-translate-x-0"
                     leaveTo="translate-x-full"
                 >
-                    <HeadlessDialog.Panel className="w-184 fixed inset-y-0 right-0 z-10 overflow-y-auto bg-neutral-0">
+                    <HeadlessDialog.Panel className="fixed inset-y-0 right-0 z-10 w-184 overflow-y-auto bg-neutral-0">
                         {children}
                     </HeadlessDialog.Panel>
                 </Transition.Child>

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -23,6 +23,9 @@ export default {
                 0: "#ffffff",
             },
             primary: {
+                "900+20": '#1A276C',
+                "900+10": '#1E2C7A',
+                "900+8": '#1E2D7C',
                 900: "#213187",
                 800: "#2235AB",
                 700: "#223FD3",
@@ -33,6 +36,7 @@ export default {
                 200: "#C1D5FC",
                 100: "#DCE7FD",
                 50: "#EFF4FF",
+
             },
             success: {
                 900: "#114335",