web/parch-cast
9
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Implement sidebar component with context management for state handling; add new UI elements including tooltip, skeleton, and sheet components; update package dependencies and enhance global styles for improved responsiveness.

Browse source
This commit is contained in:
Mobin 2025-03-31 13:17:42 +03:30
parent c755dcc5ae
commit c36902dec7
13 changed files with 1074 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

24
components/header.tsx
View file

@ -8,10 +8,12 @@ import { useEffect, useState } from "react";
import { ModeToggle } from "./mode-toggle";
import ToggleLanguage from "./toggle-language";
import { Input } from "./ui/input";
import { useSidebar } from "./ui/sidebar";
export default function Header() {
const [isScrollingUp, setIsScrollingUp] = useState(true); // Track scroll direction
const [prevScrollPos, setPrevScrollPos] = useState(0);
const { toggleSidebar } = useSidebar();
useEffect(() => {
const handleScroll = () => {
@ -36,7 +38,7 @@ export default function Header() {
}, [prevScrollPos]);
return (
<header className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10 md:px-6 py-3 px-2 md:p-4">
<header className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-[5] md:px-6 py-3 px-2 md:p-4">
<div className="flex w-full shrink-0 items-center justify-between relative">
{/* Left Section */}
<div className="flex sm:gap-2 gap-1">
@ -47,12 +49,15 @@ export default function Header() {
<Button
variant="outline"
size={"icon"}
className="md:hidden px-2 py-1"
onClick={toggleSidebar}
className="md:hidden px-2 py-1 cursor-pointer"
>
<Menu />
</Button>
<ModeToggle />
<ToggleLanguage />
<div className="md:flex hidden sm:gap-2 gap-1">
<ModeToggle />
<ToggleLanguage />
</div>
</div>
<Link
href={"/"}
@ -65,9 +70,14 @@ export default function Header() {
</Link>
{/* Right Section */}
<div className="flex gap-2">
<Button className="bg-parch cursor-pointer">
<span className="md:block hidden">ورود | ثبت نام</span>
<LogIn className="md:hidden block" />
<Button className="md:block hidden bg-parch text-white cursor-pointer">
<span>ورود | ثبت نام</span>
</Button>
<Button
className="md:hidden block bg-parch text-white cursor-pointer"
size={"sm"}
>
<LogIn className="block" />
</Button>
</div>
</div>