Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

[docs] Add navigation dropdown for docs #3578

Merged
merged 3 commits into from
Nov 7, 2022
Merged

[docs] Add navigation dropdown for docs #3578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ebd1a5
Add navigation dropdown for docs
Nov 7, 2022
0ec9cf8
Add google analytics
Nov 7, 2022
8ef5a81
Format
Nov 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 24 additions & 8 deletions website/docs/src/_includes/layout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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({
Expand Down
30 changes: 30 additions & 0 deletions website/docs/src/_includes/scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
}
90 changes: 85 additions & 5 deletions website/docs/src/styles/_docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand All @@ -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;

Expand Down