sanjidarimi
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import { useTheme } from "@/hooks/useTheme";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Moon, PanelLeftClose, PanelLeftOpen, Sun } from "lucide-react";
|
|
|
|
interface TopbarProps {
|
|
toggleSidebar: () => void;
|
|
isCollapsed: boolean;
|
|
}
|
|
|
|
export default function Topbar({ toggleSidebar, isCollapsed }: TopbarProps) {
|
|
const { mode, toggleMode } = useTheme();
|
|
|
|
return (
|
|
<header className="h-16 border-b border-border bg-background/95 backdrop-blur px-6 flex items-center justify-between sticky top-0 z-10">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="p-2 rounded-md hover:bg-accent transition-colors"
|
|
>
|
|
{isCollapsed ? (
|
|
<PanelLeftOpen className="h-5 w-5" />
|
|
) : (
|
|
<PanelLeftClose className="h-5 w-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<motion.button
|
|
onClick={toggleMode}
|
|
className="p-1.5 rounded-full neon-glow transition-all"
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
aria-label="Toggle theme mode"
|
|
>
|
|
<AnimatePresence mode="wait">
|
|
{mode === "dark" ? (
|
|
<motion.div
|
|
key="sun"
|
|
initial={{ rotate: -90, opacity: 0 }}
|
|
animate={{ rotate: 0, opacity: 1 }}
|
|
exit={{ rotate: 90, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Sun className="w-5 h-5 text-primary" />
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key="moon"
|
|
initial={{ rotate: 90, opacity: 0 }}
|
|
animate={{ rotate: 0, opacity: 1 }}
|
|
exit={{ rotate: -90, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Moon className="w-5 h-5 text-primary" />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.button>
|
|
<div className="h-9 w-9 rounded-full border border-border bg-muted overflow-hidden">
|
|
{/* Avatar Image would go here */}
|
|
<img
|
|
src="https://github.com/shadcn.png"
|
|
alt="Avatar"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|