feat: add custom navigation links with drag-to-reorder and expandable sidebar

[mrmees]

Summary

• Extract theme preset icons from inline SVG path data to separate .svg files using CSS variables for dynamic theming
• Migrate theme preset config from single url to links[] array for multi-link support
• Add user-configurable custom navigation links to the sidebar with add/edit/delete via a settings dialog
• Add drag-to-reorder for both system navigation links and custom links
• Add collapsible links with "More" menu (system) and "Bookmarks" popup (custom) for hidden items
• Add expandable sidebar with persistent toggle and hover-to-expand
• Add import/export for custom link configuration backup and sharing
• Add context menus for all link types with appropriate actions per type

Note: This PR was evaluated for splitting (theme icon extraction vs. navigation features) but the two share types, rendering infrastructure, and the icon fallback chain, making separation impractical without duplicating significant code.

Details

Custom Navigation Links

Users can add external links to the sidebar via Settings > Navigation. Each link supports:

• Icon types: Built-in Material Design icons, custom SVG upload, or custom image (PNG/JPEG)
• Color options: Theme color, custom hex color, or original file colors (SVG only)
• URL validation: Protocol safety checks, warning for URLs missing https://

Theme Icon Extraction

Each theme preset now has a dedicated icon_*.svg file (23 total) that uses CSS custom properties (--v-primary-base, --v-primary-offset-base) for dynamic color theming via vue-inline-svg DOM injection. This replaces the previous inline SVG path arrays in config.json.

Sidebar Enhancements

• Drag-to-reorder: System links (excluding Home and Settings which are pinned) and custom links can be reordered by dragging
• Collapsible links: Right-click any link to collapse it into the More menu (system) or Bookmarks popup (custom)
• Expandable sidebar: Click the logo to expand/collapse, or hover over dashboard layout to temporarily expand
• Context menus: Right-click system links to collapse/show, custom links to edit/delete/collapse, theme links to hide

Import/Export

Custom links can be exported as JSON and imported with merge or replace modes, enabling backup and sharing across instances.

Storage

All navigation config is stored in Moonraker's database via the existing uiSettings.navigation path — no new storage mechanisms or API endpoints.

New Dependencies

• vue-inline-svg — DOM-injected SVG rendering for theme icons with CSS variable support

Screenshots

Sidebar with custom links

Expanded	Minimized	Fully collapsed

Navigation Links settings

Add/Edit link dialog

Built-in icon	Icon type selector	Custom SVG with color options

Context menus

Custom link context menu	Collapsed links submenu

Backwards Compatibility

• Existing users with no navigation settings will see default behavior (no custom links, standard sidebar order)
• All new config fields use optional chaining with sensible defaults
• Theme presets maintain backwards compatibility via fallback chain: links[] -> legacy url field
• Icon rendering falls back through: per-link SVG filename -> preset-level icon -> legacy inline path array -> logo filename

Test Plan

• Verify sidebar renders correctly with default settings (no stored navigation config)
• Add a custom link via Settings > Navigation, verify it appears in sidebar
• Edit and delete custom links
• Test all icon types: built-in icon, custom SVG upload, custom image upload
• Test color options: theme color, custom color, file colors (SVG)
• Drag-to-reorder system links, verify order persists across refresh
• Drag-to-reorder custom links, verify order persists across refresh
• Collapse system links to More menu via context menu
• Collapse custom links to Bookmarks popup via context menu
• Right-click More/Bookmarks icon to "Show all in sidebar"
• Export links, import with merge mode, import with replace mode
• Switch themes and verify theme link updates correctly
• Hide theme links via context menu and settings panel
• Test expandable sidebar: click logo to toggle, hover to expand
• Verify keyboard shortcuts still work for system navigation
• Test on mobile viewport (sidebar behavior)