mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
Merge pull request #71 from Utkarsh-Singhal-26/feat/cardnav
Added <CardNav /> Component
This commit is contained in:
David
GitHub
@@ -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',
|
||||
|
||||
@@ -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'),
|
||||
|
||||
54
src/constants/code/Components/cardNavCode.ts
Normal file
54
src/constants/code/Components/cardNavCode.ts
Normal file
@@ -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>`
|
||||
});
|
||||
257
src/content/Components/CardNav/CardNav.vue
Normal file
257
src/content/Components/CardNav/CardNav.vue
Normal file
@@ -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>
|
||||
216
src/demo/Components/CardNavDemo.vue
Normal file
216
src/demo/Components/CardNavDemo.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user