68 lines
1.4 KiB
CSS
68 lines
1.4 KiB
CSS
/*
|
|
* AppShell navigation overflow ("Mehr") — co-located with the component to keep
|
|
* index.css contention-free (shared-file rule). Overrides the base .app-nav
|
|
* layout from index.css; loaded after it, so these rules win.
|
|
*
|
|
* Phone: bottom bar shows 4 primary tabs + a "Mehr" button; the secondary items
|
|
* live in a sheet that opens ABOVE the bar. Laptop (>=768px): full sidebar, all
|
|
* items inline, no "Mehr" button.
|
|
*/
|
|
|
|
/* --- Phone (base) --- */
|
|
.app-nav {
|
|
/* column-reverse so .nav-secondary (2nd in DOM) renders ABOVE the bar */
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-primary {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.nav-more-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.nav-secondary {
|
|
display: none;
|
|
flex-direction: column;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.nav-secondary--open {
|
|
display: flex;
|
|
}
|
|
|
|
/* --- Laptop / Tablet (>=768px): full sidebar, no overflow --- */
|
|
@media (min-width: 768px) {
|
|
.app-nav {
|
|
flex-direction: column;
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
.nav-primary {
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.nav-more-btn {
|
|
display: none;
|
|
}
|
|
|
|
.nav-secondary {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
background: none;
|
|
border-bottom: none;
|
|
box-shadow: none;
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|