diff --git a/front/components/navigation/Navigation.tsx b/front/components/navigation/Navigation.tsx index 29c9afc137b9..d2c7e8295371 100644 --- a/front/components/navigation/Navigation.tsx +++ b/front/components/navigation/Navigation.tsx @@ -2,7 +2,7 @@ import { XMarkIcon } from "@dust-tt/sparkle"; import type { SubscriptionType, WorkspaceType } from "@dust-tt/types"; import { Dialog, Transition } from "@headlessui/react"; import { Bars3Icon } from "@heroicons/react/20/solid"; -import React, { Fragment, useContext, useState } from "react"; +import React, { Fragment, useContext, useEffect, useState } from "react"; import type { SidebarNavigation } from "@app/components/navigation/config"; import { @@ -30,6 +30,18 @@ export function Navigation({ const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext); const [isNavigationBarOpen, setNavigationBarOpen] = useState(true); + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + setSidebarOpen(!sidebarOpen); + } + }; + + document.addEventListener("keydown", handleKeyDown); + return () => document.removeEventListener("keydown", handleKeyDown); + }, [isNavigationBarOpen, setSidebarOpen, sidebarOpen]); + if (hideSidebar) { return null; } diff --git a/front/components/sparkle/SidebarContext.tsx b/front/components/sparkle/SidebarContext.tsx index 944e4472d92c..09ca75bf968d 100644 --- a/front/components/sparkle/SidebarContext.tsx +++ b/front/components/sparkle/SidebarContext.tsx @@ -1,13 +1,17 @@ -import React, { useState } from "react"; +import React, { useCallback, useState } from "react"; export const SidebarContext = React.createContext<{ sidebarOpen: boolean; setSidebarOpen: (value: boolean) => void; + toggleSidebar: () => void; }>({ sidebarOpen: false, setSidebarOpen: (value) => { throw new Error("SidebarContext not initialized: " + value); }, + toggleSidebar: () => { + throw new Error("SidebarContext not initialized"); + }, }); export const SidebarProvider = ({ @@ -17,8 +21,14 @@ export const SidebarProvider = ({ }) => { const [sidebarOpen, setSidebarOpen] = useState(false); + const toggleSidebar = useCallback(() => { + setSidebarOpen((prev) => !prev); + }, []); + return ( - + {children} );