1 module uim.bootstrap.bs5.demos.demo;
2 
3 import uim.bootstrap;
4 
5 auto demoBs5Example(string id, string title, DH5Obj tabResult, string tabUim = "", string tabHTML = "", string tabCSS = "") {
6   return 
7   H5Div(["mt-4 mb-4"],
8     H5H3(["text-muted"], title),
9     BS5Card(
10       BS5CardHeader(
11         BS5NavTabs(["card-header-tabs"],
12           BS5NavItem(["role":"presentation"], 
13             BS5NavLink("tab"~id~"-1", ["active"], ["href":"#tab"~id~"-pane-1", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tab"~id~"-pane-1", "aria-selected":"true"], "Result")).toString~
14           BS5NavItem(["role":"presentation"], 
15             BS5NavLink("tab"~id~"-2", ["href":"#tab"~id~"-pane-2", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tab"~id~"-pane-2", "aria-selected":"true"], "Code")).toString~
16           BS5NavItem(["role":"presentation"], 
17             BS5NavLink("tab"~id~"-3", ["href":"#tab"~id~"-pane-3", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tab"~id~"-pane-3", "aria-selected":"true"], "HTML")).toString
18       )),
19       BS5CardBody(
20         H5Div(["tab-content"], 
21           H5Div("tab"~id~"-pane-1", ["tab-pane", "active"], ["role":"tabpanel", "aria-labelledby":"tab"~id~"-1"], tabResult),
22           H5Div("tab"~id~"-pane-2", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tab"~id~"-2"], 
23             `<pre><code>`~tabUim.replace(`&`, "&amp;").replace(`"`, "&quot;").replace("<", "&lt;").replace(">", "&gt;")~`</code></pre>`),
24           H5Div("tab"~id~"-pane-3", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tab"~id~"-3"], 
25             `<pre><code>`~tabHTML.replace(`&`, "&amp;").replace(`"`, "&quot;").replace("<", "&lt;").replace(">", "&gt;")~`</code></pre>`)
26   ))));
27 }
28 
29 
30 auto listLevels(string selected = "") {
31   string items;
32 
33   items ~= (selected != "basic" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic"], "Basic")).toString : H5Li(["list-group-item active"], "Basic").toString);
34   items ~= (selected != "complex" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex"], "Complex")).toString : H5Li(["list-group-item active"], "Complex").toString);
35   items ~= (selected != "examples" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples"], "Examples")).toString : H5Li(["list-group-item active"], "Examples").toString);
36 
37   return 
38     H5Div(["mb-5"],
39       H5H3(["text-muted"], "Levels"), 
40       BS5List(["list-group"], items));
41 } 
42 
43 auto listAreas(string level, string selected = "") {
44   string items;
45 
46   switch(level) {
47     case "basic":
48       items ~= (selected != "components" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components"], "Components")).toString : H5Li(["list-group-item active"], "Components").toString);
49       items ~= (selected != "contents" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/contents"], "Contents")).toString : H5Li(["list-group-item active"], "Contents").toString);
50       items ~= (selected != "forms" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms"], "Forms")).toString : H5Li(["list-group-item active"], "Forms").toString);
51       items ~= (selected != "helpers" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers"], "Helpers")).toString : H5Li(["list-group-item active"], "Helpers").toString);
52       items ~= (selected != "layouts" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/layouts"], "Layouts")).toString : H5Li(["list-group-item active"], "Layouts").toString);
53       items ~= (selected != "utilities" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities"], "Utilities")).toString : H5Li(["list-group-item active"], "Utilities").toString);
54       break;
55     case "complex":
56       items ~= (selected != "ecommerce" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/ecommerce"], "eCommerce")).toString : H5Li(["list-group-item active"], "eCommerce").toString);
57       items ~= (selected != "social" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/social"], "Social")).toString : H5Li(["list-group-item active"], "Social").toString);
58       items ~= (selected != "flightbooking" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/flightbooking"], "Flight Booking")).toString : H5Li(["list-group-item active"], "Flight Booking").toString);
59       items ~= (selected != "jobcards" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/jobcards"], "Job cards")).toString : H5Li(["list-group-item active"], "Job cards").toString);
60       items ~= (selected != "pricingtable" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/pricingtable"], "Pricing Table")).toString : H5Li(["list-group-item active"], "Pricing Table").toString);
61       items ~= (selected != "responsivecontact" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/responsivecontact"], "Responsive Contact")).toString : H5Li(["list-group-item active"], "Responsive Contact").toString);
62       items ~= (selected != "userprofile" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/userprofile"], "User Profile")).toString : H5Li(["list-group-item active"], "User Profile").toString);
63       items ~= (selected != "userprofilestats" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/userprofilestats"], "User Profile with Statitics")).toString : H5Li(["list-group-item active"], "User Profile with Statitics").toString);
64       break;
65     case "examples":
66       items ~= (selected != "album" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/album"], "Album")).toString : H5Li(["list-group-item active"], "Album").toString);
67       items ~= (selected != "blog" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/blog"], "Blog")).toString : H5Li(["list-group-item active"], "Blog").toString);
68       items ~= (selected != "carousel" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/carousel"], "Carousel")).toString : H5Li(["list-group-item active"], "Carousel").toString);
69       items ~= (selected != "cheatsheet" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/cheatsheet"], "Cheat Sheet")).toString : H5Li(["list-group-item active"], "Cheat Sheet").toString);
70       items ~= (selected != "checkout" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/checkout"], "Checkout")).toString : H5Li(["list-group-item active"], "Checkout").toString);
71       items ~= (selected != "cover" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/cover"], "Cover")).toString : H5Li(["list-group-item active"], "Cover").toString);
72       items ~= (selected != "dashboard" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/dashboard"], "Dashboard")).toString : H5Li(["list-group-item active"], "Dashboard").toString);
73       items ~= (selected != "grid" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/grid"], "Grid")).toString : H5Li(["list-group-item active"], "Grid").toString);
74       items ~= (selected != "masonary" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/masonary"], "Masonary")).toString : H5Li(["list-group-item active"], "Masonary").toString);
75       items ~= (selected != "navbarbottom" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/navbarbottom"], "Navbar bottom")).toString : H5Li(["list-group-item active"], "Navbar bottom").toString);
76       items ~= (selected != "navbars" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/navbars"], "Navbars")).toString : H5Li(["list-group-item active"], "Navbars").toString);
77       items ~= (selected != "navbarstatic" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/navbarstatic"], "Navbar static")).toString : H5Li(["list-group-item active"], "Navbar static").toString);
78       items ~= (selected != "navbartopfixed" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/navbartopfixed"], "Navbar Top Fixed")).toString : H5Li(["list-group-item active"], "Navbar Top Fixed").toString);
79       items ~= (selected != "offcanvas" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/offcanvas"], "Offcanvas")).toString : H5Li(["list-group-item active"], "Offcanvas").toString);
80       items ~= (selected != "pricing" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/pricing"], "Pricing")).toString : H5Li(["list-group-item active"], "Pricing").toString);
81       items ~= (selected != "product" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/product"], "Product")).toString : H5Li(["list-group-item active"], "Product").toString);
82       items ~= (selected != "signin" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/signin"], "Signin")).toString : H5Li(["list-group-item active"], "Signin").toString);
83       items ~= (selected != "starter" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/examples/starter"], "Starter")).toString : H5Li(["list-group-item active"], "Starter").toString);
84       break;
85     default: break;
86   }
87 
88   return 
89     H5Div(["mb-5"],
90       H5H3(["text-muted"], "Areas"), 
91       BS5List(items));
92 } 
93 
94 auto listSections(string level, string area, string selected = "") {
95   string items;
96 
97   switch(level) {
98     case "basic":
99       switch(area) {
100         case "layouts":
101           items ~= (selected != "columns" ? H5Li(["list-group-item"],  H5A(["href":"/demos/uim-bootstrap/5/basic/layouts/columns"], "Columns")).toString : H5Li(["list-group-item active"], "Columns").toString);
102           items ~= (selected != "container" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/layouts/container"], "Container")).toString : H5Li(["list-group-item active"], "Container").toString);
103           items ~= (selected != "grid" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/layouts/grid"], "Grid")).toString : H5Li(["list-group-item active"], "Grid").toString);
104           items ~= (selected != "components" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/layouts/gutters"], "Gutters")).toString : H5Li(["list-group-item active"], "Gutters").toString);
105           break;
106         case "contents":
107             items ~= (selected != "figures" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/contents/figures"], "Figures")).toString : H5Li(["list-group-item active"], "Figures").toString);
108             items ~= (selected != "images" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/contents/images"], "Images")).toString : H5Li(["list-group-item active"], "Images").toString);
109             items ~= (selected != "tables" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/contents/tables"], "Tables")).toString : H5Li(["list-group-item active"], "Tables").toString);
110             items ~= (selected != "typography" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/contents/typography"], "Typography")).toString : H5Li(["list-group-item active"], "Typography").toString);
111           break;
112         case "components":
113           items ~= (selected != "accordions" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/accordions"], "Accordions")).toString : H5Li(["list-group-item active"], "Accordions").toString);
114           items ~= (selected != "alerts" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/alerts"], "Alerts")).toString : H5Li(["list-group-item active"], "Alerts").toString);
115           items ~= (selected != "badges" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/badges"], "Badges")).toString : H5Li(["list-group-item active"], "Badges").toString);
116           items ~= (selected != "breadcrumbs" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/breadcrumbs"], "Breadcrumbs")).toString : H5Li(["list-group-item active"], "Breadcrumbs").toString);
117           items ~= (selected != "buttongroups" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/buttongroups"], "Button Groups")).toString : H5Li(["list-group-item active"], "Button Groups").toString);
118           items ~= (selected != "buttons" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/buttons"], "Buttons")).toString : H5Li(["list-group-item active"], "Buttons").toString);
119           items ~= (selected != "cards" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/cards"], "Cards")).toString : H5Li(["list-group-item active"], "Cards").toString);
120           items ~= (selected != "carousels" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/carousels"], "Carousels")).toString : H5Li(["list-group-item active"], "Carousels").toString);
121           items ~= (selected != "closebuttons" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/closebuttons"], "Close Buttons")).toString : H5Li(["list-group-item active"], "Close Buttons").toString);
122           items ~= (selected != "collapses" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/collapses"], "Collapses")).toString : H5Li(["list-group-item active"], "Collapses").toString);
123           items ~= (selected != "dropdowns" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/dropdowns"], "Dropdowns")).toString : H5Li(["list-group-item active"], "Dropdowns").toString);
124           items ~= (selected != "listgroups" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/listgroups"], "List Groups")).toString : H5Li(["list-group-item active"], "List Groups").toString);
125           items ~= (selected != "modals" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/modals"], "Modals")).toString : H5Li(["list-group-item active"], "Modals").toString);
126           items ~= (selected != "navbars" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/navbars"], "Navbars")).toString : H5Li(["list-group-item active"], "Navbars").toString);
127           items ~= (selected != "navs" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/navs"], "Navs")).toString : H5Li(["list-group-item active"], "Navs").toString);
128           items ~= (selected != "paginations" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/paginations"], "Paginations")).toString : H5Li(["list-group-item active"], "Paginations").toString);
129           items ~= (selected != "popovers" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/popovers"], "Popovers")).toString : H5Li(["list-group-item active"], "Popovers").toString);
130           items ~= (selected != "progresses" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/progresses"], "Progresses")).toString : H5Li(["list-group-item active"], "Progresses").toString);
131           items ~= (selected != "scrollspies" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/scrollspies"], "Scrollspies")).toString : H5Li(["list-group-item active"], "Scrollspies").toString);
132           items ~= (selected != "spinners" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/spinners"], "Spinners")).toString : H5Li(["list-group-item active"], "Spinners").toString);
133           items ~= (selected != "toasts" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/toasts"], "Toasts")).toString : H5Li(["list-group-item active"], "Toasts").toString);
134           items ~= (selected != "tooltips" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/components/tooltips"], "Tooltips")).toString : H5Li(["list-group-item active"], "Tooltips").toString);
135           break;
136         case "helpers":
137           items ~= (selected != "clearfix" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/clearfix"], "Clearfix")).toString : H5Li(["list-group-item active"], "Clearfix").toString);
138           items ~= (selected != "coloredlinks" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/coloredlinks"], "Colored Links")).toString : H5Li(["list-group-item active"], "Colored Links").toString);
139           items ~= (selected != "positionhelpers" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/positionhelpers"], "Position Helpers")).toString : H5Li(["list-group-item active"], "Position Helpers").toString);
140           items ~= (selected != "ratio" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/ratio"], "Ratio")).toString : H5Li(["list-group-item active"], "Ratio").toString);
141           items ~= (selected != "stretchedlink" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/stretchedlink"], "Stretched Link")).toString : H5Li(["list-group-item active"], "Stretched Link").toString);
142           items ~= (selected != "texttruncation" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/texttruncation"], "Text Truncation")).toString : H5Li(["list-group-item active"], "Text Truncation").toString);
143           items ~= (selected != "visuallyhidden" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/helpers/visuallyhidden"], "Visually Hidden")).toString : H5Li(["list-group-item active"], "Visually Hidden").toString);
144           break;
145         case "utilities":
146           items ~= (selected != "borders" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/borders"], "Borders")).toString : H5Li(["list-group-item active"], "Borders").toString);
147           items ~= (selected != "colors" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/colors"], "Colors")).toString : H5Li(["list-group-item active"], "Colors").toString);
148           items ~= (selected != "display" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/display"], "Display")).toString : H5Li(["list-group-item active"], "Display").toString);
149           items ~= (selected != "flex" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/flex"], "Flex")).toString : H5Li(["list-group-item active"], "Flex").toString);
150           items ~= (selected != "float" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/float"], "Float")).toString : H5Li(["list-group-item active"], "Float").toString);
151           items ~= (selected != "interactions" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/interactions"], "Interactions")).toString : H5Li(["list-group-item active"], "Interactions").toString);
152           items ~= (selected != "overflow" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/overflow"], "Overflow")).toString : H5Li(["list-group-item active"], "Overflow").toString);
153           items ~= (selected != "positionutilities" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/positionutilities"], "Position Utilities")).toString : H5Li(["list-group-item active"], "Position Utilities").toString);
154           items ~= (selected != "shadows" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/shadows"], "Shadows")).toString : H5Li(["list-group-item active"], "Shadows").toString);
155           items ~= (selected != "colsizingumns" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/sizing"], "Sizing")).toString : H5Li(["list-group-item active"], "Sizing").toString);
156           items ~= (selected != "text" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/text"], "Text")).toString : H5Li(["list-group-item active"], "Text").toString);
157           items ~= (selected != "verticalalign" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/verticalalign"], "Vertical Align")).toString : H5Li(["list-group-item active"], "Vertical Align").toString);
158           items ~= (selected != "visibility" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/utilities/visibility"], "Visibility")).toString : H5Li(["list-group-item active"], "Visibility").toString);
159           break;
160         case "forms":
161           items ~= (selected != "checks_radios" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/checks_radios"], "Checkboxes and Radios")).toString : H5Li(["list-group-item active"], "Checkboxes and Radios").toString);
162           items ~= (selected != "floatinglabels" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/floatinglabels"], "Floating Labels")).toString : H5Li(["list-group-item active"], "Floating Labels").toString);
163           items ~= (selected != "formcontrol" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/formcontrol"], "Form Control")).toString : H5Li(["list-group-item active"], "Form Control").toString);
164           items ~= (selected != "inputgroup" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/inputgroup"], "Input Group")).toString : H5Li(["list-group-item active"], "Input Group").toString);
165           items ~= (selected != "layout" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/layout"], "Layout")).toString : H5Li(["list-group-item active"], "Layout").toString);
166           items ~= (selected != "overview" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/overview"], "Overview")).toString : H5Li(["list-group-item active"], "Overview").toString);
167           items ~= (selected != "overflow" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/overflow"], "Overflow")).toString : H5Li(["list-group-item active"], "Overflow").toString);
168           items ~= (selected != "range" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/range"], "Range")).toString : H5Li(["list-group-item active"], "Range").toString);
169           items ~= (selected != "select" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/select"], "Select")).toString : H5Li(["list-group-item active"], "Select").toString);
170           items ~= (selected != "validation" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/basic/forms/validation"], "Validation")).toString : H5Li(["list-group-item active"], "Validation").toString);
171           break;
172         default: break;
173       }
174       break;
175       case "complex":
176         switch(area) {
177           case "ecommerce":
178             items ~= (selected != "cards" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/ecommerce/cards"], "Cards")).toString : H5Li(["list-group-item active"], "Cards").toString);
179             items ~= (selected != "cardsanimation" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/ecommerce/cardsanimation"], "Cards with Animation")).toString : H5Li(["list-group-item active"], "Cards with Animation").toString);
180           break;
181           case "social":
182             items ~= (selected != "post" ? H5Li(["list-group-item"], H5A(["href":"/demos/uim-bootstrap/5/complex/social/post"], "Social Post")).toString : H5Li(["list-group-item active"], "Social Post").toString);
183           break;
184           default: break;
185         }
186       break;
187     case "examples":
188       break;
189     default: break;
190   }
191 
192   return 
193     H5Div(["mb-5"],
194       H5H3(["text-muted"], "Sections"), 
195       H5Ul(["list-group"], items));
196 }