danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add Docker icon to settings navigation

Browse source 
Add Docker tab to the settings section navigation using the same DockerIcon component used in the main navigation. The icon is rendered at w-4 h-4 to match the visual weight of the lucide icons at size 16.

Now the settings navigation shows: Virtual Environment, Backup Server, Mail Gateway, and Docker.
This commit is contained in:
rcourtman 2025-10-24 11:35:49 +00:00
parent 1c53ba653d
commit de403f39be
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend-modern/src/components/Settings/SettingsSectionNav.tsx
View file

@ -3,6 +3,7 @@ import { For } from 'solid-js';
import Server from 'lucide-solid/icons/server'; import Server from 'lucide-solid/icons/server';
import HardDrive from 'lucide-solid/icons/hard-drive'; import HardDrive from 'lucide-solid/icons/hard-drive';
import Mail from 'lucide-solid/icons/mail'; import Mail from 'lucide-solid/icons/mail';
import { DockerIcon } from '@/components/icons/DockerIcon';
type SettingsSection = 'pve' | 'pbs' | 'pmg' | 'docker' | 'host' | 'podman' | 'kubernetes'; type SettingsSection = 'pve' | 'pbs' | 'pmg' | 'docker' | 'host' | 'podman' | 'kubernetes';
@ -15,7 +16,7 @@ interface SettingsSectionNavProps {
const allSections: Array<{ const allSections: Array<{
id: SettingsSection; id: SettingsSection;
label: string; label: string;
icon: typeof Server; icon: typeof Server | Component<{ class?: string }>;
}> = [ }> = [
{ {
id: 'pve', id: 'pve',
@ -32,6 +33,11 @@ const allSections: Array<{
label: 'Mail Gateway', label: 'Mail Gateway',
icon: Mail, icon: Mail,
}, },
{
id: 'docker',
label: 'Docker',
icon: DockerIcon,
},
]; ];
export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) => { export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) => {
@ -48,6 +54,7 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
: `${baseClasses} hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50`; : `${baseClasses} hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50`;
const Icon = section.icon; const Icon = section.icon;
const isDockerIcon = section.id === 'docker';
return ( return (
<button <button
@ -56,7 +63,11 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
onClick={() => props.onSelect(section.id)} onClick={() => props.onSelect(section.id)}
aria-pressed={isActive} aria-pressed={isActive}
> >
<Icon size={16} stroke-width={2} /> {isDockerIcon ? (
<Icon class="w-4 h-4" />
) : (
<Icon size={16} stroke-width={2} />
)}
<span>{section.label}</span> <span>{section.label}</span>
</button> </button>
); );