docs: add toc to docs-mode only stories (#4347)

Author: Lukas742

.storybook/components/TableOfContent.tsx

@@ -25,7 +25,10 @@ function makeIds(headingSelector) {
   });
 }
 
-export function TableOfContent({ headingSelector = 'h2:not(.noAnchor), h3:not(.noAnchor), h4:not(.noAnchor)' }) {
+export function TableOfContent({
+  headingSelector = 'h2:not(.noAnchor), h3:not(.noAnchor), h4:not(.noAnchor)',
+  onlyDisplaySideNav = false
+}) {
   useEffect(() => {
     makeIds(headingSelector);
 
@@ -47,8 +50,10 @@ export function TableOfContent({ headingSelector = 'h2:not(.noAnchor), h3:not(.n
 
   return (
     <>
-      <h3 className={`${classes.header} noAnchor`}>Contents</h3>
-      <div className={classes.fixedContainer}>
+      <h3 className={`${classes.header} noAnchor`} data-show-small={!onlyDisplaySideNav}>
+        Contents
+      </h3>
+      <div className={classes.fixedContainer} data-show-small={!onlyDisplaySideNav}>
         <div className={`js-toc ${classes.toc}`} id="toc-container" />
       </div>
     </>

.storybook/components/ToC.module.css

@@ -31,6 +31,12 @@
 }
 
 @media (max-width: 1329px) {
+  .header[data-show-small='false'] {
+    display: none;
+  }
+  .fixedContainer[data-show-small='false'] {
+    display: none;
+  }
   .toc {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }

docs/Changelog.mdx

@@ -1,9 +1,11 @@
 import { Meta, Markdown } from '@storybook/blocks';
-import { Footer } from '../.storybook/components/Footer';
 import Changelog from '../CHANGELOG.md?raw';
+import { Footer, TableOfContent } from '@sb/components';
 
 <Meta title="Change Log" />
 
+<TableOfContent headingSelector="h2:not(.noAnchor)" onlyDisplaySideNav />
+
 <Markdown>{Changelog}</Markdown>
 
 <Footer />

docs/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Footer } from '@sb/components';
+import { Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/blocks';
 import { Link, MessageStrip } from '@ui5/webcomponents-react';
 import { VersionTable } from '@sb/components/VersionTable';
@@ -21,6 +21,8 @@ UI5 Web Components for React is a Fiori compliant React library built on top of
 With the help of UI5 Web Components for React, you can use UI5 Web Components as if they were native React components.
 In addition to that, UI5 Web Components for React is providing complex components and layouts on top of the UI5 Web Components.
 
+<TableOfContent />
+
 ## Requirements
 
 - [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**16.14.0 or higher**)

docs/knowledge-base/Internationalization.mdx

@@ -1,16 +1,20 @@
 import { Meta } from '@storybook/addon-docs';
 import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
-import { Footer } from '@sb/components';
+import { Footer, TableOfContent } from '@sb/components';
 
 <Meta title="Internationalization" />
 
+<TableOfContent />
+
 # Setup Internationalization (i18n)
 
 UI5 Web Components (for React) aim to be feature rich and with a minimal code footprint at the same time.
 In order to achieve this, most UI5 Web Components packages ship their assets as `.json` files while also providing a public module import for them.
 
 **Prerequisite: This guide requires `@ui5/webcomponents-react@^0.14.0` and `@ui5/webcomponents@^1.0.0-rc.12` or newer.**
 
+## Make your App translatable
+
 In order to make your app translatable into various languages, you need to import the following asset:
 
 ```js

docs/knowledge-base/Styling.mdx

@@ -1,12 +1,16 @@
 import { Meta } from '@storybook/addon-docs';
 import { MyCustomElement } from '../styling/MyCustomElement';
 import { MessageStrip, MessageStripDesign, ThemeProvider } from '@ui5/webcomponents-react';
-import { Footer } from '@sb/components';
+import { Footer, TableOfContent } from '@sb/components';
 
 <Meta title="Styling" />
 
 # Styling
 
+<TableOfContent />
+
+## Styling UI5 Web Components for React components
+
 You can change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
 Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into the `<head>`.
 For example, if you want to change the color of all texts that use the `--sapTextColor` variable, you can create an additional `style` tag with the following content: