{title} - Tabler screenshots

--- // Chrome-full counterpart to ScreenshotLayout: a whole app screen (sidebar, // navbar, page header and body) inside one capture frame, for the features // that only exist at layout level — the folded sidebar, the theme settings // panel, the navbar dropdowns. // // The frame is 1708x1068 CSS px — the capture viewport itself, not the // 1024x768 card frame of ScreenshotLayout — and the capture scales it down to // the 1280 px wide picture it asks for (data-screenshot-width), i.e. by 0.75. // That is how the screen fits more of the page than a 1280 px window would: // the browser lays out and rasterizes a real 1708 px screen, so charts measure // their axes right and the grid uses the full width, and only the finished // raster is reduced. (Even numbers on purpose: the card frame centers in the // same viewport and must land on whole pixels.) A CSS // `zoom` on the page would show the same amount but clips ApexCharts axis // labels and leaves the container short of the frame's edge. // The frame matches the viewport because media queries resolve against the // viewport: a narrower frame would lay the grid out for a width the picture // does not show. // // It also carries `transform: translateZ(0)` on purpose: `.navbar-vertical` // and the offcanvas panels are `position: fixed`, and a transformed ancestor // becomes their containing block, so they anchor to the frame. import Navbar from '@shared/components/navbar/Navbar.astro' import Sidebar from '@shared/components/navbar/Sidebar.astro' import PageHeader from '@shared/components/layout/PageHeader.astro' import PageScripts from '@shared/components/PageScripts.astro' import ThemeSettings from '@shared/components/demo/ThemeSettings.astro' import { themeDataAttributes, type ThemeKey } from '@shared/lib/theme-config' import libs from '@tabler/core/libs.json' interface Props { title: string /** page header title; defaults to `title` */ pageHeader?: string /** text below the page title */ description?: string /** active menu entry, e.g. "dashboards.crm" */ pageMenu?: string /** icon-only sidebar rail: folded, or folded until hovered */ sidebarMode?: 'folded' | 'folded-hover' /** where the main menu lives */ navbarPosition?: 'horizontal' | 'vertical' /** container width; fluid by default so the page fills the wide frame instead of centering a capped column */ layout?: 'default' | 'fluid' | 'boxed' /** renders the theme settings offcanvas (needed for a capture of the panel) */ themeSettings?: boolean /** * Theme switcher values rendered as data-bs-* on — `theme-primary`, * `theme-font`, `theme-base`, `theme-radius` (see themeDefaults). Pulls in * tabler-themes.css, which holds the variants. */ theme?: Partial> /** third-party libs from libs.json the page needs, e.g. ['apexcharts'] */ pageLibs?: string[] /** core CSS plugins (site.cssPlugins), e.g. ['payments'] */ cssPlugins?: string[] } const { title, pageHeader, description, pageMenu, sidebarMode, navbarPosition = 'vertical', layout = 'fluid', themeSettings = false, theme = {}, pageLibs = [], cssPlugins = [] } = Astro.props // tabler-vendors.css carries the third-party styling (the ApexCharts tokens // among them, which is what themes a chart's labels, grid and legend for the // color mode), so a page that pulls a lib in gets it without asking. const stylePlugins = [...new Set([...(pageLibs.length > 0 ? ['vendors'] : []), ...(Object.keys(theme).length > 0 ? ['themes'] : []), ...cssPlugins])] const headerTitle = pageHeader ?? title // Same as BaseLayout: the page states its own layout as data-bs-* on . const themeAttributes = themeDataAttributes({ ...theme, 'navbar-position': navbarPosition, 'layout': layout, 'sidebar': sidebarMode } as Partial>) // core/dist only has .min. files after a full `pnpm build`; `astro dev` serves // whatever core's own watcher last emitted, which is unminified. const min = import.meta.env.DEV ? '' : '.min' type Lib = { npm?: string; js?: string[]; css?: string[] } const pageLibEntries = Object.entries(libs as Record).filter(([name]) => pageLibs.includes(name)) const libHref = (lib: Lib, file: string) => `/dist/libs/${lib.npm}/${file}` const libCssFiles = pageLibEntries.flatMap(([, lib]) => (lib.css ?? []).map((file) => libHref(lib, file))) const libJsFiles = pageLibEntries.flatMap(([, lib]) => (lib.js ?? []).map((file) => libHref(lib, file))) --- {title} - Tabler screenshots {stylePlugins.map((plugin) => )} {libCssFiles.map((href) => )}

{themeSettings && }

{libJsFiles.map((src) =>