mirror of
https://github.com/discourse/discourse.git
synced 2026-08-05 20:29:55 +08:00
1506fcaec2The styleguide renders its own navigation column beside Discourse's sidebar. The two take roughly a third of the viewport between them, and the forum's sections — Topics, Categories, Tags, Channels — have nothing to do with the component being read about. This registers the styleguide's section list as a hidden sidebar panel that the `styleguide` route claims on entry and releases on exit, then deletes the plugin's own column. It follows the arrangement `/admin` already uses. ### Before <img width="1400" height="1200" alt="before-light" src="https://github.com/user-attachments/assets/c6b05ad9-a664-4883-8dd1-b80cd3c31432" /> <img width="1400" height="1200" alt="before-dark" src="https://github.com/user-attachments/assets/14e3f320-97a2-4256-8473-ed737577b422" /> ### After <img width="1400" height="1200" alt="desktop-foundation-light-styleguide-sidebar" src="https://github.com/user-attachments/assets/18b5f5ca-25d8-4b01-a4f1-618c0f87c09a" /> <img width="1400" height="1200" alt="desktop-foundation-dark-styleguide-sidebar" src="https://github.com/user-attachments/assets/8ffa2423-1a5f-468f-9826-f4fd2dc983c3" /> ### Notes - Sections are built in a cached getter over `allCategories` rather than pushed through `addSidebarSection`. `allCategories` memoizes on first call, so reading it lazily keeps the list complete for plugins that add sections from an initializer, and avoids the re-registration a push-based panel needs in order to redraw. - `isForcingSidebar` is set while the panel is active. The nav used to render unconditionally, so without it a reader whose `navigation_menu` is the header dropdown would silently lose it. - On mobile the sidebar is suppressed and the panel appears in the hamburger, same as the admin panel. - The panel is filterable, which the old markup had no equivalent for. - Section and link names are dasherized (`styleguide-category-atoms`, `styleguide-section-buttons`), which the sidebar base classes document as the contract. ### Section header Section pages now use `DPageHeader`. The breadcrumb row lands level with the sidebar's own header, which is what makes the title line up with the filter field rather than floating between the sidebar's two rows. The color toggle moves onto that row and becomes a three-way light/dark/auto selector, reusing core's `sidebar.footer.interface_color_selector` strings and icons. Color mode is page chrome rather than an action on the page, so it belongs on the utility row rather than beside the title. It now reads the applied stylesheet instead of remembering the mode it last set, which matters because moving between sections rebuilds the component — previously the first click after navigating re-applied the mode already showing and appeared to do nothing. ### Unknown sections `sectionById` returns nothing for a section that does not exist, and the show template then rendered a title from an undefined key, throwing in `I18n.lookup`. The route now redirects to `/404`, matching how category routes handle a missing record. This is a pre-existing bug rather than a regression from this PR, fixed here because the header work touches the same template. The smoke test's nav scrape keys on `data-section-name` rather than the header's rendered text, which only matched because the stylesheet uppercased it. |
||
|---|---|---|
| .. | ||
| colors.scss | ||
| styleguide.scss | ||
| typography.scss | ||
