From 16b07b26f88a7ac83e3d2a2faa5d70376fe4f5a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Tue, 14 May 2024 10:20:41 +0200
Subject: [PATCH] Use Navbar from @swmansion/t-rex-ui

---
 docs/src/css/colors.css                       |   6 +-
 docs/src/css/overrides.css                    |  22 ++-
 docs/src/theme/Navbar/Content/index.js        | 118 ----------------
 .../theme/Navbar/Content/styles.module.css    | 126 ------------------
 docs/src/theme/Navbar/Layout/index.js         |  60 ---------
 .../src/theme/Navbar/Layout/styles.module.css |  18 ---
 .../Navbar/MobileSidebar/Layout/index.js      |  59 --------
 .../MobileSidebar/Layout/styles.module.css    |  61 ---------
 .../Navbar/MobileSidebar/PrimaryMenu/index.js |  41 ------
 docs/src/theme/Navbar/index.js                |  20 +++
 10 files changed, 44 insertions(+), 487 deletions(-)
 delete mode 100644 docs/src/theme/Navbar/Content/index.js
 delete mode 100644 docs/src/theme/Navbar/Content/styles.module.css
 delete mode 100644 docs/src/theme/Navbar/Layout/index.js
 delete mode 100644 docs/src/theme/Navbar/Layout/styles.module.css
 delete mode 100644 docs/src/theme/Navbar/MobileSidebar/Layout/index.js
 delete mode 100644 docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css
 delete mode 100644 docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
 create mode 100644 docs/src/theme/Navbar/index.js

diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css
index 934a659add..111f59d5de 100644
--- a/docs/src/css/colors.css
+++ b/docs/src/css/colors.css
@@ -114,9 +114,9 @@
   --swm-color-mode-enabled: var(--swm-navy-light-20);
   --swm-color-mode-disabled-color: var(--swm-navy-light-20);
 
-  --swm-color-mode-enabled-landing: var(--swm-off-white);
-  --swm-color-mode-enabled-color-landing: var(--ifm-font-color-base);
-  --swm-color-mode-disabled-color-landing: var(--swm-off-white);
+  --swm-color-mode-enabled-landing: var(--ifm-font-color-base);
+  --swm-color-mode-enabled-color-landing: var(--swm-off-white);
+  --swm-color-mode-disabled-color-landing: var(--ifm-font-color-base);
 
   /* Typography */
   --ifm-heading-color: var(--ifm-color-primary);
diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css
index 1f45f860ae..bb6e099d7b 100644
--- a/docs/src/css/overrides.css
+++ b/docs/src/css/overrides.css
@@ -140,6 +140,26 @@ table thead tr {
 }
 
 [class*='sidebar'] [class*='logoWrapper'] a {
-  padding-left: 1.5rem;
   align-items: center;
 }
+
+@media (min-width: 996px) {
+  [class*='logoWrapper'] a {
+    padding-left: 1.5rem;
+  }
+  [class*='colorModeToggle'] {
+    margin: 0 1.5em;
+  }
+}
+[class*='colorModeToggle'] {
+  margin: 0 !important;
+}
+
+/* // this wouldn't be in the patch because it only applies to Gesture Hander */
+[class*='navbar__logo'] img {
+  margin-right: 0.5rem;
+}
+
+[class*='logoWrapper'] {
+  justify-content: flex-start !important;
+}
diff --git a/docs/src/theme/Navbar/Content/index.js b/docs/src/theme/Navbar/Content/index.js
deleted file mode 100644
index c014592673..0000000000
--- a/docs/src/theme/Navbar/Content/index.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import {
-  useThemeConfig,
-  ErrorCauseBoundary,
-  useWindowSize,
-} from '@docusaurus/theme-common';
-import {
-  splitNavbarItems,
-  useNavbarMobileSidebar,
-} from '@docusaurus/theme-common/internal';
-import NavbarItem from '@theme/NavbarItem';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
-import NavbarLogo from '@theme/Navbar/Logo';
-import styles from './styles.module.css';
-import clsx from 'clsx';
-import usePageType from '@site/src/hooks/usePageType';
-import AlgoliaSearchBar from '@site/src/components/AlgoliaSearchBar';
-
-function useNavbarItems() {
-  return useThemeConfig().navbar.items;
-}
-
-function NavbarItems({ items, isDocumentation = true }) {
-  return (
-    <>
-      {items.map((item, i) => (
-        <ErrorCauseBoundary
-          key={i}
-          onError={(error) =>
-            new Error(
-              `A theme navbar item failed to render.
-Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
-${JSON.stringify(item, null, 2)}`,
-              { cause: error }
-            )
-          }>
-          <NavbarItem {...item} />
-        </ErrorCauseBoundary>
-      ))}
-    </>
-  );
-}
-function NavbarContentLayout({ left, right }) {
-  const { isLanding } = usePageType();
-
-  return (
-    <div className="navbar__inner">
-      <div
-        className={clsx(
-          'navbar__items',
-          isLanding && 'navbar__items--left-landing'
-        )}>
-        {left}
-      </div>
-      <div
-        className={clsx(
-          'navbar__items navbar__items--right',
-          isLanding && 'navbar__items--right-landing'
-        )}>
-        {right}
-      </div>
-    </div>
-  );
-}
-
-export default function NavbarContent() {
-  const windowSize = useWindowSize();
-  const isMobile = windowSize === 'mobile';
-
-  const { isDocumentation, isLanding } = usePageType();
-  const mobileSidebar = useNavbarMobileSidebar();
-  const items = useNavbarItems();
-  const [leftItems, rightItems] = splitNavbarItems(items);
-  const searchBarItem = items.find((item) => item.type === 'search');
-  return (
-    <NavbarContentLayout
-      left={
-        <>
-          <div
-            className={clsx(
-              isLanding ? styles.logoWrapperLanding : styles.logoWrapper
-            )}>
-            <NavbarLogo />
-          </div>
-          <NavbarItems items={leftItems} />
-          {/* {!isDocumentation && (
-            <NavbarColorModeToggle className={styles.colorModeToggle} />
-          )} */}
-          {!searchBarItem && !isMobile && !isLanding && <AlgoliaSearchBar />}
-          {!isMobile && isDocumentation && (
-            <NavbarColorModeToggle className={styles.colorModeToggle} />
-          )}
-        </>
-      }
-      right={
-        <>
-          {!isDocumentation && (
-            <NavbarColorModeToggle className={styles.colorModeToggle} />
-          )}
-          <NavbarItems
-            items={
-              isMobile
-                ? []
-                : isLanding
-                ? rightItems
-                : rightItems.filter((item) => item.label !== 'Docs')
-            }
-            isDocumentation={isDocumentation}
-          />
-          {!mobileSidebar.disabled && !isLanding && (
-            <NavbarMobileSidebarToggle />
-          )}
-        </>
-      }
-    />
-  );
-}
diff --git a/docs/src/theme/Navbar/Content/styles.module.css b/docs/src/theme/Navbar/Content/styles.module.css
deleted file mode 100644
index 7b1b4567c8..0000000000
--- a/docs/src/theme/Navbar/Content/styles.module.css
+++ /dev/null
@@ -1,126 +0,0 @@
-nav {
-  --ifm-navbar-padding-vertical: 0 1.25rem;
-  --ifm-navbar-padding-horizontal: 0 0;
-  --ifm-navbar-height: 60px;
-
-  --ifm-navbar-shadow: none;
-}
-
-.colorModeToggle {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-@media (max-height: 768px) {
-  nav {
-    --ifm-navbar-height: 56px;
-  }
-}
-
-@media (max-width: 996px) {
-  nav {
-    --ifm-navbar-padding-vertical: 0;
-    --ifm-navbar-padding-horizontal: 1.5em;
-  }
-}
-
-@media (min-width: 996px) {
-  .logoWrapper {
-    display: flex;
-    padding-left: 1.5rem;
-  }
-  .logoWrapperLanding {
-    display: flex;
-    justify-content: center;
-  }
-  .colorModeToggle {
-    margin: 0 1.5rem;
-  }
-}
-
-[class*='navbar__inner'] {
-  align-items: center;
-}
-
-/* In other pages than documentation, Docusaurus disables margin-right for the last element on the right side.
- * This block disables this behavior.
- */
-
-[class*='dropdown__menu'] {
-  background-color: var(--swm-dropdown-versions-background);
-  border-radius: 4px;
-  margin-top: 0;
-  padding: 8px;
-  width: 100%;
-}
-
-[class*='logoWrapperLanding'] img {
-  height: 50px;
-}
-
-[class*='navbar__title'] img {
-  width: 177px;
-}
-
-[class*='logoWrapperLanding'] a {
-  display: flex;
-}
-
-[class*='navbar__items--left-landing'] {
-  gap: 1.5rem;
-  display: flex;
-  align-items: flex-start;
-}
-
-[class*='navbar__items--left-landing'] > div:nth-child(2) {
-  margin-top: 0.25rem;
-}
-
-@media (min-width: 768px) {
-  [class*='navbar__items--left-landing'] {
-    gap: 3rem;
-  }
-}
-
-@media (min-width: 996px) {
-  [class*='navbar__items--right'] > :last-child {
-    padding: var(--ifm-navbar-item-padding-vertical)
-      var(--ifm-navbar-item-padding-horizontal);
-  }
-  [class*='navbar__items--left-landing'] {
-    gap: 5rem;
-  }
-  [class*='navbar__items--left'] {
-    flex: 1;
-    width: 100%;
-  }
-}
-
-[class*='dropdown__link--active'] {
-  color: var(--swm-dropdown-versions-item-active) !important;
-  background-color: var(--swm-dropdown-versions-item-background-active);
-}
-
-[class*='dropdown__link--active']:hover {
-  color: var(--swm-dropdown-versions-item-active-hover) !important;
-}
-
-@media (max-width: 996px) {
-  [class*='navbar__item'] {
-    display: flex;
-    padding: 0;
-  }
-  [class*='navbar__items--left-landing'] > div:nth-child(2) {
-    margin-top: 0.5rem;
-  }
-  [class*='navbar__items--right-landing'] {
-    gap: 2.5rem;
-  }
-}
-
-@media (max-width: 420px) {
-  [class*='navbar__items'] {
-    font-size: 18px;
-  }
-}
diff --git a/docs/src/theme/Navbar/Layout/index.js b/docs/src/theme/Navbar/Layout/index.js
deleted file mode 100644
index c0d4d79446..0000000000
--- a/docs/src/theme/Navbar/Layout/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { useThemeConfig } from '@docusaurus/theme-common';
-import {
-  useHideableNavbar,
-  useNavbarMobileSidebar,
-} from '@docusaurus/theme-common/internal';
-import { translate } from '@docusaurus/Translate';
-import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
-import styles from './styles.module.css';
-import usePageType from '@site/src/hooks/usePageType';
-
-function NavbarBackdrop(props) {
-  return (
-    <div
-      role="presentation"
-      {...props}
-      className={clsx('navbar-sidebar__backdrop', props.className)}
-    />
-  );
-}
-
-export default function NavbarLayout({ children }) {
-  const {
-    navbar: { hideOnScroll, style },
-  } = useThemeConfig();
-  const mobileSidebar = useNavbarMobileSidebar();
-  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
-  const { isLanding } = usePageType();
-
-  return (
-    <div>
-      <nav
-        ref={navbarRef}
-        aria-label={translate({
-          id: 'theme.NavBar.navAriaLabel',
-          message: 'Main',
-          description: 'The ARIA label for the main navigation',
-        })}
-        className={clsx(
-          'navbar',
-          !isLanding && 'navbar--fixed-top',
-          isLanding && styles.navbarLanding,
-          hideOnScroll && [
-            styles.navbarHideable,
-            !isNavbarVisible && styles.navbarHidden,
-          ],
-          {
-            'navbar--dark': style === 'dark',
-            'navbar--primary': style === 'primary',
-            'navbar-sidebar--show': mobileSidebar.shown,
-          }
-        )}>
-        {children}
-        <NavbarBackdrop onClick={mobileSidebar.toggle} />
-        <NavbarMobileSidebar />
-      </nav>
-    </div>
-  );
-}
diff --git a/docs/src/theme/Navbar/Layout/styles.module.css b/docs/src/theme/Navbar/Layout/styles.module.css
deleted file mode 100644
index 973609ff97..0000000000
--- a/docs/src/theme/Navbar/Layout/styles.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.navbarHideable {
-  transition: transform var(--ifm-transition-fast) ease;
-}
-
-.navbarHidden {
-  transform: translate3d(0, calc(-100% - 2px), 0);
-}
-
-[class*='navbar-sidebar__backdrop'] {
-  background-color: var(--swm-sidebar-backdrop);
-}
-
-.navbarLanding {
-  position: relative;
-  background-color: transparent;
-  padding-top: 2rem;
-  padding: 0 1.25rem 0 1.5rem;
-}
diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js
deleted file mode 100644
index a2a8b96ad1..0000000000
--- a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import AlgoliaSearchBar from '@site/src/components/AlgoliaSearchBar';
-import usePageType from '@site/src/hooks/usePageType';
-import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';
-import { useLocation } from '@docusaurus/router';
-
-function isActive(path, locationPathname) {
-  return locationPathname.startsWith(path);
-}
-
-export default function NavbarMobileSidebarLayout({ header, secondaryMenu }) {
-  const { isLanding } = usePageType();
-
-  const data = useAllDocsData();
-  const { versions } = data.default;
-  const reversed = [...versions].reverse();
-
-  const location = useLocation();
-  const activeVersion = reversed.find((version) =>
-    isActive(version.path, location.pathname)
-  );
-
-  return (
-    <div className="navbar-sidebar">
-      {header}
-      {!isLanding && <AlgoliaSearchBar />}
-      <div className={clsx('navbar-sidebar__items')}>
-        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
-      </div>
-      <div className={styles.sidebarFooter}>
-        <div className={styles.sidebarVersions}>
-          <span className={styles.sidebarVersionLabel}>Versions:</span>
-          {reversed.map((version) => {
-            return (
-              <a
-                key={version.label}
-                href={
-                  version.isLast
-                    ? `${version.path}/${version.mainDocId}`
-                    : version.path
-                }
-                className={clsx(
-                  styles.sidebarVersion,
-                  activeVersion?.label === version.label && styles.active
-                )}>
-                {version.label}
-              </a>
-            );
-          })}
-        </div>
-        <a href="https://github.com/software-mansion/react-native-reanimated/tree/main/docs">
-          <div className={clsx(styles.sidebarGithubIcon, 'header-github')} />
-        </a>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css b/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css
deleted file mode 100644
index e21f4d6dfa..0000000000
--- a/docs/src/theme/Navbar/MobileSidebar/Layout/styles.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-[class*='navbar-sidebar__items'] {
-  --swm-navbar-sidebar-items-height: 127px; /* Overall height of additional items in mobile sidebar */
-  height: calc(
-    100% - var(--ifm-navbar-height) - var(--swm-navbar-sidebar-items-height)
-  );
-  padding-left: 1rem;
-}
-
-[class*='navbar-sidebar__back'] {
-  display: none;
-}
-
-[class*='navbar-sidebar__backdrop'] {
-  display: block;
-}
-
-[class*='navbar-sidebar__brand'] {
-  padding-left: 20px;
-}
-
-@media (max-width: 996px) {
-  [class*='navbar-sidebar__brand'] {
-    --ifm-navbar-height: 68px;
-  }
-}
-
-[class*='navbar-sidebar'] {
-  background-color: var(--swm-off-background);
-}
-
-.sidebarGithubIcon {
-  width: 26px;
-  height: 26px;
-  cursor: pointer;
-}
-
-.sidebarFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: var(--ifm-font-weight-semibold);
-
-  padding: 0 1em;
-
-  height: 4em;
-  background-color: var(--swm-sidebar-elements-background);
-}
-
-.sidebarVersionLabel {
-  margin-right: 12px;
-}
-
-.sidebarVersion {
-  margin: 0 8px;
-  color: var(--swm-sidebar-elements-version-inactive);
-}
-
-.active {
-  color: var(--swm-sidebar-elements-version-text);
-  text-decoration: underline;
-}
diff --git a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js b/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
deleted file mode 100644
index a58ca7f91b..0000000000
--- a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { useThemeConfig } from '@docusaurus/theme-common';
-import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
-import NavbarItem from '@theme/NavbarItem';
-
-function useNavbarItems() {
-  // TODO temporary casting until ThemeConfig type is improved
-  return useThemeConfig().navbar.items;
-}
-
-const ignoredClassNames = ['header-github'];
-
-// Filter items on mobile sidebar (such as GitHub icon) that contains specified className
-function filterIgnoredItems(items) {
-  return items.filter((item) =>
-    item.className ? !ignoredClassNames.includes(item.className) : item
-  );
-}
-
-// 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();
-  const filteredItems = filterIgnoredItems(items);
-
-  return (
-    <ul className="menu__list">
-      {filteredItems.map((item, i) => (
-        <NavbarItem
-          mobile
-          {...item}
-          onClick={() => mobileSidebar.toggle()}
-          key={i}
-        />
-      ))}
-    </ul>
-  );
-}
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
new file mode 100644
index 0000000000..5056c86cdf
--- /dev/null
+++ b/docs/src/theme/Navbar/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Navbar } from '@swmansion/t-rex-ui';
+
+export default function NavbarWrapper(props) {
+  const titleImages = {
+    light: useBaseUrl('/img/title.svg'),
+    dark: useBaseUrl('/img/title-dark.svg'),
+  };
+
+  const heroImages = {
+    logo: useBaseUrl('/img/logo-hero.svg'),
+    title: useBaseUrl('/img/title.svg'),
+  };
+  return (
+    <>
+      <Navbar heroImages={heroImages} titleImages={titleImages} {...props} />
+    </>
+  );
+}