feat: add Docker icon to settings navigation
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:
parent
1c53ba653d
commit
de403f39be
1 changed files with 13 additions and 2 deletions
|
|
@ -3,6 +3,7 @@ import { For } from 'solid-js';
|
|||
import Server from 'lucide-solid/icons/server';
|
||||
import HardDrive from 'lucide-solid/icons/hard-drive';
|
||||
import Mail from 'lucide-solid/icons/mail';
|
||||
import { DockerIcon } from '@/components/icons/DockerIcon';
|
||||
|
||||
type SettingsSection = 'pve' | 'pbs' | 'pmg' | 'docker' | 'host' | 'podman' | 'kubernetes';
|
||||
|
||||
|
|
@ -15,7 +16,7 @@ interface SettingsSectionNavProps {
|
|||
const allSections: Array<{
|
||||
id: SettingsSection;
|
||||
label: string;
|
||||
icon: typeof Server;
|
||||
icon: typeof Server | Component<{ class?: string }>;
|
||||
}> = [
|
||||
{
|
||||
id: 'pve',
|
||||
|
|
@ -32,6 +33,11 @@ const allSections: Array<{
|
|||
label: 'Mail Gateway',
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
id: 'docker',
|
||||
label: 'Docker',
|
||||
icon: DockerIcon,
|
||||
},
|
||||
];
|
||||
|
||||
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`;
|
||||
|
||||
const Icon = section.icon;
|
||||
const isDockerIcon = section.id === 'docker';
|
||||
|
||||
return (
|
||||
<button
|
||||
|
|
@ -56,7 +63,11 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
|
|||
onClick={() => props.onSelect(section.id)}
|
||||
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>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue