# Collapses to icons
> A team switcher, collapsible sections and projects beside the page, collapsing to a strip of icons on a desktop, with the page as a card and the signed-in user's menu at the bottom.
Source: https://shadleaf.dev/current/layouts/collapses-to-icons/
A sidebar for an application with more pages than fit in a header row. At the top, a team switcher: a
[dropdown menu](https://shadleaf.dev/current/components/dropdown-menu.md#opened-from-the-sidebar) opened from a large menu button. Then the
platform's sections as [collapsible items](https://shadleaf.dev/current/components/sidebar.md#collapsible-groups), each with its pages in a
sub-menu, the projects with a "More" menu each, and at the bottom the [user menu](https://shadleaf.dev/current/components/user-menu.md). The
page is a card beside the sidebar (`variant="inset"`). The page's header is a
[site header](https://shadleaf.dev/current/components/site-header.md) with the trigger, a separator, the page's
[breadcrumb](https://shadleaf.dev/current/components/breadcrumb.md) and the theme toggle.
On a desktop the trigger (or Ctrl/⌘+B) collapses the sidebar to a strip of icons (`collapsible="icon"`), with a
tooltip on every menu button, and a cookie remembers the choice. The projects have no icons worth a strip of their
own, so their group is left out of it (`icon-hidden`). On a phone the trigger opens the same sidebar as a panel.
Switch the preview to Phone to see it.
**Example: Collapses to icons.** A team switcher at the top, the platform's sections as collapsible items, projects with a menu each, the signed-in user's menu at the bottom, and the page as a card beside it. On a desktop the trigger collapses the sidebar to a strip of icons with tooltips; on a phone it opens it as a panel.
For reference: the [shadcn/ui block](https://ui.shadcn.com/blocks/sidebar#sidebar-07) this layout is based on.
## The layout
The whole layout file. It has what [every layout needs](https://shadleaf.dev/current/components/application-shell.md#what-every-layout-needs).
The first sample application (sample-01) has a shorter version of it, with its own pages and no team switcher.
`hx-boost` on the body loads every page with htmx; see [With htmx](https://shadleaf.dev/current/components/application-shell.md#with-htmx) for
the one check a controller then needs. Leave out the script and the attribute for a layout without htmx.
```html
PageAcme Inc
Enterprise
TeamsAcme IncAcme Corp.Evil Corp.
Add team
Platform
Playground
History
Starred
Settings
Models
Genesis
Explorer
Quantum
Documentation
Introduction
Get Started
Tutorials
Changelog
Settings
General
Team
Billing
Limits
Projects
Design Engineering
View project
Share project
Delete project
Sales & Marketing
View project
Share project
Delete project
Travel
View project
Share project
Delete project
More
Upgrade to ProAccountBillingNotifications
```
The teams are links, and the server checks the current one (`checked`), so the switcher works without JavaScript; an
application sets it with `th:checked` and lists its teams with `th:each`. The projects' menus are links too: a delete
link leads to a page (or, with htmx, an [alert dialog](https://shadleaf.dev/current/components/alert-dialog.md)) that asks first.
Without `variant="inset"` the sidebar is a column along the edge of the screen; with `collapsible="offcanvas"` it
moves out of view instead of collapsing to icons. The [Sidebar](https://shadleaf.dev/current/components/sidebar.md) page has every part and
option.
## A page
A page passes its title, its breadcrumb's levels and its content. The levels are a `th:block` with `th:ref`, so
nothing of it is rendered where it stands; the layout puts them in its ``.
```html
PlaygroundHistory
...
```
## The CSS
Shadleaf's CSS styles the components, not the page around them, and has no utility classes. The rest is the
application's CSS, here without Tailwind: the square behind the logo and the page's padding.
```css
/* The square behind the team's logo in the sidebar's header. */
.app-logo {
display: grid;
place-items: center;
flex-shrink: 0;
inline-size: 2rem;
block-size: 2rem;
border-radius: calc(var(--radius) - 2px);
background: var(--sidebar-primary);
color: var(--sidebar-primary-foreground);
}
.app-logo > svg { inline-size: 1rem; block-size: 1rem; }
/* The page's padding: the header above it has its own. */
.page { padding: 0 1rem 1rem; }
.page > h1 { margin-block-end: 1rem; font-size: 1.5rem; font-weight: 600; }
```