docs: add versions dropdown

packages/website/docusaurus.config.ts

@@ -110,21 +110,12 @@ const config: Config = {
           activeBasePath: 'play',
         },
         {
-          type: 'custom-settingsNavbarItem',
+          type: 'custom-versionsNavbarItem',
           position: "right",
         },
-        // {
-        //   type: 'custom-contentDensityNavbarItem',
-        //   position: "right",
-        // },
-        // {
-        //   type: 'custom-TextDirectionNavbarItem',
-        //   position: "right",
-        // },
         {
-          label: `v${packageJson.version}`,
+          type: 'custom-settingsNavbarItem',
           position: "right",
-          to: `https://github.com/SAP/ui5-webcomponents/releases/tag/v${packageJson.version}`,
         },
         {
           type: 'custom-GitHubNavbarItem',

packages/website/src/components/NavbarItems/VersionNavbarItem.js

@@ -0,0 +1,124 @@
+import "./index.css";
+import clsx from "clsx";
+import { useState } from "react";
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+import NavbarItem from "@theme/NavbarItem";
+import packageJson from "../../../package.json";
+
+const packageJsonVersion = packageJson.version;
+
+import {
+    Collapsible,
+} from "@docusaurus/theme-common";
+
+
+function getVersion() {
+    if (!location.pathname.includes("nightly") ) {
+        return "v1";
+    }
+    return "Nightly";
+}
+
+
+function getLabel(version) {
+    const currVersion = getVersion();
+    if (version === currVersion) {
+         return packageJsonVersion;
+    }
+    return version;
+}
+
+
+
+function VersionNavbarItemDesktop() {
+    const [version, setVersion] = useState(getVersion());
+    const [showDropdown, setShowDropdown] = useState(false);
+
+    return <div
+        className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', 'dropdown--right', {
+            'dropdown--show': showDropdown,
+        })}>
+
+        <NavbarNavLink
+            aria-haspopup="true"
+            aria-expanded={showDropdown}
+            role="button"
+            href="#"
+            label={getLabel(version)}
+            className="navbar__link"
+            onClick={(e) => e.preventDefault()}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    setShowDropdown(!showDropdown);
+                }
+            }}>
+        </NavbarNavLink>
+        <ul className="dropdown__menu">
+            <NavbarItem
+                label={getLabel("Nightly")}
+                isDropdownItem
+                target="_self"
+                href="http://localhost:3000/nightly"
+                onClick={() => { setVersion("Nightly") }}
+                className={clsx({ 'menu__link--active': version === "Nightly" })}
+            />
+            <NavbarItem
+                label={getLabel("v1")}
+                isDropdownItem
+                target="_self"
+                href="http://localhost:3000/"
+                onClick={() => { setVersion("v1") }}
+                className={clsx({ 'menu__link--active': version === "v1" })}
+            />
+        </ul>
+    </div>;
+}
+
+function VersionNavbarItemMobile() {
+    const [version, setVersion] = useState(getVersion());
+    const [collapsed, setCollapsed] = useState(false)
+
+    return (
+        <li
+            className={clsx("menu__list-item", {
+                "menu__list-item--collapsed": collapsed,
+            })}>
+            <NavbarNavLink
+                role="button"
+                label="Versions"
+                className={clsx(
+                    "menu__link menu__link--sublist menu__link--sublist-caret",
+                )}
+                onClick={(e) => {
+                    setCollapsed(!collapsed);
+                }} />
+            <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+                <NavbarItem
+                    label={getLabel("Nightly")}
+                    mobile
+                    href="http://localhost:3000/nightly"
+                    isDropdownItem
+                    onClick={() => { setVersion("nightly") }}
+                    className={clsx({ "menu__link--active": version === "nightly" })}
+                />
+                 <NavbarItem
+                    label={getLabel("v1")}
+                    mobile
+                    href="http://localhost:3000/v1"
+                    isDropdownItem
+                    onClick={() => { setVersion("v1") }}
+                    className={clsx({ "menu__link--active": version === "v1" })}
+                />
+            </Collapsible>
+        </li>
+    )
+}
+
+export default function VersionNavbarItem({
+    mobile = false,
+    ...props
+}) {
+    const Comp = mobile ? VersionNavbarItemMobile : VersionNavbarItemDesktop;
+    return <Comp {...props} />;
+}

packages/website/src/css/custom.css

@@ -148,6 +148,10 @@
   fill: var(--ifm-navbar-link-hover-color);
 }
 
+.dropdown__link svg {
+  display: none;
+}
+
 code {
   overflow-wrap: anywhere;
 }

packages/website/src/theme/NavbarItem/ComponentTypes.js

@@ -1,9 +1,11 @@
 import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
 import SettingsNavbarItem from '@site/src/components/NavbarItems/SettingsNavbarItem';
+import VersionNavbarItem from '@site/src/components/NavbarItems/VersionNavbarItem';
 import GitHubNavBarItem from '@site/src/components/NavbarItems/GitHubNavBarItem';
 
 export default {
   ...ComponentTypes,
   'custom-settingsNavbarItem': SettingsNavbarItem,
+  'custom-versionsNavbarItem': VersionNavbarItem,
   'custom-GitHubNavbarItem': GitHubNavBarItem,
 };