Merge pull request #71 from Utkarsh-Singhal-26/feat/cardnav

Added <CardNav /> Component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -66,6 +66,7 @@ export const CATEGORIES = [
       'Magic Bento',
       'Scroll Stack',
       'Profile Card',
+      'Card Nav',
       'Pill Nav',
       'Dock',
       'Gooey Nav',

src/constants/Components.ts

@@ -54,6 +54,7 @@ const components = {
   'magic-bento': () => import('../demo/Components/MagicBentoDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
   'dock': () => import('../demo/Components/DockDemo.vue'),
+  'card-nav': () => import('../demo/Components/CardNavDemo.vue'),
   'pill-nav': () => import('../demo/Components/PillNavDemo.vue'),
   'gooey-nav': () => import('../demo/Components/GooeyNavDemo.vue'),
   'pixel-card': () => import('../demo/Components/PixelCardDemo.vue'),

src/constants/code/Components/cardNavCode.ts

@@ -0,0 +1,54 @@
+import code from '@content/Components/CardNav/CardNav.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const cardNav = createCodeObject(code, 'Components/CardNav', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <CardNav
+    :logo="logo"
+    logoAlt="Company Logo"
+    :items="items"
+    baseColor="#fff"
+    menuColor="#000"
+    buttonBgColor="#111"
+    buttonTextColor="#fff"
+    ease="power3.out"
+  />
+</template>
+
+<script setup lang='ts'>
+import CardNav from './CardNav.vue'
+import logo from './logo.svg'
+
+const items = [
+  {
+    label: "About",
+    bgColor: "#0D0716",
+    textColor: "#fff",
+    links: [
+      { label: "Company", ariaLabel: "About Company" },
+      { label: "Careers", ariaLabel: "About Careers" }
+    ]
+  },
+  {
+    label: "Projects",
+    bgColor: "#170D27",
+    textColor: "#fff",
+    links: [
+      { label: "Featured", ariaLabel: "Featured Projects" },
+      { label: "Case Studies", ariaLabel: "Project Case Studies" }
+    ]
+  },
+  {
+    label: "Contact",
+    bgColor: "#271E37",
+    textColor: "#fff",
+    links: [
+      { label: "Email", ariaLabel: "Email us" },
+      { label: "Twitter", ariaLabel: "Twitter" },
+      { label: "LinkedIn", ariaLabel: "LinkedIn" }
+    ]
+  }
+]
+</script>`
+});

src/content/Components/CardNav/CardNav.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { gsap } from 'gsap';
+import { nextTick, onBeforeUpdate, onMounted, onUnmounted, ref, watch, type VNodeRef } from 'vue';
+
+type CardNavLink = {
+  label: string;
+  href?: string;
+  ariaLabel: string;
+};
+
+export type CardNavItem = {
+  label: string;
+  bgColor: string;
+  textColor: string;
+  links: CardNavLink[];
+};
+
+export interface CardNavProps {
+  logo: string;
+  logoAlt?: string;
+  items: CardNavItem[];
+  className?: string;
+  ease?: string;
+  baseColor?: string;
+  menuColor?: string;
+  buttonBgColor?: string;
+  buttonTextColor?: string;
+}
+
+const props = withDefaults(defineProps<CardNavProps>(), {
+  logoAlt: 'Logo',
+  className: '',
+  ease: 'power3.out',
+  baseColor: '#fff'
+});
+
+const isHamburgerOpen = ref(false);
+const isExpanded = ref(false);
+
+const navRef = ref<HTMLDivElement | null>(null);
+const cardsRef = ref<HTMLDivElement[]>([]);
+const tlRef = ref<gsap.core.Timeline | null>(null);
+
+const setCardRef =
+  (i: number): VNodeRef =>
+  el => {
+    if (el && el instanceof HTMLDivElement) {
+      cardsRef.value[i] = el;
+    }
+  };
+
+onBeforeUpdate(() => {
+  cardsRef.value = [];
+});
+
+const calculateHeight = () => {
+  const navEl = navRef.value;
+  if (!navEl) return 260;
+
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
+  if (isMobile) {
+    const contentEl = navEl.querySelector('.card-nav-content') as HTMLElement;
+    if (contentEl) {
+      const wasVisible = contentEl.style.visibility;
+      const wasPosition = contentEl.style.position;
+      const wasHeight = contentEl.style.height;
+
+      contentEl.style.visibility = 'visible';
+      contentEl.style.position = 'static';
+      contentEl.style.height = 'auto';
+
+      const topBar = 60;
+      const padding = 16;
+      const contentHeight = contentEl.scrollHeight;
+
+      contentEl.style.visibility = wasVisible;
+      contentEl.style.position = wasPosition;
+      contentEl.style.height = wasHeight;
+
+      return topBar + contentHeight + padding;
+    }
+  }
+  return 260;
+};
+
+const createTimeline = () => {
+  const navEl = navRef.value;
+  if (!navEl) return null;
+
+  gsap.set(navEl, { height: 60, overflow: 'hidden' });
+  gsap.set(cardsRef.value, { y: 50, opacity: 0 });
+
+  const tl = gsap.timeline({ paused: true });
+
+  tl.to(navEl, {
+    height: calculateHeight,
+    duration: 0.4,
+    ease: props.ease
+  });
+
+  tl.to(cardsRef.value, { y: 0, opacity: 1, duration: 0.4, ease: props.ease, stagger: 0.08 }, '-=0.1');
+
+  return tl;
+};
+
+const toggleMenu = () => {
+  const tl = tlRef.value;
+  if (!tl) return;
+  if (!isExpanded.value) {
+    isHamburgerOpen.value = true;
+    isExpanded.value = true;
+    nextTick(() => {
+      tl.play(0);
+    });
+  } else {
+    isHamburgerOpen.value = false;
+    tl.eventCallback('onReverseComplete', () => {
+      isExpanded.value = false;
+      tl.eventCallback('onReverseComplete', null);
+    });
+    tl.reverse();
+  }
+};
+
+const handleResize = () => {
+  if (!tlRef.value) return;
+
+  if (isExpanded.value) {
+    const newHeight = calculateHeight();
+    gsap.set(navRef.value, { height: newHeight });
+
+    tlRef.value.kill();
+    const newTl = createTimeline();
+    if (newTl) {
+      newTl.progress(1);
+      tlRef.value = newTl;
+    }
+  } else {
+    tlRef.value.kill();
+    tlRef.value = createTimeline();
+  }
+};
+
+onMounted(() => {
+  tlRef.value = createTimeline();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  tlRef.value?.kill();
+  tlRef.value = null;
+  window.removeEventListener('resize', handleResize);
+});
+
+watch(
+  () => [props.ease, props.items],
+  () => {
+    nextTick(() => {
+      if (tlRef.value) tlRef.value.kill();
+      tlRef.value = createTimeline();
+    });
+  }
+);
+</script>
+
+<template>
+  <div
+    :class="`card-nav-container absolute left-1/2 -translate-x-1/2 w-[90%] max-w-[800px] z-[99] top-[1.2em] md:top-[2em] ${props.className}`"
+  >
+    <nav
+      ref="navRef"
+      :class="[
+        'card-nav block h-[60px] p-0 rounded-xl shadow-md relative overflow-hidden will-change-[height]',
+        { open: isExpanded }
+      ]"
+      :style="{ backgroundColor: props.baseColor }"
+    >
+      <div
+        class="card-nav-top top-0 z-[2] absolute inset-x-0 flex justify-between items-center p-2 px-[1.1rem] h-[60px]"
+      >
+        <div
+          :class="[
+            'hamburger-menu group h-full flex flex-col items-center justify-center cursor-pointer gap-[6px] order-2 md:order-none',
+            { open: isHamburgerOpen }
+          ]"
+          @click="toggleMenu"
+          role="button"
+          :aria-label="isExpanded ? 'Close menu' : 'Open menu'"
+          tabindex="0"
+          :style="{ color: props.menuColor || '#000' }"
+        >
+          <div
+            :class="[
+              'hamburger-line w-[30px] h-[2px] bg-current transition-[transform,opacity,margin] duration-300 ease-linear [transform-origin:50%_50%] group-hover:opacity-75',
+              { 'translate-y-[4px] rotate-45': isHamburgerOpen }
+            ]"
+          />
+          <div
+            :class="[
+              'hamburger-line w-[30px] h-[2px] bg-current transition-[transform,opacity,margin] duration-300 ease-linear [transform-origin:50%_50%] group-hover:opacity-75',
+              { '-translate-y-[4px] -rotate-45': isHamburgerOpen }
+            ]"
+          />
+        </div>
+
+        <div
+          class="md:top-1/2 md:left-1/2 md:absolute flex items-center order-1 md:order-none md:-translate-x-1/2 md:-translate-y-1/2 logo-container"
+        >
+          <img :src="props.logo" :alt="props.logoAlt" class="h-[28px] logo" />
+        </div>
+
+        <button
+          type="button"
+          class="hidden md:inline-flex px-4 py-2 border-0 rounded-[calc(0.75rem-0.2rem)] h-full font-medium transition-colors duration-300 cursor-pointer card-nav-cta-button"
+          :style="{
+            backgroundColor: props.buttonBgColor,
+            color: props.buttonTextColor
+          }"
+        >
+          Get Started
+        </button>
+      </div>
+
+      <div
+        :class="[
+          'card-nav-content absolute left-0 right-0 top-[60px] bottom-0 p-2 flex flex-col items-stretch gap-2 justify-start z-[1] md:flex-row md:items-end md:gap-[12px]',
+          isExpanded ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
+        ]"
+        :aria-hidden="!isExpanded"
+      >
+        <div
+          v-for="(item, idx) in (props.items || []).slice(0, 3)"
+          :key="`${item.label}-${idx}`"
+          :ref="setCardRef(idx)"
+          class="relative flex flex-col flex-[1_1_auto] md:flex-[1_1_0%] gap-2 p-[12px_16px] rounded-[calc(0.75rem-0.2rem)] min-w-0 h-auto md:h-full min-h-[60px] md:min-h-0 select-none nav-card"
+          :style="{ backgroundColor: item.bgColor, color: item.textColor }"
+        >
+          <div class="font-normal text-[18px] md:text-[22px] tracking-[-0.5px] nav-card-label">
+            {{ item.label }}
+          </div>
+          <div class="flex flex-col gap-[2px] mt-auto nav-card-links">
+            <a
+              v-for="(lnk, i) in item.links"
+              :key="`${lnk.label}-${i}`"
+              class="inline-flex items-center gap-[6px] hover:opacity-75 text-[15px] md:text-[16px] no-underline transition-opacity duration-300 cursor-pointer nav-card-link"
+              :href="lnk.href"
+              :aria-label="lnk.ariaLabel"
+            >
+              <v-icon name="go-arrow-up-right" class="nav-card-link-icon shrink-0" aria-hidden="true" />
+              {{ lnk.label }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>

src/demo/Components/CardNavDemo.vue

@@ -0,0 +1,216 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div
+        class="relative overflow-hidden demo-container demo-container-dots"
+        :style="{
+          backgroundColor: currentTheme.backgroundColor,
+          minHeight: '550px',
+          height: 'auto'
+        }"
+      >
+        <CardNav
+          :key="key"
+          :logo="currentTheme.logo"
+          :items="currentTheme.items"
+          :baseColor="currentTheme.baseColor"
+          :menuColor="currentTheme.menuColor"
+          :buttonBgColor="currentTheme.buttonBgColor"
+          :buttonTextColor="currentTheme.buttonTextColor"
+          :ease="ease"
+        />
+      </div>
+
+      <Customize>
+        <PreviewSelect title="Example" :options="themeOptions" v-model="theme" />
+        <PreviewSelect title="Animation Ease" :options="easeOptions" v-model="ease" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="cardNav" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="cardNav.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { cardNav } from '@/constants/code/Components/cardNavCode';
+import { computed, ref, watch } from 'vue';
+import logoDark from '../../assets/logos/vuebits-gh-white.svg';
+import logoLight from '../../assets/logos/vuebits-gh-black.svg';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CardNav, { type CardNavItem } from '../../content/Components/CardNav/CardNav.vue';
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+type ThemeKey = 'light' | 'dark' | 'color';
+type EaseKey = 'power3.out' | 'back.out(1.7)' | 'elastic.out(1, 0.8)' | 'circ.out';
+
+interface ThemeConfig {
+  logo: string;
+  baseColor: string;
+  menuColor: string;
+  buttonBgColor: string;
+  buttonTextColor: string;
+  backgroundColor: string;
+  items: CardNavItem[];
+}
+
+const theme = ref<ThemeKey>('light');
+const ease = ref<EaseKey>('power3.out');
+
+const items: CardNavItem[] = [
+  {
+    label: 'About',
+    bgColor: '#070F07',
+    textColor: '#fff',
+    links: [
+      { label: 'Company', ariaLabel: 'About Company' },
+      { label: 'Careers', ariaLabel: 'About Careers' }
+    ]
+  },
+  {
+    label: 'Projects',
+    bgColor: '#0D2710',
+    textColor: '#fff',
+    links: [
+      { label: 'Featured', ariaLabel: 'Featured Projects' },
+      { label: 'Case Studies', ariaLabel: 'Project Case Studies' }
+    ]
+  },
+  {
+    label: 'Contact',
+    bgColor: '#1E3721',
+    textColor: '#fff',
+    links: [
+      { label: 'Email', ariaLabel: 'Email us' },
+      { label: 'Twitter', ariaLabel: 'Twitter' },
+      { label: 'LinkedIn', ariaLabel: 'LinkedIn' }
+    ]
+  }
+];
+
+const themeConfigs: Record<ThemeKey, ThemeConfig> = {
+  light: {
+    logo: logoLight,
+    baseColor: '#fff',
+    menuColor: '#000',
+    buttonBgColor: '#111',
+    buttonTextColor: '#fff',
+    backgroundColor: '#f5f5f5',
+    items
+  },
+  dark: {
+    logo: logoDark,
+    baseColor: '#0b0b0b',
+    menuColor: '#fff',
+    buttonBgColor: '#27FF64',
+    buttonTextColor: '#fff',
+    backgroundColor: '#0b0b0b',
+    items
+  },
+  color: {
+    logo: logoLight,
+    baseColor: '#27FF64',
+    menuColor: '#000',
+    buttonBgColor: '#111',
+    buttonTextColor: '#27FF64',
+    backgroundColor: '#0b0b0b',
+    items
+  }
+};
+
+const themeOptions = [
+  { value: 'light', label: 'Light Mode' },
+  { value: 'dark', label: 'Dark Mode' },
+  { value: 'color', label: 'Colorful' }
+];
+
+const easeOptions = [
+  { value: 'power3.out', label: 'power3.out' },
+  { value: 'back.out(1.7)', label: 'back.out(1.7)' },
+  { value: 'elastic.out(1, 0.8)', label: 'elastic.out(1, 0.8)' },
+  { value: 'circ.out', label: 'circ.out' }
+];
+
+const currentTheme = computed(() => themeConfigs[theme.value]);
+
+watch(
+  [currentTheme, ease],
+  () => {
+    forceRerender();
+  },
+  { immediate: true }
+);
+
+const propData = [
+  {
+    name: 'logo',
+    type: 'string',
+    default: '-',
+    description: 'URL for the logo image'
+  },
+  {
+    name: 'logoAlt',
+    type: 'string',
+    default: 'Logo',
+    description: 'Alt text for the logo image'
+  },
+  {
+    name: 'items',
+    type: 'CardNavItem[]',
+    default: '-',
+    description: 'Array of navigation items with label, bgColor, textColor, and links'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: "''",
+    description: 'Additional CSS classes for the navigation container'
+  },
+  {
+    name: 'ease',
+    type: 'string',
+    default: 'power3.out',
+    description: 'GSAP easing function for animations'
+  },
+  {
+    name: 'baseColor',
+    type: 'string',
+    default: '#fff',
+    description: 'Background color for the navigation container'
+  },
+  {
+    name: 'menuColor',
+    type: 'string',
+    default: 'undefined',
+    description: 'Color for the hamburger menu lines'
+  },
+  {
+    name: 'buttonBgColor',
+    type: 'string',
+    default: '#111',
+    description: 'Background color for the CTA button'
+  },
+  {
+    name: 'buttonTextColor',
+    type: 'string',
+    default: 'white',
+    description: 'Text color for the CTA button'
+  }
+];
+</script>