components: buttons, dropdown, href, nav

template/components/form_button.go

@@ -2,9 +2,8 @@ package components
 
 type FormButton struct {
 	Text       string
-	Link       string
 	Icon       string
 	IsSubmit   bool
-	IsPrimary  bool
+	TypeClass  string // type primary, secondary, success, danger, warning, info, light, dark, link, outline-primary
 	IsDisabled bool
 }

template/components/form_button.html

@@ -1,6 +1,7 @@
 {{define "form_button"}}
-    <button class="btn btn-{{if .IsPrimary}}primary{{end}}" {{if eq .IsSubmit true}}type="submit"{{else}}type="button"{{end}} {{if .IsDisabled}}disabled{{end}}>
+    <button class="btn btn-{{.TypeClass}}" {{if eq .IsSubmit true}}type="submit"{{else}}type="button"{{end}} {{if .IsDisabled}}disabled{{end}}>
-            {{.Text}}</button>
+        {{.Text}}
+    </button>
         <!-- tailwind heroicons -->
         {{if eq .Icon "gear"}}
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">

template/components/form_dropdown.go

@@ -0,0 +1,15 @@
+package components
+
+type FormDropdown struct {
+	Label      string
+	TypeClass  string
+	IsDisabled bool
+	Items      []FormDropdownItem
+}
+
+type FormDropdownItem struct {
+	Text       string
+	Link       string
+	IsDisabled bool
+	IsActive   bool
+}

template/components/form_dropdown.html

@@ -0,0 +1,16 @@
+{{define "form_dropdown_item"}}
+    <li><a class="dropdown-item {{if eq .IsActive true}}active{{end}} {{if eq .IsDisabled true}}disabled{{end}}" href="{{.Link}}">{{.Text}}</a></li>
+{{end}}
+
+{{define "form_dropdown"}}
+    <div class="dropdown">
+        <button class="btn btn-{{.TypeClass}} dropdown-toggle {{if eq .IsDisabled true}}disabled{{end}}" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            {{.Label}}
+        </button>
+        <ul class="dropdown-menu">
+            {{ range .Items}}
+                {{template "form_dropdown_item" .}}
+            {{end}}
+        </ul>
+    </div>
+{{end}}

template/components/form_href.go

@@ -0,0 +1,10 @@
+package components
+
+type FormHref struct {
+	Text       string
+	Link       string
+	Icon       string
+	IsButton   bool
+	TypeClass  string // type primary, secondary, success, danger, warning, info, light, dark, link
+	IsDisabled bool
+}

template/components/form_href.html

@@ -0,0 +1,6 @@
+{{define "form_href"}}
+    <a class="{{if eq .IsButton true}} btn btn-{{.TypeClass}}{{end}} {{if eq .IsDisabled true}}disabled{{end}}" 
+        href="{{.Link}}" {{if eq .IsButton true}}role="button"{{end}} {{if eq .IsDisabled true}}aria-disabled="true"{{end}}>
+        {{.Text}}
+    </a>
+{{end}}

template/components/page_footer.html

@@ -2,5 +2,6 @@
 <footer>
 <script src="/public/app.js"></script>
 </footer>
+<script src="/public/bootstrap/js/popper.min.js"></script>
 <script src="/public/bootstrap/js/bootstrap.min.js"></script>
 {{end}}

template/components/page_nav.go

@@ -0,0 +1,16 @@
+package components
+
+type PageNav struct {
+	NavClass   string // nav-pills
+	NavItems   []PageNavItem
+	IsVertical bool
+	IsTab      bool
+}
+
+type PageNavItem struct {
+	Text       string
+	Link       string
+	IsDisabled bool
+	IsActive   bool
+	ChildItems []PageNavItem
+}

template/components/page_nav.html

@@ -0,0 +1,23 @@
+{{define "page_nav"}}
+    <ul class="nav justify-content-center {{.NavClass}} {{if eq .IsVertical true}}flex-column{{end}}{{if eq .IsTab true}}nav-tabs{{end}}" {{if eq .IsTab true}}role="tablist"{{end}}>
+        {{range $item := .NavItems}}
+        
+            {{if gt (len $item.ChildItems) 0}}
+                <li class="nav-item dropdown">
+                    <a href="{{$item.Link}}" {{if eq .IsDisabled true}}disabled{{end}} data-bs-toggle="dropdown" 
+                        class="nav-link  dropdown-toggle {{if eq .IsActive true}}active{{end}} {{if eq .IsDisabled true}}disabled{{end}}">{{$item.Text}}</a>
+                    <ul class="dropdown-menu">
+                        {{ range $item.ChildItems}}
+                            {{template "form_dropdown_item" .}}
+                        {{end}}
+                    </ul>
+                </li>
+            {{else}}
+                <li class="nav-item"><a href="{{$item.Link}}" {{if eq .IsDisabled true}}disabled{{end}} class="nav-link {{if eq .IsActive true}}active{{end}} {{if eq .IsDisabled true}}disabled{{end}}">
+                    {{$item.Text}}
+                </a></li>
+            {{end}}
+
+        {{end}}
+    </ul>
+{{end}}