From 0505add068bfb181a1a9159966d906c610946480 Mon Sep 17 00:00:00 2001
From: Martyn Welch <martyn.welch@collabora.com>
Date: Mon, 28 Sep 2020 20:11:38 +0100
Subject: [PATCH] Align menu to section heading
The site menu is quite long. When we are in a section, scroll the menu to
the relevant section.
This is a bit hacky due to the navbar at the top and the way the theme is
constructed. In order to avoid issues with the scrolling distance being
incorrectly calculated (due to reflow of text as the side bar gets wider)
animate as a drop-down instead of appearing from the side.
Signed-off-by: Martyn Welch <martyn.welch@collabora.com>
---
themes/beautifulhugo/layouts/partials/footer_custom.html | 6 ++++++
themes/beautifulhugo/layouts/partials/nav.html | 4 +++-
themes/beautifulhugo/static/css/main.css | 6 +++---
3 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/themes/beautifulhugo/layouts/partials/footer_custom.html b/themes/beautifulhugo/layouts/partials/footer_custom.html
index 9238f54a3..d822f9289 100644
--- a/themes/beautifulhugo/layouts/partials/footer_custom.html
+++ b/themes/beautifulhugo/layouts/partials/footer_custom.html
@@ -13,3 +13,9 @@ function toggleSidebar(item) {
}
}
</script>
+
+<script>
+if ($('#sidebar-focus').length != 0) {
+ $('#site-sidebar').scrollTop($('#sidebar-focus').position().top - 100);
+}
+</script>
diff --git a/themes/beautifulhugo/layouts/partials/nav.html b/themes/beautifulhugo/layouts/partials/nav.html
index 334da1bb3..0c23f8022 100644
--- a/themes/beautifulhugo/layouts/partials/nav.html
+++ b/themes/beautifulhugo/layouts/partials/nav.html
@@ -77,9 +77,11 @@
<nav class="sidebar sidebar-hidden" id="site-sidebar">
<ul>
+ {{ $section := .CurrentSection }}
{{ range sort .Site.Sections.ByTitle }}
<li class="sidebar-section">
- <a href="{{ .URL | relLangURL }}">{{ .Title }}</a>
+ <a href="{{ .URL | relLangURL }}"
+ {{ if .InSection $section }}id="sidebar-focus"{{end}}>{{ .Title }}</a>
<div class="sidebar-pages">
<ul>
{{ range .Pages }}
diff --git a/themes/beautifulhugo/static/css/main.css b/themes/beautifulhugo/static/css/main.css
index 93b8e674b..0a6fd2ee3 100644
--- a/themes/beautifulhugo/static/css/main.css
+++ b/themes/beautifulhugo/static/css/main.css
@@ -835,16 +835,16 @@ div.notices.tip p:first-child:after {
left: 0;
background-color: #414141;
overflow-x: hidden;
- transition: 0.5s;
+ transition: height 0.5s;
padding-top: 100px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media not screen, screen and (max-width: 1450px) {
.sidebar-hidden {
- width: 0px;
+ height: 0;
visibility: hidden;
- transition: width 0.5s, visibility 0s linear 0.5s;
+ transition: height 0.5s, visibility 0s linear 0.5s;
}
}
--
GitLab