"use client"; import React, { useRef, useEffect, useState } from "react"; import Link from "next/link"; import { motion, AnimatePresence } from "motion/react"; import MagnifierIcon from "../ui/magnifier-icon"; import HomeIcon from "../ui/home-icon"; import UsersGroupIcon from "../ui/users-group-icon"; import GithubCopilotIcon from "../ui/github-copilot-icon"; import MailFilledIcon from "../ui/mail-filled-icon"; import UserPlusIcon from "../ui/user-plus-icon"; import SendIcon from "../ui/send-icon"; import BrandNotionIcon from "../ui/brand-notion-icon"; import GearIcon from "../ui/gear-icon"; import ShoppingCartIcon from "../ui/shopping-cart-icon"; import TrashIcon from "../ui/trash-icon"; import InfoCircleIcon from "../ui/info-circle-icon"; import SparklesIcon from "../ui/sparkles-icon"; import BookIcon from "../ui/book-icon"; import UsersIcon from "../ui/users-icon"; import PenIcon from "../ui/pen-icon"; import ArrowNarrowLeftIcon from "../ui/arrow-narrow-left-icon"; import RightChevron from "../ui/right-chevron"; import type { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip"; const mainNavItems = [ { icon: MagnifierIcon, label: "Search", href: "#" }, { icon: HomeIcon, label: "Home", href: "#" }, { icon: UsersGroupIcon, label: "Meetings", href: "#" }, { icon: GithubCopilotIcon, label: "Notion AI", href: "#" }, { icon: MailFilledIcon, label: "Inbox", href: "#" }, ]; const sharedItems = [ { icon: UserPlusIcon, label: "Start collaborating", href: "#" }, ]; const notionApps = [ { icon: SendIcon, label: "Notion Mail", href: "#" }, { icon: BrandNotionIcon, label: "Notion Calendar", href: "#" }, ]; const privateItems = [ { icon: SparklesIcon, label: "Welcome to Notion!", href: "#" }, { icon: BookIcon, label: "Student Planner", href: "#" }, { icon: UsersIcon, label: "Group Project Planner", href: "#" }, { icon: PenIcon, label: "Lesson Plans", href: "#" }, ]; const footerItems = [ { icon: GearIcon, label: "Settings", href: "#" }, { icon: ShoppingCartIcon, label: "Marketplace", href: "#" }, { icon: TrashIcon, label: "Trash", href: "#" }, { icon: InfoCircleIcon, label: "Need help", href: "#" }, ]; interface SidebarItemProps { icon: React.ComponentType< AnimatedIconProps & React.RefAttributes >; label: string; href: string; isAnimated?: boolean; isSmall?: boolean; isOpen?: boolean; } const SidebarItem = ({ icon: Icon, label, href, isAnimated = true, isSmall = false, isOpen = true, }: SidebarItemProps) => { const ref = useRef(null); const handleMouseEnter = () => { if (isAnimated) { ref.current?.startAnimation(); } }; const handleMouseLeave = () => { if (isAnimated) { ref.current?.stopAnimation(); } }; useEffect(() => { if (!isAnimated) { ref.current?.stopAnimation(); } }, [isAnimated]); return (

{isOpen && ( {label} )} {label} ); }; interface NotionSidebarProps { isAnimated?: boolean; } const NotionSidebar = ({ isAnimated = true }: NotionSidebarProps) => { const [isOpen, setIsOpen] = useState(true); const triggerRef = useRef(null); useEffect(() => { const handleResize = () => { if (window.innerWidth < 768) { setIsOpen(false); } else { setIsOpen(true); } }; // Set initial state handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const toggleSidebar = () => { setIsOpen(!isOpen); }; return (

{isOpen && ( Shared )}

{sharedItems.map((item) => ( ))}

{isOpen && ( Notion apps )}

{notionApps.map((item) => ( ))}

{isOpen && ( Private )}

{privateItems.map((item) => ( ))}

{footerItems.map((item) => ( ))}

{/* Toggle Button */}

); }; export default NotionSidebar;

Notion Sidebar

Shared

Notion apps

Private

Platform

Category