FEAT: 🎉 Added <StaggeredMenu /> nav

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['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 = ['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
@@ -64,6 +64,7 @@ export const CATEGORIES = [
     name: 'Components',
     subcategories: [
       'Animated List',
+      'Staggered Menu',
       'Masonry',
       'Glass Surface',
       'Magic Bento',

src/constants/Components.ts

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

src/constants/code/Components/staggeredMenuCode.ts

@@ -0,0 +1,45 @@
+import code from '@content/Components/StaggeredMenu/StaggeredMenu.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const staggeredMenu = createCodeObject(code, 'Components/StaggeredMenu', {
+  installation: `npm install gsap`,
+  usage: `<template>
+ <div style="height: 100vh; background: #1a1a1a">
+   <StaggeredMenu
+     position="right"
+     :items="menuItems"
+     :social-items="socialItems"
+     :display-socials="true"
+     :display-item-numbering="true"
+     menu-button-color="#fff"
+     open-menu-button-color="#fff"
+     :change-menu-color-on-open="true"
+     :colors="['#9EF2B2', '#27FF64']"
+     logo-url="/path-to-your-logo.svg"
+     accent-color="#27FF64"
+     @menu-open="handleMenuOpen"
+     @menu-close="handleMenuClose"
+   />
+ </div>
+</template>
+
+<script setup>
+import StaggeredMenu from './StaggeredMenu.vue'
+
+const menuItems = [
+ { label: 'Home', ariaLabel: 'Go to home page', link: '/' },
+ { label: 'About', ariaLabel: 'Learn about us', link: '/about' },
+ { label: 'Services', ariaLabel: 'View our services', link: '/services' },
+ { label: 'Contact', ariaLabel: 'Get in touch', link: '/contact' }
+]
+
+const socialItems = [
+ { label: 'Twitter', link: 'https://twitter.com' },
+ { label: 'GitHub', link: 'https://github.com' },
+ { label: 'LinkedIn', link: 'https://linkedin.com' }
+]
+
+const handleMenuOpen = () => console.log('Menu opened')
+const handleMenuClose = () => console.log('Menu closed')
+</script>`
+});