update Navbar icons and svg CSS

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -237,7 +237,7 @@ body {
 }
 
 svg * {
-  stroke: rgb(var(--lsd-text-primary));
+  fill: rgb(var(--lsd-text-primary));
 }
 
 .grid {
@@ -540,31 +540,21 @@ div.w-10 > a:not(:last-child) {
   border-left: 1px solid rgb(var(--lsd-border-primary));
 }
 
-@media (max-width: 576px) {
-  :root {
-    --ifm-global-spacing: 0.5rem;
-    --ifm-spacing-vertical: var(--ifm-global-spacing);
-    --ifm-spacing-horizontal: var(--ifm-global-spacing);
+.cursor-pointer {
+  cursor: pointer;
+}
 
-    --ifm-button-size-multiplier: 1.25;
+.navbar__item {
+  display: inline-flex;
+  align-items: center;
+}
 
-    --ifm-button-padding-horizontal: calc(
-      var(--ifm-button-size-multiplier) * var(--ifm-spacing-horizontal)
-    );
-    --ifm-button-padding-vertical: calc(
-      var(--ifm-button-size-multiplier) * var(--ifm-spacing-vertical)
-    );
+.dropdown > .navbar__link:after {
+  display: none;
+}
 
-    --ifm-alert-padding-horizontal: calc(2 * var(--ifm-spacing-horizontal));
-    --ifm-alert-padding-vertical: calc(2 * var(--ifm-spacing-vertical));
-  }
-
-  .markdown > h2 {
-    --ifm-h2-font-size: 1.75rem;
-  }
-  .markdown h4 {
-    --ifm-h4-font-size: 1.25rem !important;
-  }
+.margin-left-8 {
+  margin-left: 8px;
 }
 
 @include utils.responsive('lg', 'down') {
@@ -592,3 +582,30 @@ div.w-10 > a:not(:last-child) {
     display: none;
   }
 }
+
+@include utils.responsive('sm', 'down') {
+  :root {
+    --ifm-global-spacing: 0.5rem;
+    --ifm-spacing-vertical: var(--ifm-global-spacing);
+    --ifm-spacing-horizontal: var(--ifm-global-spacing);
+
+    --ifm-button-size-multiplier: 1.25;
+
+    --ifm-button-padding-horizontal: calc(
+      var(--ifm-button-size-multiplier) * var(--ifm-spacing-horizontal)
+    );
+    --ifm-button-padding-vertical: calc(
+      var(--ifm-button-size-multiplier) * var(--ifm-spacing-vertical)
+    );
+
+    --ifm-alert-padding-horizontal: calc(2 * var(--ifm-spacing-horizontal));
+    --ifm-alert-padding-vertical: calc(2 * var(--ifm-spacing-vertical));
+  }
+
+  .markdown > h2 {
+    --ifm-h2-font-size: 1.75rem;
+  }
+  .markdown h4 {
+    --ifm-h4-font-size: 1.25rem !important;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx

@@ -7,7 +7,6 @@ import {
 } from '@docusaurus/theme-common/internal'
 import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
-import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'
 import styles from './styles.module.css'
 import { Typography } from '@acid-info/lsd-react'
 
@@ -87,7 +86,16 @@ export default function DocBreadcrumbs() {
         itemScope
         itemType="https://schema.org/BreadcrumbList"
       >
-        {homePageRoute && <HomeBreadcrumbItem />}
+        {homePageRoute && (
+          <Typography
+            className={clsx('breadcrumbs__item')}
+            variant="body3"
+            component="a"
+            href="/"
+          >
+            Home
+          </Typography>
+        )}
         {breadcrumbs.map((item, idx) => {
           const isLast = idx === breadcrumbs.length - 1
           return (

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useRef, useEffect } from 'react'
+import clsx from 'clsx'
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common'
+import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal'
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'
+import NavbarItem from '@theme/NavbarItem'
+import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react'
+
+function isItemActive(item, localPathname) {
+  if (isSamePath(item.to, localPathname)) {
+    return true
+  }
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+    return true
+  }
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true
+  }
+  return false
+}
+
+function containsActiveItems(items, localPathname) {
+  return items.some((item) => isItemActive(item, localPathname))
+}
+
+function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}) {
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
+        return
+      }
+      setShowDropdown(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('touchstart', handleClickOutside)
+    document.addEventListener('focusin', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('touchstart', handleClickOutside)
+      document.removeEventListener('focusin', handleClickOutside)
+    }
+  }, [dropdownRef])
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}
+    >
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            setShowDropdown(!showDropdown)
+          }
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ArrowDownIcon className={clsx('margin-left-8', 'cursor-pointer')} />
+      <ul className="dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}) {
+  const localPathname = useLocalPathname()
+  const containsActive = containsActiveItems(items, localPathname)
+  const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
+    initialState: () => !containsActive,
+  })
+
+  // Expand/collapse if any item active after a navigation
+  useEffect(() => {
+    if (containsActive) {
+      setCollapsed(!containsActive)
+    }
+  }, [localPathname, containsActive, setCollapsed])
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}
+    >
+      <NavbarNavLink
+        role="button"
+        className={clsx(
+          'menu__link menu__link--sublist menu__link--sublist-caret',
+          className,
+        )}
+        {...props}
+        onClick={(e) => {
+          e.preventDefault()
+          toggleCollapsed()
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  )
+}
+export default function DropdownNavbarItem({ mobile = false, ...props }) {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop
+  //@ts-ignore
+  return <Comp {...props} />
+}

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -4,8 +4,7 @@ import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'
 import { translate } from '@docusaurus/Translate'
 import { useLocation } from '@docusaurus/router'
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'
-import IconLanguage from '@theme/Icon/Language'
-import styles from './styles.module.css'
+
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
@@ -50,7 +49,8 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale]?.label
+    : localeConfigs[currentLocale]?.label.substring(0, 2).toUpperCase()
+
   return (
     <DropdownNavbarItem
       {...props}