naman_panwar_gnpl/Pennyzo-webapp-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: refine panels, sidebar, chat dock, add BuyCredits page and style tweaks

Browse Source
This commit is contained in:
ectasy663
2025-09-29 21:04:21 +05:30
parent c7a3220016
commit 77f8197fc1
11 changed files with 365 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/SidebarNav.tsx
View File

@@ -14,7 +14,7 @@ interface SidebarNavProps {
const SidebarNav: React.FC<SidebarNavProps> = ({ items, activeId, onSelect }) => {
return (
<aside className="w-20 md:w-64 border-r border-luxury-gold/25 bg-gradient-to-b from-deep-forest/90 via-deep-forest/80 to-rich-brown/70 backdrop-blur-xl sticky top-16 md:top-20 h-[calc(100vh-4rem)] md:h-[calc(100vh-5rem)] overflow-hidden">
<aside className="w-16 md:w-56 border-r border-luxury-gold/20 bg-gradient-to-b from-deep-forest/90 via-deep-forest/80 to-rich-brown/70 backdrop-blur-xl sticky top-16 md:top-20 h-[calc(100vh-4rem)] md:h-[calc(100vh-5rem)] overflow-hidden">
{/* Decorative background elements */}
<div className="absolute inset-0 pointer-events-none">
<div className="absolute -top-20 -left-10 w-40 h-40 bg-luxury-gold/5 rounded-full blur-3xl"></div>
@@ -25,11 +25,11 @@ const SidebarNav: React.FC<SidebarNavProps> = ({ items, activeId, onSelect }) =>
{/* Premium border accent */}
<div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-luxury-gold/40 to-transparent"></div>
<nav className="relative p-3 md:p-6 space-y-2">
<nav className="relative p-2 md:p-4 space-y-1.5">
{/* Navigation title */}
<div className="hidden md:block mb-6">
<h3 className="text-luxury-gold/80 text-xs font-montserrat font-semibold uppercase tracking-wider mb-2">Navigation</h3>
<div className="w-8 h-0.5 bg-gradient-to-r from-luxury-gold to-transparent rounded-full"></div>
<div className="hidden md:block mb-3">
<h3 className="text-luxury-gold/70 text-[10px] font-montserrat font-medium uppercase tracking-wider mb-1">Navigation</h3>
<div className="w-6 h-0.5 bg-gradient-to-r from-luxury-gold to-transparent rounded-full"></div>
</div>
{items.map((it, index) => {
@@ -38,20 +38,20 @@ const SidebarNav: React.FC<SidebarNavProps> = ({ items, activeId, onSelect }) =>
<button
key={it.id}
onClick={() => onSelect(it.id)}
className={`group relative w-full flex items-center gap-3 md:gap-4 px-4 py-4 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] ${
className={`group relative w-full flex items-center justify-start gap-2 md:gap-2.5 px-3 py-2.5 rounded-lg transition-colors duration-300 ${
isActive
? 'bg-gradient-to-r from-luxury-gold/25 to-brass/20 border border-luxury-gold/50 shadow-[0_8px_32px_rgba(197,157,89,0.15)] text-cream'
: 'border border-transparent hover:border-luxury-gold/30 hover:bg-gradient-to-r hover:from-luxury-gold/10 hover:to-transparent text-cream/80 hover:text-cream'
? 'bg-gradient-to-r from-luxury-gold/20 to-brass/20 border border-luxury-gold/50 text-cream shadow-[0_2px_8px_rgba(197,157,89,0.15)]'
: 'border border-transparent hover:border-luxury-gold/35 hover:bg-gradient-to-r hover:from-luxury-gold/10 hover:to-transparent text-cream/80 hover:text-cream'
}`}
style={{
animationDelay: `${index * 100}ms`
}}
>
{/* Icon container with enhanced styling */}
<div className={`relative w-8 h-8 rounded-xl flex items-center justify-center transition-all duration-300 ${
<div className={`relative w-8 h-8 rounded-md flex items-center justify-center transition-all duration-300 ${
isActive
? 'bg-gradient-to-br from-luxury-gold/30 to-brass/30 shadow-lg'
: 'bg-deep-forest/50 group-hover:bg-luxury-gold/20'
? 'bg-gradient-to-br from-luxury-gold/40 to-brass/40 ring-1 ring-luxury-gold/40'
: 'bg-deep-forest/60 group-hover:bg-luxury-gold/20'
}`}>
<span className={`text-lg transition-all duration-300 ${
isActive ? 'scale-110' : 'group-hover:scale-105'
@@ -65,37 +65,31 @@ const SidebarNav: React.FC<SidebarNavProps> = ({ items, activeId, onSelect }) =>
</div>
{/* Label with enhanced typography */}
<div className="hidden md:block flex-1">
<span className={`text-sm font-montserrat font-medium transition-all duration-300 ${
isActive ? 'font-semibold' : 'group-hover:font-medium'
<div className="hidden md:flex flex-1 min-w-0 items-center">
<span className={`truncate text-sm md:text-base leading-snug font-montserrat font-medium text-left tracking-wide transition-colors duration-300 ${
isActive ? 'text-cream' : 'text-cream/85 group-hover:text-cream'
}`}>
{it.label}
</span>
{/* Subtle underline for active item */}
{isActive && (
<div className="w-full h-0.5 bg-gradient-to-r from-luxury-gold/60 to-transparent rounded-full mt-1"></div>
<div className="absolute -bottom-1 left-0 w-5 h-0.5 bg-gradient-to-r from-luxury-gold/70 to-transparent rounded-full"></div>
)}
</div>
{/* Hover effect overlay */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-luxury-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-luxury-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
{/* Active selection indicator */}
{isActive && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-luxury-gold to-brass rounded-r-full shadow-[0_0_8px_rgba(197,157,89,0.4)]"></div>
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-gradient-to-b from-luxury-gold to-brass rounded-r-full shadow-[0_0_6px_rgba(197,157,89,0.45)]"></div>
)}
</button>
);
})}
{/* Bottom decorative element */}
<div className="hidden md:block mt-8 pt-6">
<div className="flex items-center justify-center">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-luxury-gold/10 to-bronze/5 border border-luxury-gold/20 flex items-center justify-center">
<div className="w-6 h-6 rounded-lg bg-luxury-gold/20 animate-pulse"></div>
</div>
</div>
</div>
{/* Removed large decorative bottom element for compactness */}
</nav>
{/* Bottom gradient fade */}