💤 fix: Add inert to Hidden/Background Content (#12016)

When content is hidden (or in the background of the active form),
users shouldn't be allowed to access that content. However, right now,
you can use a keyboard (or screen reader) to move over to this content.

By adding `inert`, we make this content no longer accessible when hidden.

I've done this in two places:

- The sidebar is now inert when it's closed.

- When the sidebar is open & the window is small, the content area is
  inert (since it's mostly obscured by the sidebar).

client/src/components/Nav/Nav.tsx

@@ -225,6 +225,7 @@ const Nav = memo(
           aria-label={localize('com_ui_chat_history')}
           className="flex h-full flex-col px-2 pb-3.5"
           aria-hidden={!navVisible}
+          {...{ inert: !navVisible ? '' : undefined }}
         >
           <div className="flex flex-1 flex-col overflow-hidden" ref={outerContainerRef}>
             <MemoNewChat

client/src/routes/Root.tsx

@@ -88,6 +88,7 @@ export default function Root() {
                           }
                         : undefined
                     }
+                    {...{ inert: navVisible && isSmallScreen ? '' : undefined }}
                   >
                     <MobileNav navVisible={navVisible} setNavVisible={setNavVisible} />
                     <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />