feat: add sidebar auto-collapse menus (#1832)

Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

.changeset/two-bugs-destroy.md

@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': minor
+---
+
+add new option `sidebar.autoCollapse` to automatically collapse inactive folders
+above `defaultMenuCollapseLevel`

docs/pages/docs/docs-theme/theme-configuration.mdx

@@ -444,6 +444,11 @@ Customize the entire navbar component.
       'number',
       'Specifies the folder level at which the menu on the left is collapsed by default. Defaults to 2.'
     ],
+    [
+      'sidebar.autoCollapse',
+      'boolean',
+      'If true, automatically collapse inactive folders above defaultMenuCollapseLevel.'
+    ],
     [
       'sidebar.titleComponent',
       `React.ReactNode | React.FC<{
@@ -468,6 +473,11 @@ setting `sidebar.defaultMenuCollapseLevel` to a different number. For example,
 when set to `1`, every folder will be collapsed by default and when set to
 `Infinity`, all nested folders will be expanded by default.
 
+If `sidebar.autoCollapse` is set to `true`, then all folders that do not contain
+an active/focused route will automatically collapse up to the level set by
+`sidebar.defaultMenuCollapseLevel`. e.g. if `defaultMenuCollapseLevel` is `2`,
+then top-level folders will not auto-collapse.
+
 ### Customize sidebar content
 
 Together with the [Separators](/docs/docs-theme/page-configuration#separators)

docs/pages/docs/guide/advanced/table.mdx

@@ -73,7 +73,7 @@ you'll get the following result:
   </tbody>
 </table>
 
-<Callout emoji="⚠️" type="warning">
+<Callout type="warning">
   Confused by unstyled elements? We explained [here](#why-this-happens), why
   this happens.
 </Callout>
@@ -129,7 +129,7 @@ will be rendered as:
   </tbody>
 </table>
 
-<Callout emoji="⚠️" type="warning">
+<Callout type="warning">
   Confused by unstyled elements? We explain below 👇, why it's happens.
 </Callout>
 

examples/swr-site/pages/docs/advanced/cache.en-US.mdx

@@ -4,13 +4,14 @@ import { Callout } from 'nextra/components'
 
 <Callout>Upgrade to the latest version (≥ 1.0.0) to use this feature.</Callout>
 
-<Callout emoji="⚠️">
+<Callout type="warning">
   In most cases, you shouldn't directly _write_ to the cache, which might cause
   undefined behaviors of SWR. If you need to manually mutate a key, please
   consider using the SWR APIs.
-  <br />
-  See also: [Mutation](/docs/mutation), [Reset Cache Between Test
-  Cases](#reset-cache-between-test-cases).
+
+See also: [Mutation](/docs/mutation),
+[Reset Cache Between Test Cases](#reset-cache-between-test-cases).
+
 </Callout>
 
 By default, SWR uses a global cache to store and share data across all

examples/swr-site/pages/index.en-US.mdx

@@ -43,8 +43,9 @@ and finally come with the up-to-date data.
 <Callout emoji="✅">
   With SWR, components will get a stream of data updates **constantly** and
   **automatically**.
-  <br />
-  And the UI will be always **fast** and **reactive**.
+
+And the UI will be always **fast** and **reactive**.
+
 </Callout>
 
 <div className="mb-20 mt-16 text-center">

examples/swr-site/theme.config.tsx

@@ -173,6 +173,7 @@ const config: DocsThemeConfig = {
     link: 'https://github.com/vercel/swr'
   },
   sidebar: {
+    autoCollapse: true,
     defaultMenuCollapseLevel: 1,
     titleComponent: ({ title, type }) =>
       type === 'separator' ? (

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -24,9 +24,9 @@ import { LocaleSwitch } from './locale-switch'
 const TreeState: Record<string, boolean> = Object.create(null)
 
 const FocusedItemContext = createContext<null | string>(null)
-const OnFocuseItemContext = createContext<
-  null | ((item: string | null) => any)
->(null)
+const OnFocusItemContext = createContext<null | ((item: string | null) => any)>(
+  null
+)
 const FolderLevelContext = createContext(0)
 
 const Folder = memo(function FolderInner(props: FolderProps) {
@@ -92,10 +92,25 @@ function FolderImpl({ item, anchors }: FolderProps): ReactElement {
   const rerender = useState({})[1]
 
   useEffect(() => {
-    if (activeRouteInside || focusedRouteInside) {
-      TreeState[item.route] = true
+    const updateTreeState = () => {
+      if (activeRouteInside || focusedRouteInside) {
+        TreeState[item.route] = true
+      }
+    }
+    const updateAndPruneTreeState = () => {
+      if (activeRouteInside && focusedRouteInside) {
+        TreeState[item.route] = true
+      } else {
+        delete TreeState[item.route]
+      }
     }
-  }, [activeRouteInside, focusedRouteInside, item.route])
+    config.sidebar.autoCollapse ? updateAndPruneTreeState() : updateTreeState()
+  }, [
+    activeRouteInside,
+    focusedRouteInside,
+    item.route,
+    config.sidebar.autoCollapse
+  ])
 
   if (item.type === 'menu') {
     const menu = item as MenuItem
@@ -211,7 +226,7 @@ function File({
   anchors: Heading[]
 }): ReactElement {
   const route = useFSRoute()
-  const onFocus = useContext(OnFocuseItemContext)
+  const onFocus = useContext(OnFocusItemContext)
 
   // It is possible that the item doesn't have any route - for example an external link.
   const active = item.route && [route, route + '/'].includes(item.route + '/')
@@ -408,7 +423,7 @@ export function Sidebar({
           })}
         </div>
         <FocusedItemContext.Provider value={focused}>
-          <OnFocuseItemContext.Provider
+          <OnFocusItemContext.Provider
             value={item => {
               setFocused(item)
             }}
@@ -443,7 +458,7 @@ export function Sidebar({
                 anchors={anchors}
               />
             </div>
-          </OnFocuseItemContext.Provider>
+          </OnFocusItemContext.Provider>
         </FocusedItemContext.Provider>
 
         {hasMenu && (

packages/nextra-theme-docs/src/constants.tsx

@@ -133,6 +133,7 @@ export const themeSchema = z.strictObject({
     labels: z.string()
   }),
   sidebar: z.strictObject({
+    autoCollapse: z.boolean().optional(),
     defaultMenuCollapseLevel: z.number().min(1).int(),
     titleComponent: z.custom<
       ReactNode | FC<{ title: string; type: string; route: string }>