feat(NavigationPopover): Add navigation popover to Navigation component

.storybook/preview.ts

@@ -24,6 +24,7 @@ const preview: Preview = {
             storySort: {
                 order: ["Home", "Icons gallery"],
             },
+            showPanel: true,
         },
     },
 };

src/components/navigation/navigation-popover.tsx

@@ -0,0 +1,67 @@
+import { Popover } from "@headlessui/react";
+import React from "react";
+
+export interface NavigationPopoverButtonProps {
+    LeftIcon?: React.ElementType;
+    children: React.ReactNode;
+}
+
+const NavigationPopoverButton = ({ children, LeftIcon }: NavigationPopoverButtonProps) => {
+    return (
+        <Popover.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" />}
+                {children}
+            </>
+        </Popover.Button>
+    );
+};
+
+export interface NavigationPopoverPanelItemProps {
+    children: React.ReactNode;
+}
+
+const NavigationPopoverPanelItem = ({ children }: NavigationPopoverPanelItemProps) => {
+    return (
+        <div className="flex w-full cursor-pointer items-center overflow-hidden p-2">
+            <p className="text-sm font-normal">{children}</p>
+        </div>
+    );
+};
+
+export interface NavigationPopoverPanelProps {
+    children: React.ReactNode;
+}
+
+const NavigationPopoverPanel = ({ children }: NavigationPopoverPanelProps) => {
+    return (
+        <Popover.Panel className="absolute bottom-0 z-40 ml-2 w-52 translate-x-[180px] rounded bg-neutral-0 p-2">
+            {children}
+        </Popover.Panel>
+    );
+};
+
+NavigationPopoverPanel.Item = NavigationPopoverPanelItem;
+
+export interface NavigationPopoverProps {
+    children: React.ReactNode;
+    showOverlay?: boolean;
+}
+
+const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) => {
+    return (
+        <Popover>
+            <>
+                {showOverlay && (
+                    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
+                )}
+                <div className="relative">{children}</div>
+            </>
+        </Popover>
+    );
+};
+
+NavigationPopover.Button = NavigationPopoverButton;
+NavigationPopover.Panel = NavigationPopoverPanel;
+
+export { NavigationPopover };

src/components/navigation/navigation.stories.tsx

@@ -6,14 +6,19 @@ import { CogIcon, HelpIcon, InfoSignIcon } from "../../icons";
 const meta: Meta<typeof Navigation> = {
     title: "Navigation",
     component: Navigation,
+    parameters: {
+        options: {
+            showPanel: false,
+        },
+    },
 };
 
 export default meta;
 type Story = StoryObj<typeof Navigation>;
 
 export const Default: Story = {
     render: () => (
-        <div className="flex min-h-[1200px] flex-col">
+        <div className="relative flex min-h-screen w-96 flex-col">
             <Navigation>
                 <Navigation.Logo>
                     <div className="text-neutral-0">Abusix</div>
@@ -55,7 +60,25 @@ export const Default: Story = {
                         <Navigation.Group.Item>Data Channels</Navigation.Group.Item>
                     </Navigation.Group>
                     <div className="mt-auto">
-                        <Navigation.Group.Item LeftIcon={HelpIcon}>Support</Navigation.Group.Item>
+                        <Navigation.Popover>
+                            <Navigation.Popover.Button LeftIcon={HelpIcon}>
+                                Support
+                            </Navigation.Popover.Button>
+                            <Navigation.Popover.Panel>
+                                <Navigation.Popover.Panel.Item>
+                                    Documentation
+                                </Navigation.Popover.Panel.Item>
+                                <Navigation.Popover.Panel.Item>
+                                    Support request
+                                </Navigation.Popover.Panel.Item>
+                                <Navigation.Popover.Panel.Item>
+                                    System status
+                                </Navigation.Popover.Panel.Item>
+                                <Navigation.Popover.Panel.Item>
+                                    Blog posts
+                                </Navigation.Popover.Panel.Item>
+                            </Navigation.Popover.Panel>
+                        </Navigation.Popover>
                         <Navigation.Disclosure>
                             <Navigation.Disclosure.Button LeftIcon={InfoSignIcon}>
                                 Plans & Billing

src/components/navigation/navigation.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { NavigationDisclosure } from "./navigation-disclosure";
 import { NavigationGroup } from "./navigation-group";
+import { NavigationPopover } from "./navigation-popover";
 
 export interface NavigationLogoProps {
     children: React.ReactNode;
@@ -15,15 +16,12 @@ export interface NavigationProps {
 }
 
 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>
-    );
+    return <div className="flex w-[180px] grow flex-col bg-primary-900 pb-5 pt-3">{children}</div>;
 };
 
 Navigation.Logo = NavigationLogo;
 Navigation.Group = NavigationGroup;
 Navigation.Disclosure = NavigationDisclosure;
+Navigation.Popover = NavigationPopover;
 
 export { Navigation };