Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components): add navigation #62

Merged
merged 2 commits into from
Dec 4, 2023
Merged

feat(components): add navigation #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22d9335
feat(components): add navigation
mnlfischer Dec 1, 2023
48ce146
fix(components): fix linting
mnlfischer Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/components/navigation/navigation-disclosure-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
mnlfischer marked this conversation as resolved.
Show resolved Hide resolved
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 };
35 changes: 35 additions & 0 deletions src/components/navigation/navigation-disclosure.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
33 changes: 33 additions & 0 deletions src/components/navigation/navigation-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
96 changes: 96 additions & 0 deletions src/components/navigation/navigation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
),
};
29 changes: 29 additions & 0 deletions src/components/navigation/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
2 changes: 1 addition & 1 deletion src/components/sidesheet/sidesheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export default {
0: "#ffffff",
},
primary: {
"900+20": '#1A276C',
"900+10": '#1E2C7A',
"900+8": '#1E2D7C',
900: "#213187",
800: "#2235AB",
700: "#223FD3",
Expand All @@ -33,6 +36,7 @@ export default {
200: "#C1D5FC",
100: "#DCE7FD",
50: "#EFF4FF",

},
success: {
900: "#114335",
Expand Down
Loading