180 lines
8.1 KiB
TypeScript
180 lines
8.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { GUIDE_CONTENT } from '../constants';
|
|
import { Leaf, Menu, X, GitBranch, ArrowRight } from 'lucide-react';
|
|
|
|
export const Sidebar: React.FC = () => {
|
|
const [activeId, setActiveId] = useState<string>('');
|
|
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveId(entry.target.id);
|
|
}
|
|
});
|
|
},
|
|
{ rootMargin: '-20% 0px -60% 0px' }
|
|
);
|
|
|
|
GUIDE_CONTENT.forEach((section) => {
|
|
const element = document.getElementById(section.id);
|
|
if (element) observer.observe(element);
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
setIsMobileOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile Toggle & Drawer (unchanged logic, adjusted styling for mobile-only) */}
|
|
<div className="fixed top-4 right-4 z-50 lg:hidden">
|
|
<button
|
|
onClick={() => setIsMobileOpen(!isMobileOpen)}
|
|
className="p-3 bg-card rounded-full shadow-lg border border-border text-foreground hover:bg-muted transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
|
|
aria-label="Toggle Menu"
|
|
>
|
|
{isMobileOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
{isMobileOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden animate-in fade-in duration-200"
|
|
onClick={() => setIsMobileOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Mobile Sidebar Content */}
|
|
<nav className={`
|
|
fixed top-0 left-0 h-full bg-card border-r border-border
|
|
w-[85vw] max-w-xs transform transition-transform duration-300 z-50 shadow-2xl lg:hidden flex flex-col
|
|
${isMobileOpen ? 'translate-x-0' : '-translate-x-full'}
|
|
`}>
|
|
<div className="p-6 pb-2">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<div className="p-2 bg-primary/10 rounded-lg">
|
|
<Leaf className="text-primary" size={20} />
|
|
</div>
|
|
<div>
|
|
<h1 className="font-bold text-foreground text-lg leading-tight">Git Guide</h1>
|
|
<span className="text-xs text-muted-foreground font-mono">v1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto px-4 custom-scrollbar">
|
|
<ul className="space-y-1 pb-8">
|
|
{GUIDE_CONTENT.map((section) => {
|
|
const isActive = activeId === section.id;
|
|
return (
|
|
<li key={section.id}>
|
|
<button
|
|
onClick={() => scrollToSection(section.id)}
|
|
className={`
|
|
w-full text-left px-4 py-3 rounded-md text-base transition-all duration-200
|
|
flex items-center justify-between
|
|
${isActive
|
|
? 'bg-primary/10 text-foreground font-bold'
|
|
: 'text-muted-foreground font-medium active:bg-muted/50'
|
|
}
|
|
`}
|
|
>
|
|
<span className="truncate">{section.title.split('. ')[1]}</span>
|
|
{isActive && (
|
|
<span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0"></span>
|
|
)}
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="p-6 border-t border-border/50 bg-card">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<GitBranch size={16} />
|
|
<span>Happy Coding! 🌱</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* NEW: Minimal Desktop Navigation */}
|
|
<nav className="hidden lg:block fixed top-0 left-0 h-full w-64 pl-6 pr-4" aria-label="Desktop Navigation">
|
|
{/* Positioning container to match the 'mt-[187px]' feel, centered vertically or with specific top padding */}
|
|
<div className="h-full flex flex-col justify-center max-h-[calc(100vh-40px)] overflow-y-auto overflow-x-hidden custom-scrollbar pb-10">
|
|
|
|
{/* Header/Logo Area for Desktop */}
|
|
<div className="mb-6 px-3 group cursor-default">
|
|
<div className="flex items-center gap-3 opacity-70 group-hover:opacity-100 transition-opacity">
|
|
<Leaf className="text-primary" size={18} />
|
|
<span className="font-bold text-foreground tracking-tight text-sm">Git Guide</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-0.5">
|
|
{GUIDE_CONTENT.map((section) => {
|
|
const isActive = activeId === section.id;
|
|
return (
|
|
<li key={section.id} className="group relative">
|
|
{/* Hover/Active Pill Background */}
|
|
<div
|
|
className={`
|
|
absolute left-0 top-0 z-[-1] h-full w-full rounded-md transition-all duration-200 ease-linear
|
|
${isActive ? 'bg-primary/10 opacity-100' : 'bg-primary/5 opacity-0 group-hover:opacity-100'}
|
|
`}
|
|
/>
|
|
|
|
<button
|
|
onClick={() => scrollToSection(section.id)}
|
|
className={`
|
|
relative block w-full text-left px-3 py-1.5 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 rounded-md
|
|
${isActive
|
|
? 'text-foreground font-bold'
|
|
: 'text-muted-foreground font-medium hover:text-foreground'
|
|
}
|
|
`}
|
|
>
|
|
<span className="flex items-center justify-between text-sm">
|
|
<span>{section.title.split('. ')[1]}</span>
|
|
|
|
{/* Minimal Arrow on Hover/Active */}
|
|
<span
|
|
className={`
|
|
transition-all duration-200 transform
|
|
${isActive
|
|
? 'opacity-100 translate-x-0 text-primary'
|
|
: 'opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 text-muted-foreground'
|
|
}
|
|
`}
|
|
>
|
|
<ArrowRight size={12} strokeWidth={2.5} />
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
{/* Footer Area */}
|
|
<div className="mt-8 px-3 pt-4 border-t border-border/50">
|
|
<div className="flex items-center gap-2 text-[10px] text-muted-foreground hover:text-primary transition-colors cursor-pointer group">
|
|
<GitBranch size={12} className="group-hover:rotate-12 transition-transform" />
|
|
<span>v1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
}; |