Merge pull request #167 from GeoNet/basicHeaderDropdown

feat: allow dropdowns in basic header
GeoNet · May 9, 2024 · b295103 · b295103
2 parents e45c2a7 + d2dd68a
commit b295103
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 15 deletions.
diff --git a/ui/dev_server/server.go b/ui/dev_server/server.go
@@ -87,26 +87,41 @@ func testUIhandler(w http.ResponseWriter, req *http.Request) {
 			log.Println(err)
 		}
 	case "/geonetheaderbasic":
-		links := []header_basic.HeaderBasicLink{
-			{
+		items := []header_basic.HeaderBasicItem{
+			header_basic.HeaderBasicLink{
 				Title:      "Test Home",
 				URL:        "https://www.geonet.org.nz",
 				IsExternal: false,
 			},
-			{
+			header_basic.HeaderBasicDropdown{
+				Title: "Test Dropdown",
+				Links: []header_basic.HeaderBasicLink{
+					{
+						Title:      "Test Dropdown External",
+						URL:        "https://www.geonet.org.nz",
+						IsExternal: true,
+					},
+					{
+						Title:      "Test Dropdown Not External",
+						URL:        "https://www.geonet.org.nz",
+						IsExternal: false,
+					},
+				},
+			},
+			header_basic.HeaderBasicLink{
 				Title:      "Test External",
 				URL:        "https://www.geonet.org.nz",
 				IsExternal: true,
 			},
-			{
+			header_basic.HeaderBasicLink{
 				Title:      "Test Not External",
 				URL:        "https://www.geonet.org.nz",
 				IsExternal: false,
 			},
 		}
 		config := header_basic.HeaderBasicConfig{
 			Logo:  logo,
-			Links: links,
+			Items: items,
 		}
 		leadingHTML += `<link rel="stylesheet" href="/local/header_basic.css">`
 

diff --git a/ui/geonet_header_basic/header_basic.go b/ui/geonet_header_basic/header_basic.go
@@ -9,13 +9,21 @@ import (
 type HeaderBasicConfig struct {
 	// The HTML for the logo to use.
 	Logo template.HTML
-	// Links to display for navigation. Note: The first link is
+	// Items to display for navigation. Can be either a link
+	// or a dropdown. Note: If the first item is a link, it's
 	// considered the 'home' page link.
-	Links []HeaderBasicLink
+	Items []HeaderBasicItem
 	// The HTML for the home icon. This should not be changed.
 	HomeIcon template.HTML
 }
 
+type HeaderBasicItem interface {
+	GetTitle() string
+	GetURL() string
+	External() bool
+	GetLinks() []HeaderBasicLink
+}
+
 // Defines a link that is displayed on the header for navigation.
 type HeaderBasicLink struct {
 	Title string
@@ -24,6 +32,39 @@ type HeaderBasicLink struct {
 	IsExternal bool
 }
 
+func (l HeaderBasicLink) GetTitle() string {
+	return l.Title
+}
+func (l HeaderBasicLink) GetURL() string {
+	return l.URL
+}
+func (l HeaderBasicLink) External() bool {
+	return l.IsExternal
+}
+func (l HeaderBasicLink) GetLinks() []HeaderBasicLink {
+	return []HeaderBasicLink{l}
+}
+
+// Defines a dropdown that is displayed on the header for navigation.
+// Contains a number of links.
+type HeaderBasicDropdown struct {
+	Title string
+	Links []HeaderBasicLink
+}
+
+func (d HeaderBasicDropdown) GetTitle() string {
+	return d.Title
+}
+func (d HeaderBasicDropdown) GetURL() string {
+	return ""
+}
+func (d HeaderBasicDropdown) External() bool {
+	return false
+}
+func (d HeaderBasicDropdown) GetLinks() []HeaderBasicLink {
+	return d.Links
+}
+
 //go:embed header_basic.html
 var headerBasicHTML string
 var headerBasicTmpl = template.Must(template.New("headerbasic").Parse(headerBasicHTML))

diff --git a/ui/geonet_header_basic/header_basic.html b/ui/geonet_header_basic/header_basic.html
@@ -12,21 +12,40 @@
         </button>
         <div class="navbar-collapse collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ms-auto">
-
-                {{range $index,$link := .Links }}
+                {{range $index,$item := .Items }}
+                {{ if eq (len $item.GetLinks) 1 }}
+                {{ $link := index $item.GetLinks 0 }}
                 <li class="nav-item">
                     <a
-                        class="nav-link{{if $link.IsExternal}} external-link{{end}}"
-                        href="{{$link.URL}}"
-                        rel="{{if $link.IsExternal}}external noopener noreferrer{{end}}"
-                        title="{{$link.Title}}"
-                        target="{{if $link.IsExternal}}_blank{{else}}_self{{end}}"
+                        class="nav-link{{if $link.External}} external-link{{end}}"
+                        href="{{$link.GetURL}}"
+                        rel="{{if $link.External}}external noopener noreferrer{{end}}"
+                        title="{{$link.GetTitle}}"
+                        target="{{if $link.External}}_blank{{else}}_self{{end}}"
                     >
                         {{if eq $index 0}}
                         <span class="d-inline-flex align-items-center">{{$.HomeIcon}}</span>{{end}}
-                        {{$link.Title}}
+                        {{$link.GetTitle}}
                     </a>
                 </li>
+                {{ else }}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false" title={{$item.Title}}> {{$item.Title}} </a>
+                    <div class="dropdown-menu">
+                        {{range $_,$link := $item.GetLinks}}
+                        <a 
+                            class="dropdown-item{{if $link.External}} external-link{{end}}" 
+                            href={{$link.URL}}
+                            rel="{{if $link.External}}external noopener noreferrer{{end}}"
+                            title="{{$link.GetTitle}}"
+                            target="{{if $link.External}}_blank{{else}}_self{{end}}"
+                        > 
+                            {{$link.Title}} 
+                        </a>
+                        {{end}}
+                    </div>
+                </li>
+                {{ end }}
                 {{end}}
             </ul>
         </div>