q-viewport sidebarviewport {
minWidth: 501px
}
q-viewport navbarviewport {
maxWidth: 500px
}
sidebarviewport {
section.app-shell.sidebar-layout {
aside.sidebar {
div.brand { text { q-viewport } }
nav.nav-list {
div.nav-item.active { text { Overview } }
div.nav-item { text { Components } }
div.nav-item { text { Runtime } }
div.nav-item { text { Tests } }
}
}
section.content {
article.hero-panel {
div.layout-label { text { sidebar layout } }
h2 { text { Wide viewport route } }
p { text { This branch is rendered by sidebarviewport when the visual viewport is wider than 500px. The navigation is part of this branch QDom tree. } }
}
section.metrics {
div.metric {
strong { text { 501px+ } }
span { text { minWidth gate } }
}
div.metric {
strong { text { left nav } }
span { text { sidebar shell } }
}
div.metric {
strong { text { active } }
span { text { q-viewport-active=1 } }
}
}
}
}
}
navbarviewport {
section.app-shell.topbar-layout {
nav.topbar {
div.brand { text { q-viewport } }
div.topbar-actions {
div.nav-item.active { text { Home } }
div.nav-item { text { Docs } }
div.nav-item { text { Test } }
}
}
section.content {
article.hero-panel {
div.layout-label { text { top navbar layout } }
h2 { text { Compact viewport route } }
p { text { This branch is rendered by navbarviewport when the visual viewport is 500px wide or less. It replaces the sidebar tree with a compact top navigation tree. } }
}
section.metrics {
div.metric {
strong { text { <=500px } }
span { text { maxWidth gate } }
}
div.metric {
strong { text { top nav } }
span { text { compact shell } }
}
div.metric {
strong { text { active } }
span { text { q-viewport-active=1 } }
}
}
}
}
}