Merge pull request #97 from onmax/feat/infinite-menu

feat: add InfiniteMenu component

Author: DavidHDev

src/constants/Categories.ts

@@ -83,6 +83,7 @@ export const CATEGORIES = [
  'Flying Posters',
  'Folder',
  'Card Swap',
+ 'Infinite Menu',
  'Infinite Scroll',
  'Tilted Card',
  'Glass Icons',

src/constants/Components.ts

@@ -84,6 +84,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>`
+});