Add interactiveDebounce to fix menu disappearing

rushi · Dec 18, 2024 · d695a9b · d695a9b
1 parent b89c95c
commit d695a9b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/Sidebar/Sidebar.Menu.jsx b/src/components/Sidebar/Sidebar.Menu.jsx
@@ -17,6 +17,8 @@ export const SidebarMenu = ({ children, content, ...rest }) => {
             placement="right"
             offset={[0, 4]}
             arrow={false}
+            // https://atomiks.github.io/tippyjs/v6/all-props/#interactivedebounce
+            interactiveDebounce={50} // Alternatively try interactiveBorder
             className={cn(
                 "ui-sidebar-menu",
                 styles.main,

diff --git a/src/stories/Navigation/Sidebar.stories.js b/src/stories/Navigation/Sidebar.stories.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../..";
+import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PiggyBankIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../..";
 
 const SidebarStories = {
     title: "Navigation/Sidebar",
@@ -58,6 +58,27 @@ export const Default = () => {
                     Sellers
                 </Sidebar.Link>
 
+                <Sidebar.Menu
+                    content={
+                        <div className="space-y-5 py-6">
+                            <Sidebar.Heading icon={PiggyBankIcon} label="Bookings" />
+                            <div>
+                                <Sidebar.Link isActive isSubMenuItem>
+                                    Purchases
+                                </Sidebar.Link>
+                                <Sidebar.Link isSubMenuItem>Gifts</Sidebar.Link>
+                                <Sidebar.Link isSubMenuItem>Other Gifts</Sidebar.Link>
+                                <Sidebar.Link isSubMenuItem>Things</Sidebar.Link>
+                                <Sidebar.Link isSubMenuItem>Other Things</Sidebar.Link>
+                                <Sidebar.Separator />
+                                <Sidebar.Link isSubMenuItem>Global Settings</Sidebar.Link>
+                            </div>
+                        </div>
+                    }
+                >
+                    <Sidebar.Link icon={PiggyBankIcon}>Bookings</Sidebar.Link>
+                </Sidebar.Menu>
+
                 <Sidebar.Link icon={StarIcon}>Favorites</Sidebar.Link>
 
                 <Sidebar.Menu