f07dc0384f
* initial implementation of search modal * added hit and search suggestions * added support for multiple indices * updated sample env * added close when click outside dropdown * test for mobile * added mobile design * added shortcut * dark mode fixes * added search to docs * added plugins filter * added React import * moved filters to configurations * handled error on page load * change suggestion text * removed hits limit * handle select all * open link in current tab * change highlight colors * added support for shortcuts + auto focus * change header and footer * redesigned search ui
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import clsx from "clsx"
|
|
import NavbarLink from "./Link"
|
|
import NavbarColorModeToggle from "./ColorModeToggle"
|
|
import NavbarLogo from "./Logo"
|
|
import getLinkWithBasePath from "../../utils/get-link-with-base-path"
|
|
import FeedbackModal from "./FeedbackModal"
|
|
import MobileMenu from "./MobileMenu"
|
|
import SearchModalOpener from "../Search/ModalOpener"
|
|
|
|
const Navbar = () => {
|
|
return (
|
|
<nav
|
|
className={clsx(
|
|
"h-navbar sticky top-0 w-full justify-between",
|
|
"bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base dark:border-medusa-border-base-dark z-[400] border-b"
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"h-navbar max-w-xxl py-0.75 sticky top-0 mx-auto flex w-full justify-between px-1 lg:px-3"
|
|
)}
|
|
>
|
|
<div className="hidden w-full items-center gap-0.5 lg:flex lg:w-auto lg:gap-1.5">
|
|
<NavbarLogo />
|
|
<div className="hidden items-center gap-1.5 lg:flex">
|
|
<NavbarLink href="https://docs.medusajs.com/" label="Docs" />
|
|
<NavbarLink
|
|
href="https://docs.medusajs.com/user-guide"
|
|
label="User Guide"
|
|
/>
|
|
<NavbarLink
|
|
href={getLinkWithBasePath("/store")}
|
|
label="Store API"
|
|
activeValue="store"
|
|
/>
|
|
<NavbarLink
|
|
href={getLinkWithBasePath("/admin")}
|
|
label="Admin API"
|
|
activeValue="admin"
|
|
/>
|
|
<NavbarLink href="https://docs.medusajs.com/ui" label="UI" />
|
|
</div>
|
|
</div>
|
|
<div className="hidden min-w-0 flex-1 items-center justify-end gap-0.5 lg:flex">
|
|
<div>
|
|
<SearchModalOpener />
|
|
</div>
|
|
<NavbarColorModeToggle />
|
|
<FeedbackModal />
|
|
</div>
|
|
<MobileMenu />
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|