feat: update navbar components

docusaurus.config.ts

@@ -75,8 +75,25 @@ const config: Config = {
       items: [
         {
           position: 'left',
-          href: 'https://www.bentoml.com',
-          label: 'Product'
+          label: 'Product',
+          items: [
+            {
+              label: 'Bento Inference Platform',
+              description:
+                'Full control without the complexity. Self-host anywhere. Serve any model. Optimize for performance.',
+              text: 'Book a Demo',
+              href: 'https://l.bentoml.com/signup-llm-inference-handbook',
+              icon: '/img/inference-platform.svg'
+            },
+            {
+              label: 'BentoML Open-Source',
+              description:
+                'The most flexible way to serve AI/ML models and custom inference pipelines in production',
+              text: 'Github',
+              href: 'https://github.com/bentoml',
+              icon: '/img/open-source.svg'
+            }
+          ]
         },
         {
           position: 'left',
@@ -85,18 +102,31 @@ const config: Config = {
         },
         {
           position: 'left',
-          href: 'https://www.bentoml.com/blog',
-          label: 'Blog'
+          href: 'https://docs.bentoml.com/?_gl=1*m5ucq6*_gcl_au*MjA4MzA3MTQ2NS4xNzQ3OTI4MDA5',
+          label: 'Docs'
         },
         {
           position: 'left',
-          href: 'https://www.bentoml.com/customers',
-          label: 'Customers'
+          label: 'Learn',
+          items: [
+            {
+              href: 'https://www.bentoml.com/blog',
+              label: 'Blog'
+            },
+            {
+              href: 'https://www.bentoml.com/llm',
+              label: 'LLM Inference Handbook'
+            },
+            {
+              href: 'https://docs.bentoml.com/en/latest/examples/overview.html?_gl=1*m5mrt*_gcl_au*MjA4MzA3MTQ2NS4xNzQ3OTI4MDA5',
+              label: 'Featured Examples'
+            }
+          ]
         },
         {
           position: 'left',
-          href: 'https://l.bentoml.com/join-slack-llm-inference-handbook',
-          label: 'Community'
+          href: 'https://www.bentoml.com/customers',
+          label: 'Customers'
         },
         {
           position: 'right',

src/css/custom.css

@@ -45,6 +45,22 @@
   display: swap;
 }
 
+@font-face {
+  font-family: 'ReplicaLL';
+  src: url('/fonts/ReplicaLL-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  display: swap;
+}
+
+@font-face {
+  font-family: 'ReplicaLL';
+  src: url('/fonts/ReplicaLL-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  display: swap;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;
@@ -59,6 +75,7 @@
 
   /* navbar */
   --ifm-navbar-height: 81px;
+  --ifm-dropdown-hover-background-color: none;
 
   /* font */
   --ifm-heading-font-family: 'Inter', sans-serif;
@@ -70,6 +87,9 @@
   --bentoml-font-family:
     'AtlasGrotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --bentoml-card-font-family:
+    'ReplicaLL', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --bentoml-body-offset: 3rem;
 }
 

src/theme/Navbar/Logo/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.css'
 export default function NavbarLogo(): ReactNode {
   return (
     <Logo
+      target="_self"
       imageClassName={styles.navbarLogo}
       titleClassName="navbar__title text--truncate"
     />

src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx

@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect, useMemo, type ReactNode } from 'react'
+import clsx from 'clsx'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import NavbarNavLink, { BaseNavLink } from '@theme/NavbarItem/NavbarNavLink'
+import NavbarItem from '@theme/NavbarItem'
+import type { Props } from '@theme/NavbarItem/DropdownNavbarItem/Desktop'
+import styles from './styles.module.css'
+
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}: Props): ReactNode {
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [showDropdown, setShowDropdown] = useState(false)
+  const isCardMode = useMemo(() => {
+    console.log(
+      items.every(
+        (item) => item.description && item.label && item.text && item.icon
+      )
+    )
+    return items.every(
+      (item) => item.description && item.label && item.text && item.icon
+    )
+  }, [items])
+
+  useEffect(() => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent
+    ) => {
+      if (
+        !dropdownRef.current ||
+        dropdownRef.current.contains(event.target as Node)
+      ) {
+        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',
+        styles.dropdown,
+        {
+          'dropdown--right': position === 'right',
+          'dropdown--show': showDropdown
+        }
+      )}
+    >
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        // # hash permits to make the <a> tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', styles.navbarLink, className)}
+        hasPopup
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            setShowDropdown(!showDropdown)
+          }
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul
+        className={clsx('dropdown__menu', styles.dropdownMenu, {
+          [styles.cardMode]: isCardMode
+        })}
+      >
+        {isCardMode
+          ? items.map((childItemProps, i) => (
+              <li key={i} className={styles.dropdownItem}>
+                <BaseNavLink {...childItemProps}>
+                  <i
+                    className={styles.dropdownItemIcon}
+                    style={{
+                      background: `url(${useBaseUrl(childItemProps.icon)})`
+                    }}
+                  />
+                  <p className={styles.dropdownItemLabel}>
+                    {childItemProps.label}
+                  </p>
+                  <p className={styles.dropdownItemDescription}>
+                    {childItemProps.description}
+                  </p>
+                  <p className={styles.dropdownItemText}>
+                    {childItemProps.text}
+                  </p>
+                </BaseNavLink>
+              </li>
+            ))
+          : items.map((childItemProps, i) => (
+              <NavbarItem
+                isDropdownItem
+                className={styles.dropdownItem}
+                activeClassName="dropdown__link--active"
+                {...childItemProps}
+                key={i}
+              />
+            ))}
+      </ul>
+    </div>
+  )
+}

src/theme/NavbarItem/DropdownNavbarItem/Desktop/styles.module.css

@@ -0,0 +1,84 @@
+.dropdown {
+  padding: 0;
+}
+
+.dropdown .navbarLink::after {
+  content: none;
+}
+
+.dropdownMenu {
+  border-radius: 1.25rem;
+  padding: 1.25rem;
+  border: 1px solid #d8d8d8;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.dropdownMenu > li:not(:first-child) {
+  margin-top: 1.25rem;
+}
+
+.dropdownItem {
+  margin: 0 !important;
+}
+
+.cardMode {
+  display: flex;
+  gap: 2.5rem;
+  border-color: #19192c;
+}
+
+.cardMode > .dropdownItem {
+  font-family: var(--bentoml-card-font-family);
+  width: 19.25rem;
+  padding: 1.25rem;
+  transition: background-color 0.3s ease-out;
+  border-radius: 0.75rem;
+  position: relative;
+}
+
+.cardMode > .dropdownItem:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  background: #19192c;
+  top: 1.1rem;
+  bottom: 1.1rem;
+  left: -1.25rem;
+}
+
+.cardMode > .dropdownItem:hover {
+  background: #c3ffb2;
+}
+
+.cardMode > .dropdownItem:nth-child(even):hover {
+  background: #b9a0ff;
+}
+
+.dropdownItemIcon {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 1.25rem;
+}
+
+.dropdownItemLabel {
+  font-size: 1.5rem;
+  white-space: nowrap;
+  font-weight: 400;
+  color: #19192c;
+  line-height: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.dropdownItemDescription {
+  color: #6a6a6a;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.dropdownItemText {
+  color: #19192c;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 0;
+}