- Remove global keydown listener from `SidebarProvider` - Keep sidebar toggling to explicit UI interactions only
Unified · Split
| @@ -24,7 +24,6 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; · 23 unmodified lines | |||
| 24 | const SIDEBAR_WIDTH = "16rem"; | 24 | const SIDEBAR_WIDTH = "16rem"; |
| 25 | const SIDEBAR_WIDTH_MOBILE = "calc(100vw - var(--spacing(3)))"; | 25 | const SIDEBAR_WIDTH_MOBILE = "calc(100vw - var(--spacing(3)))"; |
| 26 | const SIDEBAR_WIDTH_ICON = "3rem"; | 26 | const SIDEBAR_WIDTH_ICON = "3rem"; |
| 27 | const SIDEBAR_KEYBOARD_SHORTCUT = "b"; | ||
| 28 | const SIDEBAR_RESIZE_DEFAULT_MIN_WIDTH = 16 * 16; | 27 | const SIDEBAR_RESIZE_DEFAULT_MIN_WIDTH = 16 * 16; |
| 29 | 28 | ||
| 30 | type SidebarContextProps = { | 29 | type SidebarContextProps = { |
| @@ -129,20 +128,6 @@ function SidebarProvider({ · 98 unmodified lines | |||
| 129 | return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); | 128 | return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); |
| 130 | }, [isMobile, setOpen]); | 129 | }, [isMobile, setOpen]); |
| 131 | 130 | ||
| 132 | // Adds a keyboard shortcut to toggle the sidebar. | ||
| 133 | React.useEffect(() => { | ||
| 134 | const handleKeyDown = (event: KeyboardEvent) => { | ||
| 135 | if (!isMobile) return; | ||
| 136 | if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) { | ||
| 137 | event.preventDefault(); | ||
| 138 | toggleSidebar(); | ||
| 139 | } | ||
| 140 | }; | ||
| 141 | |||
| 142 | window.addEventListener("keydown", handleKeyDown); | ||
| 143 | return () => window.removeEventListener("keydown", handleKeyDown); | ||
| 144 | }, [isMobile, toggleSidebar]); | ||
| 145 | |||
| 146 | // We add a state so that we can do data-state="expanded" or "collapsed". | 131 | // We add a state so that we can do data-state="expanded" or "collapsed". |
| 147 | // This makes it easier to style the sidebar with Tailwind classes. | 132 | // This makes it easier to style the sidebar with Tailwind classes. |
| 148 | const state = open ? "expanded" : "collapsed"; | 133 | const state = open ? "expanded" : "collapsed"; |