[docs] Add navigation dropdown for docs
MODIFY
website/docs/src/_includes/layout.liquid
website/docs/src/_includes/layout.liquid
@@ -54,16 +54,24 @@ 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 %}
<span class="logo-text sr-only">Rome</span>
+
+ <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>
{% include external-links.liquid %}
@@ -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({

MODIFY
website/docs/src/_includes/scripts/index.js
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();
+ });
+}

MODIFY
website/docs/src/styles/_docs.scss
website/docs/src/styles/_docs.scss
@@ -15,13 +15,92 @@ footer {
margin-top: 0;
}
-.logo svg {
+.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);
}
}
+}
.docs-main {
display: flex;
@@ -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;

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