diff options
| author | Conor Britain <conor@leftfieldlabs.com> | 2022-07-08 19:00:47 -0400 |
|---|---|---|
| committer | Jamal Carvalho <jamal@golang.org> | 2022-10-31 17:00:13 +0000 |
| commit | 3cbdc17ec9382ead5e7fdb49795023c1284df6b9 (patch) | |
| tree | 66d0c357d0b3a64005e95ef6d0ff16609cb15b7d /_content/site.tmpl | |
| parent | 2a3345891024291858719558fb264fed9e20215a (diff) | |
| download | go-x-website-3cbdc17ec9382ead5e7fdb49795023c1284df6b9.tar.xz | |
_content: update header nav with dropdowns and subnavs
Adds dropdown menus as well as fixed open/closed states. Adds submenus
to mobile header nav.
Change-Id: I0fdf6fd81008857b1ed28f0a8388de8e004eb722
Reviewed-on: https://go-review.googlesource.com/c/website/+/435522
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Run-TryBot: Hyang-Ah Hana Kim <hyangah@gmail.com>
Diffstat (limited to '_content/site.tmpl')
| -rw-r--r-- | _content/site.tmpl | 72 |
1 files changed, 68 insertions, 4 deletions
diff --git a/_content/site.tmpl b/_content/site.tmpl index 8559996e..65ee1ba1 100644 --- a/_content/site.tmpl +++ b/_content/site.tmpl @@ -62,7 +62,35 @@ {{- $currentPage := .}} {{- range $menus.main}} <li class="Header-menuItem {{if strings.HasPrefix $currentPage.URL .url}} Header-menuItem--active{{end}}"> - <a href="{{.url}}">{{.name}}</a> + <a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}}aria-haspopup="true" class="js-desktop-menu-hover"{{end}}> + {{.name}} {{if .children}}<i class="material-icons">arrow_drop_down</i>{{end}} + </a> + {{- if .children}} + <ul class="Header-submenu js-desktop-submenu-hover" aria-label="submenu"> + {{- range .children}} + <li class="Header-submenuItem"> + <div> + {{- if .url}} + <a href="{{.url}}"> + {{.name}} + {{ if .external}} <i class="material-icons">open_in_new</i>{{end}} + </a> + {{- else}} + {{.name}} + {{- end}} + </div> + <p>{{.explanation}}</p> + {{- if .socialIconsList}} + <div class="Header-socialIcons"> + {{ range .socialIconsList }} + <a class="Header-socialIcon" href="{{.url}}"><img src="/images/logos/social/{{.img}}" /></a> + {{- end}} + </div> + {{- end}} + </li> + {{- end}} + </ul> + {{- end}} </li> {{- end}} </ul> @@ -95,9 +123,45 @@ </div> <ul class="NavigationDrawer-list"> {{- range $menus.main}} - <li class="NavigationDrawer-listItem {{if strings.HasPrefix $currentPage.URL .url}} NavigationDrawer-listItem--active{{end}}"> - <a href="{{.url}}">{{.name}}</a> - </li> + {{ if .children }} + <li class="NavigationDrawer-listItem js-mobile-subnav-trigger {{if strings.HasPrefix $currentPage.URL .url}} NavigationDrawer-listItem--active{{end}} NavigationDrawer-hasSubnav"> + <a href="#"><span>{{.name}}</span> <i class="material-icons">navigate_next</i></a> + + <div class="NavigationDrawer NavigationDrawer-submenuItem"> + <nav class="NavigationDrawer-nav"> + <div class="NavigationDrawer-header"> + <a href="#"><i class="material-icons">navigate_before</i>{{.name}}</a> + </div> + <ul class="NavigationDrawer-list"> + {{- range .children}} + <li class="NavigationDrawer-listItem"> + {{- if .url}} + <a href="{{.url}}"> + {{.name}} + {{ if .external}} <i class="material-icons">open_in_new</i>{{end}} + </a> + {{ else }} + <div>{{.name}}</div> + {{- end}} + {{- if .socialIconsList}} + <div class="Header-socialIcons"> + {{ range .socialIconsList }} + <a class="Header-socialIcon" href="{{.url}}"><img src="/images/logos/social/{{.img}}" /></a> + {{- end}} + </div> + {{- end}} + </li> + {{- end}} + </ul> + </div> + </div> + </li> + + {{ else }} + <li class="NavigationDrawer-listItem {{if strings.HasPrefix $currentPage.URL .url}} NavigationDrawer-listItem--active{{end}}"> + <a href="{{.url}}">{{.name}}</a> + </li> + {{ end }} {{- end}} </ul> </nav> |