Navigation Menu

"use client";

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuLinkItem,
  NavigationMenuIcon,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu/navigation-menu";
import { Button } from "@/components/ui/button/button";
import { Palette, Zap, Shield, Users, ChevronDown } from "lucide-react";
import styles from "./navigation-menu-demo.module.css";

export default function NavigationMenuDemo() {
  return (
    <>
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuLink href="#">Home</NavigationMenuLink>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger
              render={
                <Button variant="ghost">
                  Products
                  <NavigationMenuIcon>
                    <ChevronDown size={16} />
                  </NavigationMenuIcon>
                </Button>
              }
            />
            <NavigationMenuContent>
              <div className={styles.productsGrid}>
                <NavigationMenuLinkItem href="#" title="Analytics" description="Track your data" />
                <NavigationMenuLinkItem href="#" title="Insights" description="Get insights" />
                <NavigationMenuLinkItem href="#" title="Automation" description="Automate workflows" />
                <NavigationMenuLinkItem href="#" title="Reporting" description="Generate reports" />
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger
              render={
                <Button variant="ghost">
                  Resources
                  <NavigationMenuIcon>
                    <ChevronDown size={16} />
                  </NavigationMenuIcon>
                </Button>
              }
            />
            <NavigationMenuContent>
              <div className={styles.resourcesList}>
                <NavigationMenuLinkItem href="#" title="Documentation" description="Learn our products" />
                <NavigationMenuLinkItem href="#" title="Blog" description="News and updates" />
                <NavigationMenuLinkItem href="#" title="Support" description="Get help" />
                <NavigationMenuLinkItem href="#" title="Tutorials" description="Step-by-step guides" />
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger
              render={
                <Button variant="ghost">
                  Icons
                  <NavigationMenuIcon>
                    <ChevronDown size={16} />
                  </NavigationMenuIcon>
                </Button>
              }
            />
            <NavigationMenuContent>
              <div className={styles.iconsGrid}>
                <NavigationMenuLinkItem href="#">
                  <div className={styles.iconLinkItem}>
                    <div className={styles.iconContainer}>
                      <Palette size={16} />
                    </div>
                    <div>
                      <div className={styles.iconTitle}>Design</div>
                      <div className={styles.iconDescription}>Design tools</div>
                    </div>
                  </div>
                </NavigationMenuLinkItem>
                <NavigationMenuLinkItem href="#">
                  <div className={styles.iconLinkItem}>
                    <div className={styles.iconContainer}>
                      <Zap size={16} />
                    </div>
                    <div>
                      <div className={styles.iconTitle}>Performance</div>
                      <div className={styles.iconDescription}>Fast speed</div>
                    </div>
                  </div>
                </NavigationMenuLinkItem>
                <NavigationMenuLinkItem href="#">
                  <div className={styles.iconLinkItem}>
                    <div className={styles.iconContainer}>
                      <Shield size={16} />
                    </div>
                    <div>
                      <div className={styles.iconTitle}>Security</div>
                      <div className={styles.iconDescription}>Secure platform</div>
                    </div>
                  </div>
                </NavigationMenuLinkItem>
                <NavigationMenuLinkItem href="#">
                  <div className={styles.iconLinkItem}>
                    <div className={styles.iconContainer}>
                      <Users size={16} />
                    </div>
                    <div>
                      <div className={styles.iconTitle}>Collaboration</div>
                      <div className={styles.iconDescription}>Team work</div>
                    </div>
                  </div>
                </NavigationMenuLinkItem>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>

        <NavigationMenuViewport />
      </NavigationMenu>
    </>
  );
}

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLinkItem,
  NavigationMenuIcon,
  NavigationMenuViewport,
  NavigationMenuPositioner,
  NavigationMenuPortal,
  NavigationMenuArrow,
} from "@/components/ui/navigation-menu/navigation-menu";
import { ChevronDown } from "lucide-react";
import { Button } from "@/components/ui/button/button";
import styles from "./navigation-sub-menu.module.css";

export default function NavigationSubMenu() {
  return (
    <>
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger
              render={
                <Button variant="ghost">
                  Open
                  <NavigationMenuIcon>
                    <ChevronDown size={16} />
                  </NavigationMenuIcon>
                </Button>
              }
            ></NavigationMenuTrigger>
            <NavigationMenuViewport>
              <NavigationMenuArrow />
              <NavigationMenuContent>
                <div className={styles.mainGrid}>
                  <NavigationMenuLinkItem href="#" title="Button" description="Interactive button component" />
                  <NavigationMenuLinkItem href="#" title="Input" description="Form input controls" />

                  <NavigationMenu>
                    <NavigationMenuItem className={styles.subMenuItem}>
                      <NavigationMenuTrigger
                        render={
                          <div className={styles.triggerContainer}>
                            <NavigationMenuLinkItem
                              title="Input"
                              description="Form input controls"
                              className={styles.linkItemWithIcon}
                            >
                              <NavigationMenuIcon>
                                <ChevronDown size={16} />
                              </NavigationMenuIcon>
                            </NavigationMenuLinkItem>
                          </div>
                        }
                      />

                      <NavigationMenuContent>
                        <div className={styles.subMenuList}>
                          <NavigationMenuLinkItem href="#" title="Dialog" description="Modal dialogs" />
                          <NavigationMenuLinkItem href="#" title="Popover" description="Floating content" />
                          <NavigationMenuLinkItem href="#" title="Tooltip" description="Helpful hints" />
                          <NavigationMenuLinkItem href="#" title="Accordion" description="Collapsible sections" />
                        </div>
                      </NavigationMenuContent>
                    </NavigationMenuItem>

                    <NavigationMenuPortal>
                      <NavigationMenuPositioner side="right" sideOffset={8} alignOffset={-50}>
                        <NavigationMenuViewport>
                          <NavigationMenuArrow />
                        </NavigationMenuViewport>
                      </NavigationMenuPositioner>
                    </NavigationMenuPortal>
                  </NavigationMenu>

                  <NavigationMenuLinkItem href="#" title="Table" description="Data tables and grids" />
                </div>
              </NavigationMenuContent>
            </NavigationMenuViewport>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </>
  );
}