mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-19 21:18:18 +02:00
Update the application's appearance with a modern and clean theme
Refactor the sidebar component to use a new theme, updating color palettes, typography, and layout for a more modern and readable user interface. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Ob3gzfQ
This commit is contained in:
michaelschal committed
1 parent
116c0f547b
commit
e90f8930b3
2 files changed
+237
-123
No files matched your search
@@ -4,13 +4,13 @@ import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [location] = useLocation();
|
||||
const [, setLocation] = useLocation();
|
||||
const { toast } = useToast();
|
||||
|
||||
// Charger la session utilisateur
|
||||
const { data: session } = useQuery<{ id: string; username: string; role: string }>({
|
||||
queryKey: ["/api/auth/session"],
|
||||
retry: false,
|
||||
@@ -18,7 +18,6 @@ export default function Sidebar() {
|
||||
|
||||
const isAdmin = session?.role === "admin";
|
||||
|
||||
// Mutation pour déconnexion
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/auth/logout", {});
|
||||
@@ -39,7 +38,7 @@ export default function Sidebar() {
|
||||
{ icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
|
||||
{ icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
|
||||
{ icon: Images, label: "Médiathèque", href: "/media", badge: null },
|
||||
{ icon: Users, label: "Pages gérées", href: "/pages", badge: "8" },
|
||||
{ icon: Users, label: "Pages gérées", href: "/pages", badge: null },
|
||||
{ icon: Bot, label: "Assistant IA", href: "/ai", badge: null },
|
||||
];
|
||||
|
||||
@@ -49,21 +48,25 @@ export default function Sidebar() {
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-card border-r border-border flex flex-col h-screen">
|
||||
<div className="p-6 border-b border-border">
|
||||
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
|
||||
{/* Logo & Brand */}
|
||||
<div className="p-6 border-b border-sidebar-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||||
<i className="fas fa-share-nodes text-primary-foreground text-xl"></i>
|
||||
<div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-foreground">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation</p>
|
||||
<h1 className="text-xl font-bold gradient-text">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation sociale</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 overflow-y-auto">
|
||||
<ul className="space-y-2">
|
||||
<ul className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location === item.href;
|
||||
@@ -73,18 +76,21 @@ export default function Sidebar() {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
|
||||
${isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span>{item.label}</span>
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
@@ -94,9 +100,10 @@ export default function Sidebar() {
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-border">
|
||||
<p className="text-xs text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
<ul className="space-y-2">
|
||||
{/* Stats Section */}
|
||||
<div className="mt-8 pt-6 border-t border-sidebar-border">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
<ul className="space-y-1">
|
||||
{statsItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location === item.href;
|
||||
@@ -106,15 +113,18 @@ export default function Sidebar() {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase()}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -124,51 +134,61 @@ export default function Sidebar() {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-border space-y-2">
|
||||
{/* Admin & User Section */}
|
||||
<div className="p-4 border-t border-sidebar-border space-y-2">
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="mb-2">
|
||||
<p className="text-xs text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/users"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/users"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-users"
|
||||
>
|
||||
{location === "/users" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<UserCog className="w-5 h-5" />
|
||||
<span>Utilisateurs</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sql"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/sql"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-sql"
|
||||
>
|
||||
{location === "/sql" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Database className="w-5 h-5" />
|
||||
<span>SQL</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/settings"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/settings"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-settings"
|
||||
>
|
||||
{location === "/settings" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Settings className="w-5 h-5" />
|
||||
<span>Paramètres</span>
|
||||
</Link>
|
||||
@@ -178,7 +198,7 @@ export default function Sidebar() {
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-muted-foreground hover:text-accent-foreground"
|
||||
className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
disabled={logoutMutation.isPending}
|
||||
data-testid="button-logout"
|
||||
@@ -188,11 +208,20 @@ export default function Sidebar() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* User Profile Card */}
|
||||
{session && (
|
||||
<div className="mt-4 px-4 py-3 bg-muted rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Connecté en tant que</p>
|
||||
<p className="text-sm font-semibold truncate">{session.username}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{session.role}</p>
|
||||
<div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="w-10 h-10 border-2 border-primary/20">
|
||||
<AvatarFallback className="gradient-primary text-white font-semibold">
|
||||
{session.username.substring(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold truncate">{session.username}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{session.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user