Auto open current docs menu category

[brookslybrand]

Once #232 is merged we'll have some cool collapsable nav menus!

Personally I think it'd be a bit more valuable if the menus were all automatically closed except for the category you're in. This is pretty easy to accomplish by breaking the Menu component apart and for each li/details component using something like the following:

const isActivePath = useIsActivePath(category.slug);
return (
  <li
    key={category.attrs.title}
    className="[&:not(:last-child)]:mb-3"
  >
    <details
      className="group relative flex cursor-pointer flex-col"
      open={isActivePath}
    >

However, with this approach introduces some annoying UX where when you navigate out of the category it auto closes that category

https://github.com/remix-run/remix-website/assets/12396812/4393ed18-7e4d-4198-9bec-5145483a421d

I want both the default open category to be the matching one and for navigations to keep currently open categories open. There are 2 ways to solve this that I can think of:

1. Sync open states to localStorage. Might be a bit heavy handed, but one benefit is that it will keep the opened categories open even between refreshes. However, it requires the introduction of a lot more state and likely useEffect. It also means that upon return visits the docs will have random categories open, which might be kind of confusing for a return user. As I'm writing this I don't like this idea
2. After hydration flip open back to undefined and let the browser handle it, that way client side navigations no longer effect the flow. Haven't tried it but hoping this is the easiest approach. Look to useHydrated

[brookslybrand]

Can be done with #233