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

dowe
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

dowe
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

dowe
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" size:"md" 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"