refactor side nav to make it composable

packages/web/src/app/bookmarks/index.tsx

@@ -9,11 +9,11 @@ import { useTags } from "~/bookmark/api.ts"
 import { Button } from "~/components/button"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { Message, MessageVariant } from "~/components/message.tsx"
+import { SideNav, SideNavItem } from "~/components/side-nav"
 import { useDocumentEvent } from "~/hooks/use-document-event.ts"
 import { useMnemonics } from "~/hooks/use-mnemonics.ts"
 import { BookmarkList } from "./-bookmark-list"
 import { ActionBarContentKind, DialogKind, WindowKind, useBookmarkPageStore } from "./-store"
-import { SideNav } from "~/app/-side-nav"
 
 export const Route = createFileRoute("/bookmarks/")({
 	component: RouteComponent,
@@ -40,11 +40,27 @@ function BookmarkListPane() {
 }
 
 function _SideNav() {
-	const hasDialog = useBookmarkPageStore((state) => state.dialog.kind !== DialogKind.None)
-	const isSearchBarActive = useBookmarkPageStore(
-		(state) => state.actionBarContent.kind === ActionBarContentKind.SearchBar,
+	const navigate = useNavigate()
+
+	useMnemonics(
+		{
+			b: () => navigate({ to: "/bookmarks" }),
+			c: () => navigate({ to: "/collections" }),
+		},
+		{
+			ignore: () => {
+				const state = useBookmarkPageStore.getState()
+				return state.dialog.kind !== DialogKind.None || state.actionBarContent.kind === ActionBarContentKind.SearchBar
+			},
+		},
+	)
+
+	return (
+		<SideNav>
+			<SideNavItem to="/bookmarks" label="BOOKMARKS" active />
+			<SideNavItem to="/collections" label="COLLECTIONS" />
+		</SideNav>
 	)
-	return <SideNav enableMnemonics={!hasDialog && !isSearchBarActive} />
 }
 
 function BookmarkListContainer() {