feat: add InfiniteMenu component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
+export const NEW = ['Infinite Menu', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -82,6 +82,7 @@ export const CATEGORIES = [
       'Flying Posters',
       'Folder',
       'Card Swap',
+      'Infinite Menu',
       'Infinite Scroll',
       'Tilted Card',
       'Glass Icons',

src/constants/Components.ts

@@ -82,6 +82,7 @@ const components = {
   'scroll-stack': () => import('../demo/Components/ScrollStackDemo.vue'),
   'bubble-menu': () => import('../demo/Components/BubbleMenuDemo.vue'),
   'staggered-menu': () => import('../demo/Components/StaggeredMenuDemo.vue'),
+  'infinite-menu': () => import('../demo/Components/InfiniteMenuDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/infiniteMenuCode.ts

@@ -0,0 +1,33 @@
+import code from '@/content/Components/InfiniteMenu/InfiniteMenu.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const infiniteMenu = createCodeObject(code, 'Components/InfiniteMenu', {
+  usage: `<template>
+  <InfiniteMenu :items="menuItems" />
+</template>
+
+<script setup lang="ts">
+import InfiniteMenu from "./InfiniteMenu.vue";
+
+const menuItems = [
+  {
+    image: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&h=800&fit=crop',
+    title: 'Sarah Chen',
+    description: 'UI/UX Designer',
+    link: 'https://dribbble.com/'
+  },
+  {
+    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=800&fit=crop',
+    title: 'Mike Johnson',
+    description: 'Frontend Developer',
+    link: 'https://github.com/'
+  },
+  {
+    image: 'https://images.unsplash.com/photo-1494790108755-2616b612b793?w=800&h=800&fit=crop',
+    title: 'Emma Wilson',
+    description: 'Product Designer',
+    link: 'https://behance.net/'
+  }
+];
+</script>`
+});

src/demo/Components/InfiniteMenuDemo.vue

@@ -0,0 +1,66 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px] overflow-hidden">
+        <InfiniteMenu :items="demoItems" />
+      </div>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gl-matrix']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="infiniteMenu" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="infiniteMenu.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { infiniteMenu } from '../../constants/code/Components/infiniteMenuCode';
+import InfiniteMenu from '../../content/Components/InfiniteMenu/InfiniteMenu.vue';
+
+const demoItems = [
+  {
+    image: 'https://picsum.photos/300/300?grayscale',
+    link: 'https://google.com/',
+    title: 'Item 1',
+    description: 'This is pretty cool, right?'
+  },
+  {
+    image: 'https://picsum.photos/400/400?grayscale',
+    link: 'https://google.com/',
+    title: 'Item 2',
+    description: 'This is pretty cool, right?'
+  },
+  {
+    image: 'https://picsum.photos/500/500?grayscale',
+    link: 'https://google.com/',
+    title: 'Item 3',
+    description: 'This is pretty cool, right?'
+  },
+  {
+    image: 'https://picsum.photos/600/600?grayscale',
+    link: 'https://google.com/',
+    title: 'Item 4',
+    description: 'This is pretty cool, right?'
+  }
+];
+
+const propData = [
+  {
+    name: 'items',
+    type: 'InfiniteMenuItem[]',
+    default: '[{...}]',
+    description: 'Array of menu items with image, title, description, and link properties.'
+  }
+];
+</script>