[docs] Add navigation dropdown for docs (#3578)

rome · Nov 7, 2022 · 92fecf4 · 92fecf4
1 parent 440b925
commit 92fecf4
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 13 deletions.
diff --git a/website/docs/src/_includes/layout.liquid b/website/docs/src/_includes/layout.liquid
@@ -54,15 +54,23 @@ social-image: social-logo.png
 		{% assign sidebar-enabled = toccontent != "" %}
 
 		<div class="docs-header">
-			<a href="https://rome.tools/" class="back foreground-svg">
-				{% include svg/chevron-left.svg %}
-			</a>
+			<div class="logo-container">
+				<a class="logo" href="/">
+					{% include svg/rome-logo.svg %}
 
-			<a class="logo" href="/">
-				{% include svg/rome-logo.svg %}
+					<span class="logo-text sr-only">Rome</span>
 
-				<span class="logo-text sr-only">Rome</span>
-			</a>
+					<span class="triangle"></span>
+				</a>
+
+				<ul>
+					<li><a href="https://rome.tools/">Home</a></li>
+					<li><a href="/">Docs</a></li>
+					<li><a href="https://rome.tools/blog/">Blog</a></li>
+					<li><a href="https://play.rome.tools/">Playground</a></li>
+				</ul>
+			</div>
+			<div class="logo-modal-background"></div>
 
 			<div id="docsearch"></div>
 
@@ -136,8 +144,16 @@ social-image: social-logo.png
 		</footer>
 
 		{% if env.production %}
-			<script src="https://browser.sentry-cdn.com/5.29.0/bundle.tracing.min.js" crossorigin="anonymous"></script>
+			<script async src="https://www.googletagmanager.com/gtag/js?id=G-P9HDLV59XZ"></script>
+			<script>
+				window.dataLayer = window.dataLayer || [];
+				function gtag(){dataLayer.push(arguments);}
+				gtag('js', new Date());
 
+				gtag('config', 'G-P9HDLV59XZ');
+			</script>
+
+			<script src="https://browser.sentry-cdn.com/5.29.0/bundle.tracing.min.js" crossorigin="anonymous"></script>
 			<script>
 				if (typeof Sentry !== "undefined") {
 					Sentry.init({

diff --git a/website/docs/src/_includes/scripts/index.js b/website/docs/src/_includes/scripts/index.js
@@ -580,3 +580,33 @@ for (const elem of topAnchors) {
 		}
 	});
 }
+
+//# Logo navigation
+const maybeLogoModalBackground = document.querySelector(
+	".logo-modal-background",
+);
+const maybeLogoContainer = document.querySelector(".logo-container");
+const maybeLogo = document.querySelector(".logo");
+if (
+	maybeLogoContainer != null &&
+	maybeLogo != null &&
+	maybeLogoModalBackground != null
+) {
+	const logoContainer = maybeLogoContainer;
+	const logo = maybeLogo;
+	const logoModalBackground = maybeLogoModalBackground;
+
+	function toggle() {
+		logoContainer.classList.toggle("active");
+		logoModalBackground.classList.toggle("active");
+	}
+
+	logoModalBackground.addEventListener("click", () => {
+		toggle();
+	});
+
+	logo.addEventListener("click", (e) => {
+		e.preventDefault();
+		toggle();
+	});
+}
diff --git a/website/docs/src/styles/_docs.scss b/website/docs/src/styles/_docs.scss
@@ -15,11 +15,90 @@ footer {
 	margin-top: 0;
 }
 
-.logo svg {
-	height: 30px;
+.logo-container {
+	border-radius: 6px;
+	position: relative;
+	display: flex;
+	z-index: 99999;
+
+	&:hover, &.active, ul {
+		background-color: #dfdfdf;
+
+		@include dark-mode {
+			background-color: #272729;
+		}
+	}
+
+	&.active {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	&.active ul {
+		display: block;
+	}
+
+	ul {
+		display: none;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50px;
+		border-bottom-left-radius: 6px;
+		border-bottom-right-radius: 6px;
+		padding: 10px 0;
+
+		li {
+			line-height: 30px;
+		}
+
+		a {
+			display: block;
+			text-decoration: none;
+			padding: 0 15px;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.1);
+			}
+		}
+	}
+}
+
+.logo-modal-background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 9999;
+	display: none;
+
+	&.active {
+		display: block;
+	}
+}
+
+.logo {
+	padding: 15px;
+
+	.triangle {
+		width: 0;
+		height: 0;
+		border-left: 6px solid transparent;
+		border-right: 6px solid transparent;
+		border-top: 6px solid var(--font-color);
+		vertical-align: middle;
+		margin-left: 6px;
+		margin-bottom: 8px;
+	}
+
+	svg {
+		height: 30px;
 
-	.cls-1 {
-		fill: var(--logo-font-color);
+		.cls-1 {
+			fill: var(--logo-font-color);
+		}
 	}
 }
 
@@ -40,7 +119,8 @@ footer {
 	z-index: 2;
 	height: 80px;
 	line-height: 80px;
-	padding: 0 16px;
+	padding-right: 16px;
+	padding-left: 8px;
 	display: flex;
 	align-items: center;