{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "full-screen-navigation-menu-demo",
  "title": "Full screen navigation Demo",
  "description": "Demo showing Full screen navigation component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/full-screen-navigation-menu"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/full-screen-navigation-menu/index.tsx",
      "content": "import {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/systaliko-ui/blocks/full-screen-navigation-menu';\nimport { DropletOffIcon, ActivityIcon, TrendingUpIcon } from 'lucide-react';\nimport Image from 'next/image';\n\nexport function FullScreenNavigationMenuDemo() {\n  return (\n    <div className=\"w-full h-[150vh]\">\n      <NavigationMenu className=\"border-y h-16 flex justify-center items-center w-full\">\n        <NavigationMenuList>\n          <NavigationMenuItem value=\"getting-started\">\n            <NavigationMenuTrigger>Men</NavigationMenuTrigger>\n            <NavigationMenuContent className=\"flex flex-wrap gap-16 p-8 md:p-12\">\n              <div className=\"space-y-5\">\n                <h3 className=\"font-medium text-sm\">Shop by sport</h3>\n\n                <ul>\n                  <ListItem href=\"/shop/men/sports/basketball\">\n                    Basketball\n                  </ListItem>\n                  <ListItem href=\"/shop/men/sports/footbal\">Football</ListItem>\n                  <ListItem href=\"/shop/men/sports/golf\">Golf</ListItem>\n                  <ListItem href=\"/shop/men/sports/running\">Running</ListItem>\n                  <ListItem href=\"/shop/men/sports/tenis\">Tenis</ListItem>\n                </ul>\n              </div>\n\n              <div className=\"space-y-5\">\n                <h3 className=\"font-medium text-sm\">Shop by collection</h3>\n\n                <ul>\n                  <ListItem href=\"/shop/men/collections/featured\">\n                    Featured\n                  </ListItem>\n                  <ListItem href=\"/shop/men/collections/new\">\n                    New arrivals\n                  </ListItem>\n                  <ListItem href=\"/shop/men/collections/favorites\">\n                    Best sellers\n                  </ListItem>\n                  <ListItem href=\"/shop/men/collections/sale\">\n                    Basketball\n                  </ListItem>\n                </ul>\n              </div>\n\n              <div className=\"space-y-5\">\n                <h3 className=\"font-medium text-sm\">Shop by feature</h3>\n\n                <ul>\n                  <ListItem href=\"/shop/men/features/multicolor\">\n                    <div className=\"p-1.5 flex justify-between items-center rounded bg-primary text-primary-foreground\">\n                      <ActivityIcon className=\"size-3.5 text-primary-foreground\" />\n                    </div>\n                    Optimal Fit\n                  </ListItem>\n                  <ListItem href=\"/shop/men/features/multicolor\">\n                    <div className=\"p-1.5 flex justify-between items-center rounded bg-primary text-primary-foreground\">\n                      <TrendingUpIcon className=\"size-3.5 text-primary-foreground\" />\n                    </div>\n                    Performance Enhancing\n                  </ListItem>\n                  <ListItem href=\"/shop/men/features/multicolor\">\n                    <div className=\"p-1.5 flex justify-between items-center rounded bg-primary text-primary-foreground\">\n                      <DropletOffIcon className=\"size-3.5 text-primary-foreground\" />\n                    </div>\n                    Moisture Management\n                  </ListItem>\n                </ul>\n              </div>\n\n              <div>\n                <Image\n                  width={413}\n                  height={603}\n                  alt=\"shop sale\"\n                  src=\"https://images.unsplash.com/photo-1598467985932-a2540eaeb7d1?q=80&w=698&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                  className=\"max-w-[200px] max-h-full\"\n                />\n                <NavigationMenuLink\n                  href=\"/shop/men/collections/sale\"\n                  className=\"text-destructive flex-row items-center\"\n                >\n                  Shop sale\n                </NavigationMenuLink>\n              </div>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Women</NavigationMenuTrigger>\n            <NavigationMenuContent className=\"flex flex-wrap gap-16 p-8 md:p-12\">\n              <div className=\"space-y-5\">\n                <h3 className=\"font-medium text-sm\">Shop by brand</h3>\n\n                <ul>\n                  <ListItem href=\"/shop/woman/brands/adidas\">Adidas</ListItem>\n                  <ListItem href=\"/shop/women/brands/brooks\">Brooks</ListItem>\n                  <ListItem href=\"/shop/women/brands/under-armour\">\n                    Under Armour\n                  </ListItem>\n                  <ListItem href=\"/shop/women/brands/nike\">Nike</ListItem>\n                </ul>\n              </div>\n\n              <div className=\"space-y-5\">\n                <h3 className=\"font-medium text-sm\">Shop by collection</h3>\n\n                <ul>\n                  <ListItem href=\"/shop/women/collections/featured\">\n                    Featured\n                  </ListItem>\n                  <ListItem href=\"/shop/women/collections/new\">\n                    New arrivals\n                  </ListItem>\n                  <ListItem href=\"/shop/women/collections/favorites\">\n                    Best sellers\n                  </ListItem>\n                  <ListItem href=\"/shop/women/collections/sale\">\n                    Basketball\n                  </ListItem>\n                </ul>\n              </div>\n\n              <div>\n                <Image\n                  width={615}\n                  height={603}\n                  alt=\"shop sale\"\n                  src=\"https://images.unsplash.com/photo-1563903260263-065d1c592e6b?q=80&w=893&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                  className=\"max-w-[200px] max-h-full\"\n                />\n                <NavigationMenuLink\n                  href=\"/shop/women/collections/sale\"\n                  className=\"text-destructive flex-row items-center\"\n                >\n                  Shop sale\n                </NavigationMenuLink>\n              </div>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              href=\"/shop/\"\n              className={`${navigationMenuTriggerStyle()} text-destructive`}\n            >\n              Sale\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </div>\n  );\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink\n        className=\"inline-flex flex-row gap-2 items-center\"\n        href={href}\n      >\n        {children}\n      </NavigationMenuLink>\n    </li>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/blocks/full-screen-navigation-menu.tsx"
    }
  ],
  "type": "registry:block"
}