COPY-READY BLOCKS
Scaffolds
Four responsive application shells. Preview each layout and copy its complete Dowe source.
02 · INSET SIDEBAR
A dashboard sidebar between full-width bars
Open full page
layout DashboardLayout
signal openDrawer value:false
Scaffold minH:"vh-0"
appBar
AppBar variant:"soft" scheme:"primary" bordered:true
start
IconButton:
label:"Open navigation"
variant:"ghost"
show:{ xs:true md:false }
onClick:{ set:openDrawer value:!openDrawer }
icon:"hamburger-menu"
center
Text weight:"bold"
"AppBar"
start
Sidebar show:{ xs:false md:true } variant:"soft" scheme:"secondary" w:64 border:1
body
Flex direction:"column" minH:"full" align:"center" justify:"center"
Text weight:"bold"
"Sidebar"
main
children
bottomBar
Footer variant:"soft" scheme:"muted" bordered:true
center
Text weight:"bold"
"Footer"
overlays
Drawer:
open:openDrawer
position:"start"
variant:"soft"
scheme:"tertiary"
show:{ xs:true md:false }
body
Flex direction:"column" minH:"vh-0" align:"center" justify:"center"
Text weight:"bold"
"Drawer"03 · FULL-HEIGHT SIDEBAR
A sidebar beside the complete content column
Open full page
layout DashboardLayout
signal openDrawer value:false
Scaffold minH:"vh-0"
start
Sidebar:
show:{ xs:false md:true }
variant:"soft"
scheme:"secondary"
w:64
h:"vh-0"
border:1
body
Flex direction:"column" minH:"full" align:"center" justify:"center"
Text weight:"bold"
"Sidebar"
main
Flex direction:"column" minH:"vh-0" justify:"between"
AppBar variant:"soft" scheme:"primary" bordered:true
start
IconButton:
label:"Open navigation"
variant:"ghost"
show:{ xs:true md:false }
onClick:{ set:openDrawer value:!openDrawer }
icon:"hamburger-menu"
center
Text weight:"bold"
"AppBar"
children
Footer variant:"soft" scheme:"muted" bordered:true
center
Text weight:"bold"
"Footer"
overlays
Drawer:
open:openDrawer
position:"start"
variant:"soft"
scheme:"tertiary"
show:{ xs:true md:false }
body
Flex direction:"column" minH:"vh-0" align:"center" justify:"center"
Text weight:"bold"
"Drawer"04 · RAIL + BOTTOM BAR
A desktop rail that yields to mobile bottom navigation
Open full page
layout NavigationLayout
Scaffold minH:"vh-0"
start
Box minH:"vh-0" w:16 bg:"softTertiary" show:{ xs:false md:true }
RailNav variant:"soft" scheme:"tertiary" showLabels:true minH:"vh-0"
item label:"Rail" href:"/" icon:"widget-4"
main
Flex direction:"column" minH:{ xs:"vh-16" md:"vh-0" } justify:"between"
AppBar variant:"soft" scheme:"primary" bordered:true
start
IconButton:
label:"Open navigation"
variant:"ghost"
show:{ xs:true md:false }
icon:"hamburger-menu"
center
Text weight:"bold"
"AppBar"
children
bottomBar
BottomBar show:{ xs:true md:false } variant:"soft" scheme:"primary" bordered:true
tab href:"/" label:"BottomBar"
Icon name:"home"