[x/go.dev] all: add mobile navigation menu
This adds a mobile navigation menu across the site, with accompanying javascript. Navigation was duplicated for ease of implementation. Run prettier on js/css. Fixes b/142726781 Change-Id: I4d17e81db331fac41f21f4ab3d726b22abefce8e Reviewed-on: https://team-review.git.corp.google.com/c/golang/go.dev/+/588023 CI-Result: Cloud Build <devtools-proctor-result-processor@system.gserviceaccount.com> Reviewed-by: Andrew Bonventre <andybons@google.com> X-GoDev-Commit: 0965fe204efc30bc68874d330d5762b18472f9b5
This commit is contained in:
Alexander Rakoczy
Родитель
b6bfc20d12
Коммит
7f0a15334f
|
|
@ -0,0 +1 @@
|
|||
singleQuote: true
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 239 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="#FFFFFF"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 199 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 184 B |
|
|
@ -0,0 +1,41 @@
|
|||
// Copyright 2019 The Go Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
/**
|
||||
* A bit of navigation related code for handling dismissible elements.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function registerHeaderListeners() {
|
||||
const header = document.querySelector('.js-header');
|
||||
const menuButtons = document.querySelectorAll('.js-headerMenuButton');
|
||||
menuButtons.forEach(button => {
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
header.classList.toggle('is-active');
|
||||
button.setAttribute(
|
||||
'aria-expanded',
|
||||
header.classList.contains('is-active')
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const scrim = document.querySelector('.js-scrim');
|
||||
scrim.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
header.classList.remove('is-active');
|
||||
menuButtons.forEach(button => {
|
||||
button.setAttribute(
|
||||
'aria-expanded',
|
||||
header.classList.contains('is-active')
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
registerHeaderListeners();
|
||||
});
|
||||
})();
|
||||
|
|
@ -48,12 +48,9 @@ a:hover {
|
|||
}
|
||||
.Header {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.Header-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.Header--dark {
|
||||
border-bottom: none;
|
||||
|
|
@ -75,8 +72,19 @@ a:hover {
|
|||
padding: 0;
|
||||
}
|
||||
@media only screen and (min-width: 57.7rem) {
|
||||
.Header {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.Header-menuItem {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
.Header-menu {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.Header-navOpen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Header-menuItem a:link,
|
||||
|
|
@ -104,6 +112,73 @@ a:hover {
|
|||
border-bottom-color: #542c7d;
|
||||
color: #3e4042;
|
||||
}
|
||||
.Header-navOpen {
|
||||
height: 2rem;
|
||||
margin: 1rem 1rem 1rem 1.5rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.NavigationDrawer {
|
||||
background: #fff;
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-width: 27rem;
|
||||
position: fixed;
|
||||
right: auto;
|
||||
top: 0;
|
||||
width: 85%;
|
||||
z-index: 10;
|
||||
}
|
||||
.NavigationDrawer.is-active {
|
||||
display: initial;
|
||||
}
|
||||
.NavigationDrawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.NavigationDrawer-logo {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
margin: 1rem 1.5rem;
|
||||
width: 5.125rem;
|
||||
}
|
||||
.NavigationDrawer-close {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
margin: 1rem 1rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.NavigationDrawer-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.NavigationDrawer-listItem {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.NavigationDrawer-listItem a:link,
|
||||
.NavigationDrawer-listItem a:visited {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.NavigationDrawer-listItem--active {
|
||||
background-color: #d5eef5;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.NavigationDrawer-scrim {
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
.NavigationDrawer.is-active + .NavigationDrawer-scrim {
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
display: block;
|
||||
}
|
||||
.Article {
|
||||
color: #202224;
|
||||
margin: 0 auto 30px;
|
||||
|
|
@ -245,7 +320,7 @@ a:hover {
|
|||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.Hero-actions a.Primary {
|
||||
background-color: #fddd00;
|
||||
|
|
@ -426,7 +501,7 @@ a:hover {
|
|||
display: flex;
|
||||
height: 1.5rem;
|
||||
justify-content: center;
|
||||
margin-top: .125rem;
|
||||
margin-top: 0.125rem;
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -626,7 +701,7 @@ a.Footer-link {
|
|||
color: #fff;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.Learn-title,
|
||||
|
|
@ -976,7 +1051,7 @@ a.Footer-link {
|
|||
color: #007d9c;
|
||||
}
|
||||
.Solutions-useCaseTitle {
|
||||
margin: .75rem 0 0;
|
||||
margin: 0.75rem 0 0;
|
||||
}
|
||||
.Solutions-useCaseHeader {
|
||||
align-items: center;
|
||||
|
|
@ -1236,4 +1311,4 @@ a.Footer-link {
|
|||
.Left {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,16 @@
|
|||
{{$stylesFP := $styles | fingerprint -}}
|
||||
<link rel="stylesheet" href="{{$stylesFP.RelPermalink}}" integrity="{{$stylesFP.Data.Integrity}}" crossorigin="anonymous">
|
||||
{{end -}}
|
||||
<script src="/js/site.js" defer></script>
|
||||
<title>{{$.Site.Title}}</title>
|
||||
</head>
|
||||
<body class="Site{{if .IsHome}} Site--blue{{end}}">
|
||||
<header class="Site-header">
|
||||
<div class="Header{{if .IsHome}} Header--dark{{end}}">
|
||||
<nav class="Header-nav">
|
||||
<a href="#">
|
||||
<img class="Header-navOpen js-headerMenuButton" src="/images/menu-24px{{if .IsHome}}-white{{end}}.svg" alt="Open navigation.">
|
||||
</a>
|
||||
<a href="{{.Site.BaseURL}}">
|
||||
<img class="Header-logo" src="/images/go-logo-{{if .IsHome}}white{{else}}blue{{end}}.svg" alt="Go">
|
||||
</a>
|
||||
|
|
@ -40,6 +44,34 @@
|
|||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<aside class="NavigationDrawer js-header">
|
||||
<nav class="NavigationDrawer-nav">
|
||||
<div class="NavigationDrawer-header">
|
||||
<a href="{{.Site.BaseURL}}">
|
||||
<img class="NavigationDrawer-logo" src="/images/go-logo-blue.svg" alt="Go.">
|
||||
</a>
|
||||
<a href="#">
|
||||
<img class="NavigationDrawer-close js-headerMenuButton" src="/images/close-24px.svg" alt="Close navigation.">
|
||||
</a>
|
||||
</div>
|
||||
<ul class="NavigationDrawer-list">
|
||||
{{- range .Site.Menus.main}}
|
||||
{{- $url := .URL}}
|
||||
{{- if and (not $currentPage.Site.IsServer) (eq .Identifier "learn")}}
|
||||
{{- $url = "https://learn.go.dev"}}
|
||||
{{- end}}
|
||||
{{- if not $currentPage.Site.IsServer}}
|
||||
{{- $url = $url | absURL}}
|
||||
{{- end}}
|
||||
<li class="NavigationDrawer-listItem {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) (eq $currentPage.CurrentSection.Title .Title)}} NavigationDrawer-listItem--active{{end}}">
|
||||
<a href="{{$url}}" title="{{.Title}}">{{.Name}}</a>
|
||||
</li>
|
||||
{{- end}}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="NavigationDrawer-scrim js-scrim" role="presentation">
|
||||
</div>
|
||||
<main class="Site-content">
|
||||
{{- block "main" . -}}{{- end -}}
|
||||
</main>
|
||||
|
|
@ -68,4 +100,4 @@
|
|||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче