1 module uim.bootstrap.bs5.demos.examples.navbarbottom;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("examples/navbarbottom", 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           ]).styles(`.bd-placeholder-img {
15         font-size: 1.125rem;
16         text-anchor: middle;
17         -webkit-user-select: none;
18         -moz-user-select: none;
19         user-select: none;
20       }
21 
22       @media (min-width: 768px) {
23         .bd-placeholder-img-lg {
24           font-size: 3.5rem;
25         }
26       }`);
27 		} 
28 			
29     override string content() { 
30 
31       return 
32 H5Main(["container"], 
33   H5Div(["bg-light p-5 rounded mt-3"],
34     H5H1("Bottom Navbar example"),
35     H5P(["lead"], "This example is a quick exercise to illustrate how the bottom navbar works."),
36     H5A(["btn btn-lg btn-primary"], ["href":"../components/navbar/", "role":"button"], "View navbar docs »")
37   )
38 ).toString~
39 H5Nav(["navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"], 
40   H5Div(["container-fluid"], 
41     H5A(["navbar-brand"], ["href":"#"], "Bottom navbar"),
42     H5Button(["navbar-toggler"], ["type":"button", "data-bs-toggle":"collapse", "data-bs-target":"#navbarCollapse", "aria-controls":"navbarCollapse", "aria-expanded":"false", "aria-label":"Toggle navigation"], 
43       H5Span(["navbar-toggler-icon"])
44     ),
45     H5Div("navbarCollapse", ["collapse navbar-collapse"], 
46       H5Ul(["navbar-nav"], 
47         BS5NavItem(["active"], 
48           BS5NavLink(["aria-current":"page", "href":"#"], "Home")
49         ),
50         BS5NavItem(
51           BS5NavLink(["href":"#"], "Link")
52         ),
53         BS5NavItem(
54           BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")
55         ),
56         BS5NavItem(["dropup"],
57           BS5NavLink("dropdown10", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "aria-expanded":"false"], "Dropup"),
58           H5Ul(["dropdown-menu"], ["aria-labelledby":"dropdown10"],
59             H5Li(BS5DropdownItem(["href":"#"], "Action")),
60             H5Li(BS5DropdownItem(["href":"#"], "Another action")),
61             H5Li(BS5DropdownItem(["href":"#"], "Something else here"))
62           )
63         )
64       )
65     )
66   )
67 ).toString;
68 
69     }
70   });
71 }
72