From dbbddeae278c9e35bec5e7d2c9107f1a66219ae0 Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Thu, 7 Dec 2023 14:37:16 -0300
Subject: [PATCH 1/3] feat(NavigationPopover): Add navigation popover to
 Navigation component

---
 .storybook/preview.ts                         |  1 +
 .../navigation/navigation-popover.tsx         | 64 +++++++++++++++++++
 .../navigation/navigation.stories.tsx         | 27 +++++++-
 src/components/navigation/navigation.tsx      |  8 +--
 4 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 src/components/navigation/navigation-popover.tsx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index d0604867..9889756a 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -24,6 +24,7 @@ const preview: Preview = {
             storySort: {
                 order: ["Home", "Icons gallery"],
             },
+            showPanel: true,
         },
     },
 };
diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
new file mode 100644
index 00000000..664b88ce
--- /dev/null
+++ b/src/components/navigation/navigation-popover.tsx
@@ -0,0 +1,64 @@
+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 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;
+}
+
+const NavigationPopover = ({ children }: NavigationPopoverProps) => {
+    return (
+        <Popover>
+            <>
+                <Popover.Overlay className="absolute inset-0 translate-x-[180px] bg-modal-background" />
+                <div className="relative">{children}</div>
+            </>
+        </Popover>
+    );
+};
+
+NavigationPopover.Button = NavigationPopoverButton;
+NavigationPopover.Panel = NavigationPopoverPanel;
+
+export { NavigationPopover };
diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
index 072eae61..f6b950e1 100644
--- a/src/components/navigation/navigation.stories.tsx
+++ b/src/components/navigation/navigation.stories.tsx
@@ -6,6 +6,11 @@ import { CogIcon, HelpIcon, InfoSignIcon } from "../../icons";
 const meta: Meta<typeof Navigation> = {
     title: "Navigation",
     component: Navigation,
+    parameters: {
+        options: {
+            showPanel: false,
+        },
+    },
 };
 
 export default meta;
@@ -13,7 +18,7 @@ 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
diff --git a/src/components/navigation/navigation.tsx b/src/components/navigation/navigation.tsx
index 47706295..93cea7ad 100644
--- a/src/components/navigation/navigation.tsx
+++ b/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 };

From ed325b1bd46b02c4ae7a98aa643f5095f17250f7 Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Thu, 7 Dec 2023 15:34:54 -0300
Subject: [PATCH 2/3] fix(NavigationPopover): Make overlay optional

---
 src/components/navigation/navigation-popover.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
index 664b88ce..4a52a888 100644
--- a/src/components/navigation/navigation-popover.tsx
+++ b/src/components/navigation/navigation-popover.tsx
@@ -45,13 +45,16 @@ NavigationPopoverPanel.Item = NavigationPopoverPanelItem;
 
 export interface NavigationPopoverProps {
     children: React.ReactNode;
+    showOverlay?: boolean;
 }
 
-const NavigationPopover = ({ children }: NavigationPopoverProps) => {
+const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) => {
     return (
         <Popover>
             <>
-                <Popover.Overlay className="absolute inset-0 translate-x-[180px] bg-modal-background" />
+                {showOverlay && (
+                    <Popover.Overlay className="fixed inset-0 translate-x-[180px] bg-modal-background" />
+                )}
                 <div className="relative">{children}</div>
             </>
         </Popover>

From 395ac23355566bf897b8d047b69515a45f3fe75a Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Thu, 7 Dec 2023 15:57:51 -0300
Subject: [PATCH 3/3] fix(NavigationPopover): add z-indexes

---
 src/components/navigation/navigation-popover.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
index 4a52a888..576be6ed 100644
--- a/src/components/navigation/navigation-popover.tsx
+++ b/src/components/navigation/navigation-popover.tsx
@@ -35,7 +35,7 @@ export interface NavigationPopoverPanelProps {
 
 const NavigationPopoverPanel = ({ children }: NavigationPopoverPanelProps) => {
     return (
-        <Popover.Panel className="absolute bottom-0 ml-2 w-52 translate-x-[180px] rounded bg-neutral-0 p-2">
+        <Popover.Panel className="absolute bottom-0 z-40 ml-2 w-52 translate-x-[180px] rounded bg-neutral-0 p-2">
             {children}
         </Popover.Panel>
     );
@@ -53,7 +53,7 @@ const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) =>
         <Popover>
             <>
                 {showOverlay && (
-                    <Popover.Overlay className="fixed inset-0 translate-x-[180px] bg-modal-background" />
+                    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
                 )}
                 <div className="relative">{children}</div>
             </>