docs: redesigned documentation (#2539)

* docs: redesigned navigation bar (#2478)

* docs: redesigned homepage (#2480)

* docs: redesigned homepage

* fixed link

* docs: redesigned notes (#2491)

* docs: Applied Typography redesign rules (#2516)

* changes to typography

* small changes and fixes

* docs: redesigned table of content (#2518)

* redesigning toc

* finalized table of content design

* docs: redesigned code blocks (#2519)

* docs: redesigned code blocks

* removed unused package

* docs: redesigned survey and content footer (#2522)

* fixes to inline code

* redesigned doc footer

* docs: redesigned footer (#2523)

* docs: changed dark mode colors (#2524)

* docs: redesigned sidebar (#2535)

* docs: redesigned search modal (#2537)

* docs: resolved loose ends (#2538)

* added spacing for tabs

* docs: added no-zoom class for deploy images

* fix to tooltip design for inline code

www/docs/src/theme/Navbar/Content/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import styles from './styles.module.css';
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+function NavbarItems({items}) {
+  return (
+    <>
+      {items.map((item, i) => (
+        <NavbarItem {...item} key={i} />
+      ))}
+    </>
+  );
+}
+function NavbarContentLayout({left, right}) {
+  return (
+    <div className="navbar__inner">
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
+    </div>
+  );
+}
+export default function NavbarContent() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  return (
+    <NavbarContentLayout
+      left={
+        // TODO stop hardcoding items?
+        <>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        // TODO stop hardcoding items?
+        // Ask the user to add the respective navbar items => more flexible
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          <NavbarSearch>
+            <SearchBar />
+          </NavbarSearch>
+        </>
+      }
+    />
+  );
+}

www/docs/src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

www/docs/src/theme/Navbar/MobileSidebar/Header/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+function CloseButton() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <button
+      type="button"
+      className="clean-btn navbar-sidebar__close"
+      onClick={() => mobileSidebar.toggle()}>
+      <IconClose color="var(--ifm-color-emphasis-600)" />
+    </button>
+  );
+}
+export default function NavbarMobileSidebarHeader() {
+  return (
+    <div className="navbar-sidebar__brand">
+      <NavbarLogo />
+      <CloseButton />
+    </div>
+  );
+}

www/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  // TODO how can the order be defined for mobile?
+  // Should we allow providing a different list of items?
+  const items = useNavbarItems();
+  return (
+    <ul className="menu__list">
+      {items.map((item, i) => (
+        <NavbarItem
+          mobile
+          {...item}
+          onClick={() => mobileSidebar.toggle()}
+          key={i}
+        />
+      ))}
+      <NavbarColorModeToggle className='mobile' />
+    </ul>
+  );
+}