🎨 Highlight current doc in policy/bylaw sidebar

commonhaus · Nov 7, 2024 · 874bfa7 · 874bfa7
1 parent 88cbb10
commit 874bfa7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/site/_includes/layouts/bylaws.vto b/site/_includes/layouts/bylaws.vto
@@ -12,7 +12,7 @@ layout: layouts/base.vto
     <ul class="top-level ordered">
     {{- for x of page.data.bylaws.nav }}
         <li data-ord="{{ x.ord }}">
-            <a href="{{ x.href }}">{{ x.title }}</a>
+            <a href="{{ x.href }}"{{- if page.data.url == x.href }} class="highlight"{{- /if }}>{{ x.title }}</a>
             {{- if page.data.url == x.href && toc.length }}
             <div class="pagenav">
             <ol>

diff --git a/site/_includes/layouts/policies.vto b/site/_includes/layouts/policies.vto
@@ -12,7 +12,7 @@ layout: layouts/base.vto
     <ul class="top-level">
     {{- for x of search.pages("policies", "url=asc") }}
       <li>
-        <a href="{{ x.url }}">{{ x.title }}</a>
+        <a href="{{ x.url }}"{{- if page.data.url == x.url }} class="highlight"{{- /if }}>{{ x.title }}</a>
         {{- if page.data.url == x.url && toc.length }}
         <div class="pagenav">
           <ol>

diff --git a/site/_includes/scss/_colors.scss b/site/_includes/scss/_colors.scss
@@ -112,6 +112,8 @@ body {
 
   --callout-content-color: 255, 255, 255; // White
 
+  --highlight-bg: rgba(var(--light-blue-rgb), 0.3);
+
   background-color: var(--bg-primary);
 }
 

diff --git a/site/_includes/scss/bylaws.scss b/site/_includes/scss/bylaws.scss
@@ -69,6 +69,24 @@ aside.policy-contents {
   @include margin-align-y();
   @include content-align-y();
 
+  a.highlight {
+    width: 100%;
+    display: inline-block;
+  }
+
+  a.highlight::before {
+    /* Highlight color */
+    background-color: var(--highlight-bg);
+
+    content: "";
+    position: absolute;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    top: -2px;
+    left: 0;
+    z-index: -1;
+  }
+
   ul.top-level {
     padding-left: var(--hang-pad-left);
 
@@ -125,6 +143,13 @@ aside.bylaw-contents {
   --nest-hang-text-indent: -0.5em;
   --nest-indent: .5em;
 
+  a.highlight {
+    margin-left: 1em;
+  }
+  a.highlight::before {
+    margin-left: -1em;
+  }
+
   ul.top-level.ordered > li:before {
     content: attr(data-ord) ". ";
     position: absolute;
@@ -151,6 +176,10 @@ aside.policy-contents {
   display: flex;
   flex-direction: column-reverse;
 
+  a.highlight::before {
+    margin-left: var(--hang-text-indent);
+  }
+
   div.pagenav {
     ol > li:before {
       content: counters(item, ".") ". ";

diff --git a/site/_includes/scss/text.scss b/site/_includes/scss/text.scss
@@ -20,6 +20,10 @@ a.header-anchor {
   color: var(--text-normal);
   text-decoration: none;
 }
+a.highlight {
+  text-decoration: none;
+  position: relative;
+}
 
 // SVG icons