docs: improve nav menu

Author: segunadebayo

website/demos/navigation-menu.tsx

@@ -2,6 +2,7 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import * as navigationMenu from "@zag-js/navigation-menu"
 import { useId } from "react"
 import { BiChevronDown } from "react-icons/bi"
+import { Presence } from "../components/presence"
 
 const solutionLinks = [
   {
@@ -52,13 +53,13 @@ export function NavigationMenu(props: NavigationMenuProps) {
   return (
     <nav className="navigation-menu" {...api.getRootProps()}>
       <div {...api.getListProps()}>
-        <div {...api.getItemProps({ value: "solutions" })}>
-          <button {...api.getTriggerProps({ value: "solutions" })}>
-            Solutions
+        <div {...api.getItemProps({ value: "products" })}>
+          <button {...api.getTriggerProps({ value: "products" })}>
+            Products
             <BiChevronDown />
           </button>
-          <span {...api.getTriggerProxyProps({ value: "solutions" })} />
-          <span {...api.getViewportProxyProps({ value: "solutions" })} />
+          <span {...api.getTriggerProxyProps({ value: "products" })} />
+          <span {...api.getViewportProxyProps({ value: "products" })} />
         </div>
 
         <div {...api.getItemProps({ value: "learn" })}>
@@ -80,31 +81,31 @@ export function NavigationMenu(props: NavigationMenuProps) {
           </a>
         </div>
 
-        <div {...api.getIndicatorProps()}>
+        <Presence keepMounted {...api.getIndicatorProps()}>
           <div {...api.getArrowProps()} />
-        </div>
+        </Presence>
       </div>
 
       <div {...api.getViewportPositionerProps()}>
-        <div {...api.getViewportProps()}>
-          <div {...api.getContentProps({ value: "solutions" })}>
+        <Presence keepMounted {...api.getViewportProps()}>
+          <Presence keepMounted {...api.getContentProps({ value: "products" })}>
             <ul className="grid-link-list">
               {solutionLinks.map((item) => (
                 <li key={item.title}>
                   <a
                     href={item.href}
                     className="link-card"
-                    {...api.getLinkProps({ value: "solutions" })}
+                    {...api.getLinkProps({ value: "products" })}
                   >
                     <h3>{item.title}</h3>
                     <p>{item.description}</p>
                   </a>
                 </li>
               ))}
             </ul>
-          </div>
+          </Presence>
 
-          <div {...api.getContentProps({ value: "learn" })}>
+          <Presence keepMounted {...api.getContentProps({ value: "learn" })}>
             <ul className="flex-link-list">
               {learnLinks.map((item) => (
                 <li key={item.title}>
@@ -119,8 +120,8 @@ export function NavigationMenu(props: NavigationMenuProps) {
                 </li>
               ))}
             </ul>
-          </div>
-        </div>
+          </Presence>
+        </Presence>
       </div>
     </nav>
   )

website/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts"
+import "./.next/types/routes.d.ts"
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

website/styles/machines/navigation-menu.css

@@ -103,7 +103,7 @@
   [data-scope="navigation-menu"][data-part="trigger"],
   [data-scope="navigation-menu"][data-part="item"] > a {
     padding: 10px 16px;
-    font-weight: bold;
+    font-weight: 500;
     display: flex;
     align-items: center;
     border: 0;
@@ -248,6 +248,7 @@
     height: var(--arrow-size);
     background-color: var(--colors-bg-subtle);
     rotate: 45deg;
+    filter: drop-shadow(0 4px 6px #00000026);
 
     &[data-orientation="horizontal"] {
       top: 4px;