paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(branding): dark-mode logo in the admin sidebar

Browse Source 
The sidebar brand row (logo_position=sidepanel) + collapsed rail used
the light logo unconditionally. Make it theme-aware via useAdminDarkMode
with the same symmetric fallback as the header (dark uses dark||light,
light uses light||dark). This was the missing admin surface — the header
already switched.
This commit is contained in:
Luca
2026-06-03 15:19:08 +02:00
parent e8960a41cf
commit 7d34c97c58
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/admin/AdminSidebar.tsx
+6 -1
View File
@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
import { settingsService } from '../../services/settings.service'; import { settingsService } from '../../services/settings.service';
import { VersionInfo } from './VersionInfo'; import { VersionInfo } from './VersionInfo';
import { usePermissions } from '../../contexts/PermissionsContext'; import { usePermissions } from '../../contexts/PermissionsContext';
import { useAdminDarkMode } from '../../contexts/AdminDarkModeContext';
import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext'; import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext';
import { usePublicSettings } from '../../hooks/usePublicSettings'; import { usePublicSettings } from '../../hooks/usePublicSettings';
import { buildResourceUrl } from '../../utils/url'; import { buildResourceUrl } from '../../utils/url';
@@ -106,8 +107,12 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose, col
// chosen, the logo replaces the "PicPeak Admin" text in the brand // chosen, the logo replaces the "PicPeak Admin" text in the brand
// row, and the favicon takes over in the collapsed icon rail. // row, and the favicon takes over in the collapsed icon rail.
const { data: publicSettings } = usePublicSettings(); const { data: publicSettings } = usePublicSettings();
const { isDark } = useAdminDarkMode();
const logoInSidebar = publicSettings?.branding_logo_position === 'sidepanel'; const logoInSidebar = publicSettings?.branding_logo_position === 'sidepanel';
const rawLogoUrl = publicSettings?.branding_logo_url?.trim(); // Theme-aware logo with symmetric fallback (one logo serves both modes).
const lightLogo = publicSettings?.branding_logo_url?.trim();
const darkLogo = publicSettings?.branding_logo_url_dark?.trim();
const rawLogoUrl = isDark ? (darkLogo || lightLogo) : (lightLogo || darkLogo);
const rawFaviconUrl = publicSettings?.branding_favicon_url?.trim(); const rawFaviconUrl = publicSettings?.branding_favicon_url?.trim();
const resolvedLogoUrl = rawLogoUrl const resolvedLogoUrl = rawLogoUrl
? (rawLogoUrl.startsWith('http') ? rawLogoUrl : buildResourceUrl(rawLogoUrl)) ? (rawLogoUrl.startsWith('http') ? rawLogoUrl : buildResourceUrl(rawLogoUrl))