Initial release with i18n and theming

2026-07-21 23:05:46 +00:00 · 2026-03-09 19:02:57 +01:00
commit 65459e53f1
110 changed files with 29536 additions and 0 deletions
@@ -0,0 +1,83 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
+  PanelLeftClose, PanelLeft
+} from 'lucide-react';
+
+const PsysonicLogo = () => (
+  <img src="/logo.png" alt="Psysonic Logo" width="36" height="36" style={{ borderRadius: '8px' }} />
+);
+
+const navItems = [
+  { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
+  { icon: Radio, labelKey: 'sidebar.newReleases', to: '/new-releases' },
+  { icon: Music4, labelKey: 'sidebar.allAlbums', to: '/albums' },
+  { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
+  { icon: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
+  { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
+  { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
+];
+
+export default function Sidebar({ 
+  isCollapsed = false, 
+  toggleCollapse 
+}: { 
+  isCollapsed?: boolean;
+  toggleCollapse?: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
+      <div className="sidebar-brand">
+        <button 
+          className="collapse-btn" 
+          onClick={toggleCollapse} 
+          title={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+          style={{ padding: 0 }}
+        >
+          {isCollapsed ? <PanelLeft size={24} /> : <PanelLeftClose size={24} />}
+        </button>
+        {!isCollapsed && <PsysonicLogo />}
+        {!isCollapsed && <span className="brand-name">Psysonic</span>}
+      </div>
+
+      <nav className="sidebar-nav" aria-label="Hauptnavigation">
+        {!isCollapsed && <span className="nav-section-label">{t('sidebar.library')}</span>}
+        {navItems.map(item => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+            title={isCollapsed ? t(item.labelKey) : undefined}
+          >
+            <item.icon size={isCollapsed ? 22 : 18} />
+            {!isCollapsed && <span>{t(item.labelKey)}</span>}
+          </NavLink>
+        ))}
+
+        {!isCollapsed && <span className="nav-section-label" style={{ marginTop: 'auto' }}>{t('sidebar.system')}</span>}
+        <NavLink
+          to="/statistics"
+          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+          style={isCollapsed ? { marginTop: 'auto' } : undefined}
+          title={isCollapsed ? t('sidebar.statistics') : undefined}
+        >
+          <BarChart3 size={isCollapsed ? 22 : 18} />
+          {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
+        </NavLink>
+        <NavLink
+          to="/settings"
+          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+          title={isCollapsed ? t('sidebar.settings') : undefined}
+        >
+          <Settings size={isCollapsed ? 22 : 18} />
+          {!isCollapsed && <span>{t('sidebar.settings')}</span>}
+        </NavLink>
+      </nav>
+    </aside>
+  );
+}