| | |
| | | import { currentPage } from '../../lib/stores/app' |
| | | import { t } from '../../lib/i18n' |
| | | import GeneralPage from './GeneralPage.svelte' |
| | | import LanguagePage from './LanguagePage.svelte' |
| | | import PermissionsPage from './PermissionsPage.svelte' |
| | | import HistoryPage from './HistoryPage.svelte' |
| | | import UserDictPage from './UserDictPage.svelte' |
| | |
| | | |
| | | const navItems = [ |
| | | { id: 'general', label: () => t('nav.home') }, |
| | | { id: 'language', label: () => t('nav.language') }, |
| | | { id: 'userdict', label: () => t('nav.userdict') }, |
| | | { id: 'permissions', label: () => t('nav.permissions') }, |
| | | { id: 'history', label: () => t('nav.history') }, |
| | |
| | | <nav class="sidebar"> |
| | | <div class="sidebar-header"> |
| | | <AppIcon size={24} /> |
| | | <span class="app-name">{t('app.name')}</span> |
| | | <div class="brand-copy"> |
| | | <span class="brand-name">{t('app.brandName')}</span> |
| | | <span class="brand-tagline">{t('app.brandTagline')}</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="nav-items"> |
| | |
| | | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"> |
| | | <path d="M2.5 7.5L8 3l5.5 4.5"/> |
| | | <path d="M4 6.5V13h3v-3.5h2V13h3V6.5"/> |
| | | </svg> |
| | | {:else if item.id === 'language'} |
| | | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"> |
| | | <circle cx="8" cy="8" r="6"/> |
| | | <path d="M2.5 8h11"/> |
| | | <path d="M8 2.5c1.5 1.6 2.2 3.4 2.2 5.5S9.5 11.9 8 13.5"/> |
| | | <path d="M8 2.5C6.5 4.1 5.8 5.9 5.8 8s.7 3.9 2.2 5.5"/> |
| | | </svg> |
| | | {:else if item.id === 'history'} |
| | | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"> |
| | |
| | | <main class="content"> |
| | | {#if page === 'general'} |
| | | <GeneralPage /> |
| | | {:else if page === 'language'} |
| | | <LanguagePage /> |
| | | {:else if page === 'userdict'} |
| | | <UserDictPage /> |
| | | {:else if page === 'permissions'} |
| | |
| | | -webkit-app-region: no-drag; |
| | | } |
| | | |
| | | .app-name { |
| | | .brand-copy { |
| | | display: flex; |
| | | min-width: 0; |
| | | flex-direction: column; |
| | | gap: 2px; |
| | | } |
| | | |
| | | .brand-name { |
| | | font-weight: 600; |
| | | font-size: var(--font-size-lg); |
| | | line-height: 1.15; |
| | | color: var(--color-label); |
| | | } |
| | | |
| | | .brand-tagline { |
| | | font-size: var(--font-size-xs); |
| | | line-height: 1.2; |
| | | color: var(--color-secondary-label); |
| | | } |
| | | |
| | | .nav-items { |