# Admin panel
The template is designed for internal tools and management interfaces that require a clear, efficient, and data-driven layout. It's built to help administrators oversee and manage content, users, or system settings with ease — whether that's monitoring key metrics, managing user accounts, or configuring application settings.
- **Type:** Template
- **Components:** [`p-accordion`](../../components/p-accordion/p-accordion.md), [`p-button`](../../components/p-button/p-button.md), [`p-button-pure`](../../components/p-button-pure/p-button-pure.md), [`p-canvas`](../../components/p-canvas/p-canvas.md), [`p-checkbox`](../../components/p-checkbox/p-checkbox.md), [`p-divider`](../../components/p-divider/p-divider.md), [`p-heading`](../../components/p-heading/p-heading.md), [`p-input-search`](../../components/p-input-search/p-input-search.md), [`p-link-pure`](../../components/p-link-pure/p-link-pure.md), [`p-modal`](../../components/p-modal/p-modal.md), [`p-popover`](../../components/p-popover/p-popover.md), [`p-select`](../../components/p-select/p-select.md), [`p-table`](../../components/p-table/p-table.md), [`p-tabs-bar`](../../components/p-tabs-bar/p-tabs-bar.md), [`p-text`](../../components/p-text/p-text.md)
- **Conventions and stylesheet:** shared by all examples, see [examples.md](../../examples.md)
## Markup
```html
Admin Panel
Open search
Open settings sidebar
Porsche ModelsAdd model
Filter
ModelInterestVINPurchase IntentionStatusCommentLead IDActionNew Car5GAKVCKD8EJ33575008/2021Won-
0000824402
Some additional contentEdit 718 CaymanDelete 718 CaymanUsed CarWP0ZZZ99ZTS39212409/2021Won-
0000824408
Some additional contentEdit 911 CarreraDelete 911 Carrera
What are you looking for?
```
## Script
```js
// DO NOT USE IN PRODUCTION!
// EXAMPLE CODE FOR DEMONSTRATION PURPOSE ONLY.
// Behaviour of the admin panel: the two sidebars of the canvas, the categories of its navigation, the tabs above
// the list, the search dialog and the color scheme switch.
//
// Every one of them is used in *controlled* mode: the components report what the user asked for and this page
// writes the new state back. That is what lets the sidebar affordance mirror its sidebar onto "aria-expanded" and
// the search dialog be opened from a button that is not part of it. None of these events bubbles, so each element
// is wired up itself rather than through a listener on a container.
const canvas = document.getElementById('admin-canvas');
const searchButton = document.getElementById('search-button');
const searchDialog = document.getElementById('search-dialog');
const settingsButton = document.getElementById('settings-button');
const sidebarNav = document.getElementById('sidebar-nav');
const modelTabs = document.getElementById('model-tabs');
const schemeSelect = document.getElementById('scheme-select');
// Keeps the affordance and the sidebar it opens in sync. "hide-label" only hides the label visually, so the
// button keeps its accessible name and only the state has to be announced.
const setSettingsOpen = (isOpen) => {
canvas.sidebarEndOpen = isOpen;
settingsButton.aria = { 'aria-expanded': isOpen };
};
canvas.addEventListener('sidebarStartUpdate', (e) => {
canvas.sidebarStartOpen = e.detail.open;
});
canvas.addEventListener('sidebarEndDismiss', () => setSettingsOpen(false));
settingsButton.addEventListener('click', () => setSettingsOpen(!canvas.sidebarEndOpen));
// The navigation starts out beside the content where there is room for it, and collapsed below that, where the
// canvas turns it into a flyout on top of the page.
canvas.sidebarStartOpen = window.matchMedia('(min-width: 760px)').matches;
for (const accordion of sidebarNav.querySelectorAll('p-accordion')) {
accordion.addEventListener('update', (e) => {
accordion.open = e.detail.open;
});
}
modelTabs.addEventListener('update', (e) => {
modelTabs.activeTabIndex = e.detail.activeTabIndex;
});
searchButton.addEventListener('click', () => {
searchDialog.open = true;
});
// Escape, a click outside or the close button request a close in controlled mode – the component restores focus
// to the element the dialog was opened from itself, so only the state has to be written back.
searchDialog.addEventListener('dismiss', () => {
searchDialog.open = false;
});
// The color scheme is a class on the document element, so it reaches the sidebars as well – they are rendered on
// top of the page and would not be covered by a scheme set further down. The three class names appear nowhere in
// the markup, which is why they are listed here: Tailwind scans this page too and therefore emits all three.
const schemes = ['scheme-light', 'scheme-dark', 'scheme-light-dark'];
schemeSelect.addEventListener('change', (e) => {
document.documentElement.classList.remove(...schemes);
document.documentElement.classList.add(e.detail.value);
});
```
