Merge pull request #1 from AfipSDK/feature/integrations

Add integrations menu

src/components/layout/sheet-mobile-nav.tsx

@@ -46,7 +46,7 @@ export function SheetMobileNav({
           <Icons.logo className="mr-2 size-8" />
           <span className="font-bold">{siteConfig.name}</span>
         </a>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-10">
+        <ScrollArea className="my-4 h-full pl-10">
           <div className="mt-2 mb-20">
             {mainNavItems?.length ? (
               <div className="flex flex-col space-y-3">
@@ -90,6 +90,8 @@ export function SheetMobileNav({
                               target={subItem?.external ? "_blank" : undefined}
                               className="text-muted-foreground"
                             >
+            					        {subItem.icon && <img className="max-w-[20px] mr-3 align-middle inline-block" src={subItem.icon} alt={subItem.title} />}
+
                               {subItem.title}
                             </a>
                           ) : (

src/components/main-navigation-menu.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Icons } from "@/icons";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Badge } from "@/components/ui/badge";
+import { navMenuConfig } from "@/config/nav-menu";
+import type { MenuItem } from "@/types";
+
+const links = navMenuConfig.links;
+const pages = navMenuConfig.pagesNav[1];
+const examples = navMenuConfig.examplesNav[0];
+
+export function MainNavigationMenu() {
+  return (
+    <NavigationMenu className="ml-4">
+      <NavigationMenuList>
+        {/* <NavigationMenuItem>
+          <NavigationMenuTrigger>{pages.title}</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <a
+                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                  href="/"
+                >
+                  <Icons.logo className="size-8" />
+                  <div className="mb-2 mt-3 text-lg font-medium">Astronomy</div>
+                  <p className="text-sm leading-tight text-muted-foreground">
+                    Pages and examples apps built with Astro v4.5,
+                    shadcn/ui & react js.
+                    <br />
+                    Open Source.
+                  </p>
+                </a>
+              </li>
+
+              {pages.items?.map((page) => (
+                <ListItem key={page.title} {...page} />
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem> */}
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>{pages.title}</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[200px] gap-3 p-4 md:w-[250px] md:grid-cols-2  lg:w-[300px] ">
+              {pages.items?.map((page) => (
+                <ListItem key={page.title} {...page} />
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        {/* <NavigationMenuItem>
+          <NavigationMenuTrigger>{examples.title}</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {examples.items?.map((example) => (
+                <ListItem key={example.title} {...example} />
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem> */}
+
+        {links ? (
+          <NavigationMenuItem>
+            {links.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className={navigationMenuTriggerStyle()}
+                {...(link.forceReload ? { "data-astro-reload": true } : {})}
+              >
+                {link.title}
+              </a>
+            ))}
+          </NavigationMenuItem>
+        ) : null}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}
+
+const ListItem: React.FC<MenuItem> = ({
+  title,
+  href,
+  description,
+  launched,
+  disabled,
+  external,
+  icon,
+  forceReload,
+}) => {
+  const target = external ? "_blank" : undefined;
+
+  return (
+    <li>
+      <a
+        target={target}
+        href={disabled ? undefined : href}
+        {...(forceReload ? { "data-astro-reload": true } : {})}
+        className={cn(
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          disabled
+            ? "text-muted-foreground hover:bg-transparent hover:text-muted-foreground"
+            : ""
+        )}
+      >
+        <div className="flex items-center text-sm font-medium leading-none">
+					{icon && <img className="max-w-[20px] mr-3 align-middle" src={icon} alt={title} />}
+
+          <span className="mr-2 align-middle">{title}</span>
+          {disabled ? (
+            <Badge
+              variant="secondary"
+              radius="sm"
+              className="h-5 px-1.5 text-xs font-medium"
+            >
+              SOON
+            </Badge>
+          ) : null}
+          {launched ? (
+            <Badge
+              radius="sm"
+              className="h-5 px-1.5 text-xs font-medium bg-[#ebf5ff] hover:bg-[#ebf5ff] text-[#0068d6]"
+            >
+              NEW
+            </Badge>
+          ) : null}
+        </div>
+        {description && <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          {description}
+        </p>}
+      </a>
+    </li>
+  );
+};
+
+ListItem.displayName = "ListItem";

src/config/nav-menu.ts

@@ -32,6 +32,61 @@ export const navMenuConfig: NavMenuConfig = {
         },
       ],
     },
+    {
+      title: "Integraciones",
+      items: [
+        {
+          title: "API",
+          href: "/blog/category/API",
+          icon: "/images/icons/api.svg"
+        },
+        {
+          title: "PHP",
+          href: "/blog/category/PHP",
+          icon: "/images/icons/php.svg"
+        },
+        {
+          title: "Javascript",
+          href: "/blog/category/Javascript",
+          icon: "/images/icons/js.svg"
+        },
+        {
+          title: "Python",
+          href: "/blog/category/Python",
+          icon: "/images/icons/python.svg"
+        },
+        {
+          title: "Ruby",
+          href: "/blog/category/Ruby",
+          icon: "/images/icons/ruby.svg"
+        },
+        {
+          title: "Java",
+          href: "/blog/category/Java",
+          icon: "/images/icons/java.svg"
+        },
+        {
+          title: "C#",
+          href: "/blog/category/.NET",
+          icon: "/images/icons/csharp.svg"
+        },
+        {
+          title: "Flutter",
+          href: "/blog/category/Flutter",
+          icon: "/images/icons/flutter.svg"
+        },
+        {
+          title: "Go",
+          href: "/blog/category/Go",
+          icon: "/images/icons/go.svg"
+        },
+        {
+          title: "Bubble",
+          href: "/blog/category/Bubble",
+          icon: "/images/icons/bubble.png"
+        },
+      ],
+    },
   ],
   examplesNav: [],
   links: [],

src/layouts/main-layout.astro

@@ -9,6 +9,7 @@ import { siteConfig } from "@/config/site";
 import { Icon } from "astro-icon/components";
 import { buttonVariants } from "@/components/ui/button";
 import { Info } from "lucide-react";
+import { MainNavigationMenu } from "@/components/main-navigation-menu";
 
 type Props = {
   title: string;
@@ -41,8 +42,6 @@ const { title, description, mainClass } = Astro.props;
       client:load
     /> -->
 
-    <!-- if use Navigation Menu on desktop -->
-    <!-- <MainNavigationMenu slot="left-header" client:load /> -->
 
     <div class="flex items-center gap-x-4" slot="left-header">
       <a
@@ -77,6 +76,9 @@ const { title, description, mainClass } = Astro.props;
       </a>
     </div>
 
+    <!-- if use Navigation Menu on desktop -->
+    <MainNavigationMenu slot="left-header" client:load />
+
     <SheetMobileNav
       mainNavItems={[...navMenuConfig.links]}
       sidebarNavItems={[

src/types/index.d.ts

@@ -7,6 +7,7 @@ export type NavItem = {
 };
 export type MenuItem = NavItem & {
   image?: string;
+  icon?: string;
   description?: string;
   launched?: boolean;
   external?: boolean;
@@ -16,6 +17,7 @@ export type MenuItem = NavItem & {
 export type MainNavItem = NavItem;
 
 export type SidebarNavItem = {
+  icon?: string;
   title: string;
   disabled?: boolean;
   external?: boolean;