import { CompanyFooterMetadata } from '../../organisms/company-footer/types'; import { LanguageSelectorMetadata } from '../../molecules/language-selector/types'; /** * Configuration for the docs-shell component. */ export interface DocsShellMetadata { /** * Logo configuration for the sidebar header. */ logo: DocsShellLogo; /** * Navigation sections for the sidebar. */ sections: DocsShellSection[]; /** * Search configuration. */ search?: { /** Placeholder text for the search input */ placeholder?: string; /** Show keyboard shortcut hint */ showShortcut?: boolean; }; /** * Mobile logo configuration. * Used in the mobile header toolbar. */ mobileLogo?: { /** * CSS variable for the logo (recommended for dark mode support). * @example '--main-logo-mini' */ cssVariable?: string; /** * Logo image source (alternative to cssVariable). */ src?: string; /** * Logo width. * @default '32px' */ width?: string; /** * Logo height. * @default '32px' */ height?: string; }; /** * Footer configuration. */ footer?: CompanyFooterMetadata; /** * Sidebar width in desktop mode. * @default '260px' */ sidebarWidth?: string; /** * Language selector configuration for the footer. */ languageSelector?: LanguageSelectorMetadata; /** * Custom CSS class for the shell. */ cssClass?: string; } /** * Logo configuration for the docs shell. */ export interface DocsShellLogo { /** * Use CSS variable for the logo (recommended for dark mode support). * When set, uses background-image with this CSS variable. * @example '--main-logo' */ cssVariable?: string; /** * Logo image source (alternative to cssVariable). */ src?: string; /** * Dark mode logo source (used with src). */ srcDark?: string; /** * Alt text for accessibility. */ alt: string; /** * Route to navigate when clicking the logo. * @default ['/'] */ route?: string[]; /** * Logo width. * @default '10rem' */ width?: string; /** * Logo height. * @default '3rem' */ height?: string; } /** * A navigation section in the sidebar. */ export interface DocsShellSection { /** * Unique key for the section. */ key: string; /** * Display title for the section header. */ title: string; /** * Icon name (ionicons). */ icon?: string; /** * Whether the section is expanded by default. * @default true */ expanded?: boolean; /** * Child navigation links. */ children: DocsShellLink[]; } /** * A navigation link in the sidebar. */ export interface DocsShellLink { /** * Display label for the link. */ label: string; /** * Route array for navigation. */ route: string[]; /** * Optional badge text (e.g., "New", "Updated"). */ badge?: string; /** * Badge color variant. * @default 'default' */ badgeColor?: 'default' | 'success'; }