[V0_FILE]typescriptreact:file="hooks/use-dimensions.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import type React from "react" // Added import for React export const useDimensions = (ref: React.RefObject) => { const dimensions = useRef({ width: 0, height: 0 }) useEffect(() => { if (ref.current) { dimensions.current.width = ref.current.offsetWidth dimensions.current.height = ref.current.offsetHeight } }, [ref]) return dimensions.current } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" const { fontFamily } = require("tailwindcss/defaultTheme") /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: `var(--radius)`, md: `calc(var(--radius) - 2px)`, sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/side-menu.tsx" isEdit="true" "use client" import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import { OpenMenuToggle, CloseMenuToggle } from "./menu-toggle" import { Navigation } from "./navigation" import { BrandHeader } from "./brand-header" const menuVariants = { open: { x: 0, transition: { type: "spring", stiffness: 400, damping: 30, when: "beforeChildren", }, }, closed: { x: "-100%", transition: { type: "spring", stiffness: 400, damping: 30, when: "afterChildren", delay: 0.1, }, }, } const contentVariants = { open: { transition: { staggerChildren: 0.03, delayChildren: 0.1, }, }, closed: { transition: { staggerChildren: 0.02, staggerDirection: -1, when: "afterChildren", }, }, } const itemVariants = { open: { y: 0, opacity: 1, transition: { y: { stiffness: 1000, velocity: -100 }, duration: 0.2, }, }, closed: { y: 50, opacity: 0, transition: { y: { stiffness: 1000 }, duration: 0.2, }, }, } export function SideMenu() { const [isOpen, setIsOpen] = React.useState(false) const [isAnimating, setIsAnimating] = React.useState(false) const handleOpenToggle = () => { setIsOpen(true) setIsAnimating(true) } const handleCloseToggle = () => { setIsOpen(false) setIsAnimating(true) } const handleAnimationComplete = () => { setIsAnimating(false) } return ( <> {!isOpen && !isAnimating && } {isOpen && ( )} ) } [V0_FILE]typescriptreact:file="components/menu-toggle.tsx" isEdit="true" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" import { motion } from "framer-motion" interface ToggleProps { toggle: () => void } export const OpenMenuToggle = ({ toggle }: ToggleProps) => ( ) export const CloseMenuToggle = ({ toggle }: ToggleProps) => ( ) [V0_FILE]typescriptreact:file="components/brand-header.tsx" isEdit="true" import { Framer } from "lucide-react" export function BrandHeader() { return (

Framer-like

) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" import { motion } from "framer-motion" import { MenuItem } from "./menu-item" import { Home, Settings, Mail, Calendar, Users } from "lucide-react" const items = [ { icon: Home, label: "Home" }, { icon: Mail, label: "Messages" }, { icon: Calendar, label: "Calendar" }, { icon: Users, label: "Team" }, { icon: Settings, label: "Settings" }, ] const listVariants = { open: { transition: { staggerChildren: 0.03, delayChildren: 0.1 }, }, closed: { transition: { staggerChildren: 0.02, staggerDirection: -1 }, }, } export const Navigation = () => ( {items.map((item, i) => ( ))} ) [V0_FILE]typescriptreact:file="components/menu-item.tsx" isEdit="true" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import type { LucideIcon } from "lucide-react" const itemVariants = { open: { y: 0, opacity: 1, transition: { y: { stiffness: 1000, velocity: -100 }, duration: 0.2, }, }, closed: { y: 50, opacity: 0, transition: { y: { stiffness: 1000 }, duration: 0.2, }, }, } interface MenuItemProps { icon: LucideIcon label: string } export const MenuItem = ({ icon: Icon, label }: MenuItemProps) => { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { SideMenu } from "@/components/side-menu" export default function Home() { return (

Welcome to Framer-like Dashboard

Click the menu icon in the top-left corner to open the side menu.

) }

About

Tags

Share

About

Tags

Share

More from tenriajeng

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tenriajeng

More Templates Like This