new main nav menu, remove alpine

packages/website/app/modules/navigation/main-navigation.tsx

@@ -1,12 +1,10 @@
 import { AppLogo } from "~/modules/app/app-logo"
-import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { linkClass } from "../ui/components"
-import { PopoverMenu } from "../ui/popover-menu"
 import { AppLink } from "./app-link"
 import { mainLinks } from "./main-links"
+import { MainNavigationMenu } from "./main-navigation-menu"
 
 export function MainNavigation() {
-  const guideLinks = useGuideLinksContext()
   return (
     <nav className="flex justify-between items-center h-16">
       <a href="/">
@@ -18,25 +16,7 @@ export function MainNavigation() {
         ))}
       </div>
       <div className="md:hidden">
-        <PopoverMenu>
-          {mainLinks.map((link) => (
-            <AppLink
-              {...link}
-              role="menuitem"
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-          <hr className="border-0 h-[2px] bg-black/50" />
-          {guideLinks.map(({ link }) => (
-            <AppLink
-              {...link}
-              role="menuitem"
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-        </PopoverMenu>
+        <MainNavigationMenu />
       </div>
     </nav>
   )