docs: refactor style for categories that have no category page (#41325)

This makes the code mode obvious by adding a class instead of repeating classes for both `tutorial` and `understand`. Also, it fixes the style of collapsible subitems.

GitOrigin-RevId: 5728c0665160d657f75dabe21e95b61626496ec9

Author: Nicolapps

npm-packages/docs/sidebars.js

@@ -59,7 +59,7 @@ const sidebars = {
       label: "Tutorial",
       link: { type: "doc", id: "tutorial/index" },
       items: [{ type: "autogenerated", dirName: "tutorial" }],
-      className: "convex-sidebar-tutorial",
+      className: "convex-sidebar-tutorial convex-sidebar-no-category-page",
     },
     {
       type: "category",
@@ -73,7 +73,7 @@ const sidebars = {
       label: "Understand Convex",
       link: { type: "doc", id: "understanding/index" },
       items: [{ type: "autogenerated", dirName: "understanding" }],
-      className: "convex-sidebar-understand",
+      className: "convex-sidebar-understand convex-sidebar-no-category-page",
     },
     {
       type: "html",

npm-packages/docs/src/css/custom.css

@@ -724,30 +724,17 @@ ul.menu__list {
   display: none;
 }
 
-/* Tutorial is special, it forwards to an internal page. Remove all this when we ban section pages. */
-.convex-sidebar-tutorial .menu__list-item-collapsible--active {
+/* Fix the active state of categories that forward to an internal page in the category. */
+.convex-sidebar-no-category-page > .menu__list-item-collapsible--active {
   background: var(--ifm-background-color);
 }
-.convex-sidebar-tutorial .menu__list-item-collapsible--active:hover {
-  background: var(--ifm-menu-color-background-hover);
-}
-.convex-sidebar-tutorial
-  .menu__list-item-collapsible--active
-  > .menu__link--active {
-  font-weight: 400;
-}
 
-/* Understanding is special, it forwards to an internal page. Remove all this when we ban section pages. */
-.convex-sidebar-understand .menu__list-item-collapsible--active {
-  background: var(--ifm-background-color);
-}
-
-.convex-sidebar-understand .menu__list-item-collapsible--active:hover {
+.convex-sidebar-no-category-page > .menu__list-item-collapsible--active:hover {
   background: var(--ifm-menu-color-background-hover);
 }
 
-.convex-sidebar-understand
-  .menu__list-item-collapsible--active
+.convex-sidebar-no-category-page
+  > .menu__list-item-collapsible--active
   > .menu__link--active {
   font-weight: 400;
 }