docs,api-ref: design + algolia fixes (#4775)

* fix algolia results on same page

* fix navigation bar for mobile

* fix eslint configurations

* fix github action

* fix search icon on mobile

* fix code block dark mode

www/docs/src/theme/Navbar/ColorModeToggle/index.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { useColorMode, useThemeConfig } from "@docusaurus/theme-common"
 import ColorModeToggle from "@theme/ColorModeToggle"
 import type { Props } from "@theme/Navbar/ColorModeToggle"
+import clsx from "clsx"
 
 export default function NavbarColorModeToggle({
   className,
@@ -16,9 +17,9 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={className}
-      buttonClassName={
+      buttonClassName={clsx(
         "hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
-      }
+      )}
       value={colorMode}
       onChange={setColorMode}
     />

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

@@ -14,6 +14,8 @@ import { ThemeConfig } from "@medusajs/docs"
 import useIsBrowser from "@docusaurus/useIsBrowser"
 import clsx from "clsx"
 import { useSidebar } from "@site/src/providers/Sidebar"
+import IconSidebar from "../../Icon/Sidebar"
+import IconChevronDoubleLeftMiniSolid from "../../Icon/ChevronDoubleLeftMiniSolid"
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -140,9 +142,11 @@ export default function NavbarContent(): JSX.Element {
                       }, 100)
                     },
                   },
-                  icon: !sidebarContext?.hiddenSidebarContainer
-                    ? "sidebar"
-                    : "chevron-double-left-mini-solid",
+                  Icon: !sidebarContext?.hiddenSidebarContainer ? (
+                    <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ) : (
+                    <IconChevronDoubleLeftMiniSolid iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ),
                 },
               ]}
               className="sidebar-toggler"
@@ -151,7 +155,6 @@ export default function NavbarContent(): JSX.Element {
           <Tooltip text="Switch theme">
             <NavbarColorModeToggle
               className={clsx(
-                "lg:block hidden",
                 "navbar-action-icon-item !w-2 !h-2 [&>button]:!rounded"
               )}
             />

www/docs/src/theme/Navbar/Logo/index.tsx

@@ -11,7 +11,7 @@ export default function NavbarLogo(): JSX.Element {
         titleClassName="navbar__title text--truncate"
       />
       <MobileLogo
-        className="navbar__brand lg:hidden"
+        className="navbar__brand lg:hidden mx-auto"
         imageClassName="navbar__logo"
         titleClassName="navbar__title text--truncate"
       />

www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -19,8 +19,12 @@ export default function MobileSidebarToggle(): JSX.Element {
       className="navbar__toggle !block lg:!hidden clean-btn"
       type="button"
     >
-      {!shown && <IconSidebar />}
-      {shown && <IconXMark />}
+      {!shown && (
+        <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+      {shown && (
+        <IconXMark iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
     </button>
   )
 }