1 module uim.bootstrap.bs5.demos.examples.offcanvas; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/starter", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Starter Page - Bootstrap 5 Demo", 14 ]) 15 .styles(` 16 html, 17 body { 18 overflow-x: hidden; /* Prevent scroll on narrow devices */ 19 } 20 21 body { 22 padding-top: 56px; 23 } 24 25 @media (max-width: 991.98px) { 26 .offcanvas-collapse { 27 position: fixed; 28 top: 56px; /* Height of navbar */ 29 bottom: 0; 30 left: 100%; 31 width: 100%; 32 padding-right: 1rem; 33 padding-left: 1rem; 34 overflow-y: auto; 35 visibility: hidden; 36 background-color: #343a40; 37 transition: transform .3s ease-in-out, visibility .3s ease-in-out; 38 } 39 .offcanvas-collapse.open { 40 visibility: visible; 41 transform: translateX(-100%); 42 } 43 } 44 45 .nav-scroller { 46 position: relative; 47 z-index: 2; 48 height: 2.75rem; 49 overflow-y: hidden; 50 } 51 52 .nav-scroller .nav { 53 display: flex; 54 flex-wrap: nowrap; 55 padding-bottom: 1rem; 56 margin-top: -1px; 57 overflow-x: auto; 58 color: rgba(255, 255, 255, .75); 59 text-align: center; 60 white-space: nowrap; 61 -webkit-overflow-scrolling: touch; 62 } 63 64 .nav-underline .nav-link { 65 padding-top: .75rem; 66 padding-bottom: .75rem; 67 font-size: .875rem; 68 color: #6c757d; 69 } 70 71 .nav-underline .nav-link:hover { 72 color: #007bff; 73 } 74 75 .nav-underline .active { 76 font-weight: 500; 77 color: #343a40; 78 } 79 80 .text-white-50 { color: rgba(255, 255, 255, .5); } 81 82 .bg-purple { background-color: #6f42c1; } 83 .bd-placeholder-img { 84 font-size: 1.125rem; 85 text-anchor: middle; 86 -webkit-user-select: none; 87 -moz-user-select: none; 88 user-select: none; 89 } 90 91 @media (min-width: 768px) { 92 .bd-placeholder-img-lg { 93 font-size: 3.5rem; 94 } 95 }`) 96 .scripts(` 97 (function () { 98 'use strict' 99 100 document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () { 101 document.querySelector('.offcanvas-collapse').classList.toggle('open') 102 }) 103 })()`); 104 } 105 106 override string content() { 107 108 return 109 /* <link href="offcanvas.css" rel="stylesheet"> 110 </head> 111 <body class="bg-light"> 112 */ 113 BS5Navbar(["navbar-expand-lg fixed-top navbar-dark bg-dark"], ["aria-label":"Main navigation"], 114 H5Div(["container-fluid"], 115 BS5NavbarBrand(["href":"#"], "Offcanvas navbar"), 116 H5Button(["navbar-toggler p-0 border-0"], ["type":"button", "data-bs-toggle":"offcanvas", "aria-label":"Toggle navigation"], H5Span(["navbar-toggler-icon"])), 117 118 H5Div("navbarsExampleDefault", ["navbar-collapse offcanvas-collapse"], 119 BS5NavbarNav(["me-auto mb-2 mb-lg-0"], 120 BS5NavItem(["active"], 121 BS5NavLink(["aria-current":"page", "href":"#"], "Dashboard") 122 ), 123 BS5NavItem(BS5NavLink(["href":"#"], "Notifications")), 124 BS5NavItem(BS5NavLink(["href":"#"], "Profile")), 125 BS5NavItem( 126 BS5NavLink(["href":"#"], "Switch account") 127 ), 128 BS5NavItem(["dropdown"], 129 BS5NavLink("dropdown01", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "aria-expanded":"false"], "Settings"), 130 BS5DropdownMenu(["aria-labelledby":"dropdown01BS5DropdownMenu"], 131 H5Li(BS5DropdownItem(["href":"#"], "ActionBS5DropdownMenu(")), 132 H5Li(BS5DropdownItem(["href":"#"], "Another action")), 133 H5Li(BS5DropdownItem(["href":"#"], "Something else here")), 134 ) 135 ) 136 ), 137 H5Form(["d-flex"], 138 BS5InputSearch(["me-2"], ["placeholder":"Search", "aria-label":"Search"]), 139 H5Button(["btn btn-outline-success"], ["type":"submit"], "Search") 140 ) 141 ) 142 ) 143 ).toString~ 144 145 H5Div(["nav-scroller bg-white shadow-sm"], 146 BS5Nav(["nav-underline"], ["aria-label":"Secondary navigation"], 147 BS5NavLink(["active"], ["aria-current":"page", "href":"#"], "Dashboard"), 148 BS5NavLink(["href":"#"], 149 H5String("Friends"), 150 H5Span(["badge bg-light text-dark rounded-pill align-text-bottom"], "27")), 151 BS5NavLink(["href":"#"], "Explore"), 152 BS5NavLink(["href":"#"], "Suggestions"), 153 BS5NavLink(["href":"#"], "Link"), 154 BS5NavLink(["href":"#"], "Link"), 155 BS5NavLink(["href":"#"], "Link"), 156 BS5NavLink(["href":"#"], "Link"), 157 BS5NavLink(["href":"#"], "Link") 158 ) 159 ).toString~ 160 161 H5Main(["container"], 162 H5Div(["d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm"], 163 H5Img(["me-3"], ["src":"../assets/brand/bootstrap-logo-white.svg", "alt":"", "width":"48", "height":"38"]), 164 H5Div(["lh-1"], 165 H5H1(["h6 mb-0 text-white lh-1"], "Bootstrap"), 166 H5Small("Since 2011"))), 167 168 H5Div(["my-3 p-3 bg-white rounded shadow-sm"], 169 H5H6(["border-bottom pb-2 mb-0"], "Recent updates"), 170 H5Div(["d-flex text-muted pt-3"], 171 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 172 /* H5Title("Placeholder"), 173 H5Rect(["width":"100%", "height":"100%", "fill":"#007bff"]), 174 H5Text(["x":"50%", "y":"50%", "fill":"#007bff", "dy":".3em"], "32x32") 175 */ ), 176 H5P(["pb-3 mb-0 small lh-sm border-bottom"], 177 H5Strong(["d-block text-gray-dark"], "@username"), 178 H5String("Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."))), 179 180 H5Div(["d-flex text-muted pt-3"], 181 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 182 /* H5Title("Placeholder"), 183 H5Rect(["width":"100%", "height":"100%", "fill":"#e83e8c"]), 184 H5Text(["x":"50%", "y":"50%", "fill":"#e83e8c", "dy":".3em"], "32x32") */ 185 ), 186 H5P(["pb-3 mb-0 small lh-sm border-bottom"], 187 H5Strong(["d-block text-gray-dark"], "@username"), 188 H5String("Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."))), 189 190 H5Div(["d-flex text-muted pt-3"], 191 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice" ,"focusable":"false"], 192 /* H5Title("Placeholder"), 193 H5Rect(["width":"100%", "height":"100%", "fill":"#6f42c1"]), 194 H5Text(["x":"50%", "y":"50%", "fill":"#6f42c1", "dy":".3em"], "32x32") */ 195 ), 196 H5P(["pb-3 mb-0 small lh-sm border-bottom"], 197 H5Strong(["d-block text-gray-dark"], "@username"), 198 H5String("Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. "))), 199 200 H5Small(["d-block text-end mt-3"], H5A(["href":"#"], "All updates")) 201 ), 202 203 H5Div(["my-3 p-3 bg-white rounded shadow-sm"], 204 H5H6(["border-bottom pb-2 mb-0"], "Suggestions"), 205 H5Div(["d-flex text-muted pt-3"], 206 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"]), 207 /* H5Title("Placeholder"), 208 H5Rect(["width":"100%", "height":"100%", "fill":"#007bff"]), 209 H5Text(["x":"50%", "y":"50%", "fill":"#007bff", "dy":".3em"], "32x32") */ 210 ), 211 H5Div(["pb-3 mb-0 small lh-sm border-bottom w-100"], 212 H5Div(["d-flex justify-content-between"], 213 H5Strong(["text-gray-dark"], "Full Name"), 214 H5A(["href":"#"], "Follow")), 215 H5Span(["d-block"], "@username")) 216 ), 217 218 H5Div(["d-flex text-muted pt-3"], 219 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 220 /* H5Title("Placeholder"), 221 H5Rect(["width":"100%", "height":"100%", "fill":"#007bff"]), 222 H5Text(["x":"50%", "y":"50%", "fill":"#007bff", "dy":".3em"], "32x32") */ 223 ), 224 H5Div(["pb-3 mb-0 small lh-sm border-bottom w-100"], 225 H5Div(["d-flex justify-content-between"], 226 H5Strong(["text-gray-dark"], "Full Name"), 227 H5A(["href":"#"], "Follow")), 228 H5Span(["d-block"], "@username")) 229 ), 230 231 H5Div(["d-flex text-muted pt-3"], 232 H5Svg(["bd-placeholder-img flex-shrink-0 me-2 rounded"], ["width":"32", "height":"32", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: 32x32", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 233 /* H5Title("Placeholder"), 234 H5Rect(["width":"100%", "height":"100%", "fill":"#007bff"]), 235 H5Text(["x":"50%", "y":"50%", "fill":"#007bff", "dy":".3em"], "32x32") */ 236 ), 237 238 H5Div(["pb-3 mb-0 small lh-sm border-bottom w-100"], 239 H5Div(["d-flex justify-content-between"], 240 H5Strong(["text-gray-dark"], "Full Name"), 241 H5A(["href":"#"], "Follow") 242 ), 243 H5Span(["d-block"], "@username")) 244 ), 245 H5Small(["d-block text-end mt-3"], 246 H5A(["href":"#"], "All suggestions"))).toString; 247 248 } 249 }); 250 } 251