johnny2211/znakovni.hr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update sidebar design with logo and improved color scheme

Browse Source
This commit is contained in:
johnny2211
2026-01-17 17:37:15 +01:00
parent d20be4f868
commit bbf143a3b4
6 changed files with 2841 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/frontend/src/components/layout/Sidebar.tsx
View File

@@ -44,13 +44,18 @@ export function Sidebar() {
};
return (
<div className="flex h-screen w-60 flex-col bg-white border-r border-border">
<div className="flex h-screen w-80 flex-col bg-primary border-r border-indigo-700">
{/* Logo */}
<div className="flex h-16 items-center px-6 border-b border-border">
<div className="flex h-16 items-center gap-3 px-6 border-b border-indigo-700">
<img
src="https://znakovni.b-cdn.net/img/znakovni-logo.svg"
alt="Znakovni.hr logo"
className="h-8 w-8"
/>
<h1 className="text-xl font-bold">
<span className="text-indigo-600">ZNAKOVNI</span>
<span className="text-gray-400">.</span>
<span className="text-orange-600">hr</span>
<span className="text-white">ZNAKOVNI</span>
<span className="text-indigo-300">.</span>
<span className="text-orange-400">hr</span>
</h1>
</div>
@@ -67,8 +72,8 @@ export function Sidebar() {
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary hover:text-foreground'
? 'bg-indigo-700 text-white'
: 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
)}
>
<item.icon className="h-5 w-5" />
@@ -80,7 +85,7 @@ export function Sidebar() {
{/* Support Section */}
<div className="pt-6">
<h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
<h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-indigo-300 mb-2">
Portal za podršku
</h3>
<div className="space-y-1">
@@ -93,8 +98,8 @@ export function Sidebar() {
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary hover:text-foreground'
? 'bg-indigo-700 text-white'
: 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
)}
>
<item.icon className="h-5 w-5" />
@@ -113,8 +118,8 @@ export function Sidebar() {
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
location.pathname === '/admin'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary hover:text-foreground'
? 'bg-indigo-700 text-white'
: 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
)}
>
<Shield className="h-5 w-5" />
@@ -125,16 +130,16 @@ export function Sidebar() {
</nav>
{/* User Section */}
<div className="border-t border-border p-4">
<div className="border-t border-indigo-700 p-4">
{user ? (
<div className="space-y-2">
<div className="px-3 py-2">
<p className="text-sm font-medium text-foreground">{user.displayName || user.email}</p>
<p className="text-xs text-muted-foreground">{user.email}</p>
<p className="text-sm font-medium text-white">{user.displayName || user.email}</p>
<p className="text-xs text-indigo-200">{user.email}</p>
</div>
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-500 hover:text-white transition-colors"
>
<LogOut className="h-5 w-5" />
Sign out
@@ -143,7 +148,7 @@ export function Sidebar() {
) : (
<Link
to="/login"
className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-500 hover:text-white transition-colors"
>
Sign in
</Link>