| ... | ... | @@ -24,7 +24,6 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; |
| 24 | 24 | const SIDEBAR_WIDTH = "16rem"; |
| 25 | 25 | const SIDEBAR_WIDTH_MOBILE = "calc(100vw - var(--spacing(3)))"; |
| 26 | 26 | const SIDEBAR_WIDTH_ICON = "3rem"; |
| 27 | | const SIDEBAR_KEYBOARD_SHORTCUT = "b"; |
| 28 | 27 | const SIDEBAR_RESIZE_DEFAULT_MIN_WIDTH = 16 * 16; |
| 29 | 28 | |
| 30 | 29 | type SidebarContextProps = { |
| ... | ... | @@ -129,20 +128,6 @@ function SidebarProvider({ |
| 129 | 128 | return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); |
| 130 | 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 | 131 | // We add a state so that we can do data-state="expanded" or "collapsed". |
| 147 | 132 | // This makes it easier to style the sidebar with Tailwind classes. |
| 148 | 133 | const state = open ? "expanded" : "collapsed"; |