Merge branch 'main' into feat/gradient-blinds

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Gradient Blinds', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop'];
+export const NEW = ['Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -72,6 +72,7 @@ export const CATEGORIES = [
       'Pill Nav',
       'Dock',
       'Gooey Nav',
+      'Bubble Menu',
       'Pixel Card',
       'Carousel',
       'Spotlight Card',

src/constants/Components.ts

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

src/constants/code/Components/bubbleMenuCode.ts

@@ -0,0 +1,62 @@
+import code from '@content/Components/BubbleMenu/BubbleMenu.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const bubbleMenu = createCodeObject(code, 'Components/BubbleMenu', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <BubbleMenu
+    :logo="() => h('span', { style: { fontWeight: 700 } }, 'VB')"
+    :items="items"
+    menu-aria-label="Toggle navigation"
+    menu-bg="#ffffff"
+    menu-content-color="#111111"
+    :use-fixed-position="false"
+    animation-ease="back.out(1.5)"
+    :animation-duration="0.5"
+    :stagger-delay="0.12"
+  />
+</template>
+
+<script setup>
+import BubbleMenu from './BubbleMenu.vue'
+import { h } from 'vue'
+
+const items = [
+  {
+    label: 'home',
+    href: '#',
+    ariaLabel: 'Home',
+    rotation: -8,
+    hoverStyles: { bgColor: '#3b82f6', textColor: '#ffffff' }
+  },
+  {
+    label: 'about',
+    href: '#',
+    ariaLabel: 'About',
+    rotation: 8,
+    hoverStyles: { bgColor: '#10b981', textColor: '#ffffff' }
+  },
+  {
+    label: 'projects',
+    href: '#',
+    ariaLabel: 'Projects',
+    rotation: 8,
+    hoverStyles: { bgColor: '#f59e0b', textColor: '#ffffff' }
+  },
+  {
+    label: 'blog',
+    href: '#',
+    ariaLabel: 'Blog',
+    rotation: 8,
+    hoverStyles: { bgColor: '#ef4444', textColor: '#ffffff' }
+  },
+  {
+    label: 'contact',
+    href: '#',
+    ariaLabel: 'Contact',
+    rotation: -8,
+    hoverStyles: { bgColor: '#8b5cf6', textColor: '#ffffff' }
+  }
+]
+</script>`
+});