Adding new static header (#96)

Problem ======= Matching the header to the design Closes #82 Solution ======== - Static header added - JS to manage header open/closed state - Styles with @claireolmstead --------- Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Oct 31, 2024 · 36a9075 · 36a9075
1 parent 862f66f
commit 36a9075
Show file tree

Hide file tree

Showing 6 changed files with 274 additions and 14 deletions.
diff --git a/book.toml b/book.toml
@@ -16,6 +16,7 @@ git-repository-url = "https://github.com/frequency-chain/docs"
 edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}"
 preferred-dark-theme = "coal"
 additional-css = [
+  "css/header.css",
   "css/extended.css",
   "css/highlight.css",
   "css/highlight-dark.css",

diff --git a/css/header.css b/css/header.css
@@ -0,0 +1,136 @@
+:root {
+  --header-color-primary: #19455e;
+  --header-color-secondary: #55b1ab;
+  --header-background: #fff;
+  --header-menu-background: #18465e;
+  --header-menu-foreground: #fff;
+}
+
+/* Everything is scoped to .frqcy-header */
+
+.frqcy-header {
+  font-family: "Newake", "Arial Black", Arial, sans-serif;
+  text-transform: uppercase;
+  color: var(--header-color-primary);
+  height: 80px;
+  background-color: var(--header-background);
+  box-shadow: 0 4px 4px 0 #00000040;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px 0 40px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 800px) {
+  .frqcy-header {
+    padding: 0 80px;
+  }
+}
+
+.frqcy-header a {
+  text-decoration: none;
+}
+
+.frqcy-header .header-logo {
+  padding-right: 16px;
+  height: auto;
+  width: 236px;
+  color: var(--header-color-secondary);
+}
+
+.frqcy-header .menu-toggle {
+  cursor: pointer;
+  color: #55b1ab;
+}
+
+.frqcy-header .header-nav {
+  display: none;
+  gap: 32px;
+}
+
+.frqcy-header .nav-items-mobile {
+  padding-top: 80px;
+  gap: 32px;
+  font-size: 34px;
+  display: flex;
+  flex-direction: column;
+}
+
+.frqcy-header .header-nav a {
+  color: var(--header-color-primary);
+  cursor: pointer;
+}
+
+/* Hide mobile nav by default */
+.frqcy-header .header-nav-mobile {
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--header-menu-background);
+  padding: 0 12%;
+  height: 0;
+  width: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transition: 0.5s;
+}
+
+.frqcy-header .header-nav-mobile a {
+  color: var(--header-menu-foreground);
+  cursor: pointer;
+}
+
+/* Show mobile nav when isOpen class is added */
+.frqcy-header .header-nav-mobile.isOpen {
+  height: 100%;
+}
+
+/* Media query for larger screens */
+@media (min-width: 800px) {
+  .frqcy-header .header-nav {
+    display: flex;
+  }
+  .frqcy-header .menu-toggle,
+  .frqcy-header .header-nav-mobile {
+    display: none;
+  }
+}
+
+.frqcy-header .menu-toggle.isOpen {
+  color: var(--header-menu-foreground);
+  position: fixed;
+  top: 26px;
+  right: 33px;
+  z-index: 1000;
+}
+
+.frqcy-header .header-nav .underline-on-hover:hover::after,
+.frqcy-header .header-nav .underline-on-hover:focus::after {
+  background-color: var(--header-color-primary);
+}
+
+.frqcy-header .header-nav-mobile .underline-on-hover:hover::after,
+.header-nav-mobile .underline-on-hover:focus::after {
+  background-color: #fff;
+}
+
+.frqcy-header .hamburger-icon {
+  display: block;
+}
+
+.frqcy-header .exit-icon {
+  display: block;
+}
+
+.frqcy-header .hidden {
+  display: none;
+}
diff --git a/theme/css/chrome.css b/theme/css/chrome.css
@@ -62,7 +62,7 @@ a > .hljs {
 .js.sidebar-visible #menu-bar {
   position: -webkit-sticky;
   position: sticky;
-  top: 0 !important;
+  top: 80px !important;
 }
 
 #menu-bar-hover-placeholder {
@@ -743,3 +743,30 @@ ul#searchresults span.teaser em {
 .nav-return:hover {
   color: var(--sidebar-active);
 }
+
+/* Underline on hover animation */
+.underline-on-hover {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  overflow: hidden;
+  padding: 0.25rem 0;
+}
+
+.underline-on-hover::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.1em;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 300ms, transform 300ms;
+  content: '';
+  transform: translate3d(-100%, 0, 0);
+}
+
+.underline-on-hover:hover::after,
+.underline-on-hover:focus::after {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
diff --git a/theme/css/general.css b/theme/css/general.css
@@ -118,7 +118,7 @@ h6:target::before {
 */
 :target {
   /* Safari does not support logical properties */
-  scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
+  scroll-margin-top: calc(var(--menu-bar-height));
 }
 
 .page {
@@ -129,7 +129,40 @@ h6:target::before {
 .page-wrapper {
   box-sizing: border-box;
   background-color: var(--bg);
+  padding-top: 80px;
 }
+
+.page-header {
+  height: 80px;
+  background-color: white;
+  box-shadow: 0 4px 4px 0 #00000040;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 80px;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 900px) {
+  .page-header {
+    padding: 0 30px;
+  }
+}
+
+.header-logo {
+  height: auto;
+  width: 236px;
+}
+
+.sidebar{
+  margin-top: 80px
+}
+
 .no-js .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
   transition:

diff --git a/theme/header.hbs b/theme/header.hbs
@@ -0,0 +1,73 @@
+<header class="frqcy-header">
+    <a class="header-logo" href="https://www.frequency.xyz/" target="_blank">
+        <svg
+                viewBox="0 0 257 36"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                    d="M0 0.737414V35.2633H6.40857V24.5081L19.284 19.2909L19.1144 13.1214L6.46158 18.2334V6.48588H22.7984V0.737414H0ZM31.1629 6.48087H39.7501C42.5383 6.48087 44.8229 7.79895 44.8229 10.6456C44.8229 13.4923 42.5383 14.8605 39.7501 14.8605H31.1629V6.48588V6.48087ZM24.696 0.737414V35.2633H31.1629V26.7784L51.2314 35.2633V28.6227L31.7195 20.6641H39.5805C45.8247 20.6641 51.2314 16.8702 51.2314 10.7007C51.2314 4.5313 45.8247 0.737414 39.5805 0.737414H24.696ZM53.1821 0.737414V35.2633H75.9275V29.4647H59.5907V20.8194H75.9275V15.076H59.5907V6.48588H75.9275V0.737414H53.1821ZM137.193 0.737414V24.3527C137.193 27.886 134.463 30.3067 130.785 30.3067C127.106 30.3067 124.376 27.881 124.376 24.3527V0.737414H117.967V24.2475C117.967 31.2038 123.708 36 130.79 36C137.872 36 143.612 31.2038 143.612 24.2475V0.737414H137.204H137.193ZM145.558 0.737414V35.2633H168.303V29.4647H151.966V20.8194H168.303V15.076H151.966V6.48588H168.303V0.737414H145.558ZM190.603 0.737414V24.037L177.224 0.737414H170.254V35.2633H176.551V12.0188L189.988 35.2633H196.9V0.737414H190.603ZM250.199 0.737414L245.126 13.7028L239.773 0.737414H232.691L248.19 35.2633H254.88L248.413 20.8746L257 0.792543H250.199V0.737414ZM84.0111 17.9778C84.0111 11.232 89.8101 5.69402 97.0031 5.69402C104.196 5.69402 109.995 11.1769 109.995 17.9778C109.995 20.1378 109.439 22.2478 108.267 24.1472L93.828 15.7125V22.5635L103.974 28.3621C101.853 29.575 99.4574 30.2616 96.9501 30.2616C89.8684 30.3167 84.0747 24.9391 84.0164 18.2434V17.9778M96.9448 0.00068895C86.4653 0.0558181 77.9365 8.1197 77.9895 18.0279C78.0478 27.9361 86.5766 36 97.0562 35.9499C101.625 35.9499 106.03 34.3662 109.486 31.5245L115.953 35.2132V28.6227L113.388 27.1493C115.063 24.3577 115.953 21.1953 115.953 17.9778C116.07 8.1197 107.652 0.0558181 97.2258 0.00068895C97.1145 0.00068895 97.0561 0.00068895 96.9448 0.00068895ZM217.923 0.00068895C207.444 0.00068895 198.856 8.01446 198.856 17.9728C198.856 27.9311 207.332 36 217.865 36C223.939 36 229.627 33.3137 233.194 28.6728L228.737 24.458C226.563 28.1466 222.381 30.4119 217.923 30.3067C210.566 30.3067 205.048 24.9842 205.048 18.0229C205.048 11.0616 210.624 5.68901 217.923 5.68901C222.381 5.58376 226.563 7.84907 228.737 11.5928L233.194 7.37797C229.627 2.63686 223.939 -0.0494284 217.923 0.00068895Z"
+                    fill="currentColor"
+            />
+        </svg>
+
+    </a>
+
+    <!-- Desktop Navigation -->
+    <nav class="header-nav">
+            <a href="https://www.frequency.xyz" class="underline-on-hover">About.</a>
+            <a href="https://www.frequency.xyz/docs" class="underline-on-hover">Dev Docs.</a>
+            <a href="https://medium.com/one-frequency" class="underline-on-hover">Newsroom.</a>
+            <a href="mailto:[email protected]" class="underline-on-hover">Contact.</a>
+    </nav>
+
+    <!-- Mobile Menu Toggle Button -->
+    <div class="menu-toggle" aria-expanded="false" aria-controls="mobile-menu" onclick="toggleMobileMenu()">
+        <svg class="hamburger-icon" height="33" width="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2 20H25.625M2 11H25.625M2 2H25.625" stroke="currentColor" stroke-width="3.375" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <svg class="exit-icon hidden" height="25" width="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                    d="M2.525 24L0.125 21.6L9.725 12L0.125 2.4L2.525 0L12.125 9.6L21.725 0L24.125 2.4L14.525 12L24.125 21.6L21.725 24L12.125 14.4L2.525 24Z"
+                    fill="currentColor"
+            />
+        </svg>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <nav class="header-nav-mobile" id="mobile-menu">
+        <div class="nav-items-mobile">
+            <a href="https://www.frequency.xyz/" class="underline-on-hover">About.</a>
+            <a href="https://www.frequency.xyz/docs" class="underline-on-hover">Dev Docs.</a>
+            <a href="https://medium.com/one-frequency" class="underline-on-hover">Newsroom.</a>
+            <a href="mailto:[email protected]" class="underline-on-hover">Contact.</a>
+        </div>
+    </nav>
+</header>
+
+<script>
+    let isOpen = false;
+
+    function toggleMobileMenu() {
+        isOpen = !isOpen;
+        const mobileMenu = document.getElementById('mobile-menu');
+        const menuToggle = document.querySelector('.menu-toggle');
+        const hamburgerIcon = document.querySelector('.hamburger-icon');
+        const exitIcon = document.querySelector('.exit-icon');
+
+        // Toggle isOpen class based on current state
+        if (isOpen) {
+            mobileMenu.classList.add('isOpen');
+            menuToggle.classList.add('isOpen');
+            menuToggle.setAttribute('aria-expanded', 'true');
+            hamburgerIcon.classList.add('hidden');
+            exitIcon.classList.remove('hidden');
+        } else {
+            mobileMenu.classList.remove('isOpen');
+            menuToggle.classList.remove('isOpen');
+            menuToggle.setAttribute('aria-expanded', 'false');
+            hamburgerIcon.classList.remove('hidden');
+            exitIcon.classList.add('hidden');
+        }
+    }
+</script>
diff --git a/theme/index.hbs b/theme/index.hbs
@@ -106,17 +106,6 @@
 
         <nav id="sidebar" class="sidebar" aria-label="Table of contents">
             <div class="sidebar-scrollbox">
-                <a id="logo" href="https://www.frequency.xyz/">
-                    <svg
-                    viewBox="0 0 200 29.605094"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:svg="http://www.w3.org/2000/svg">
-                    <path
-                        d="M 0,0.60622111 V 28.999203 h 4.998688 v -8.836292 l 9.998244,-4.313402 -0.13402,-5.087168 -9.864222,4.200634 V 5.3386031 H 17.718996 V 0.60622111 Z M 24.230082,5.3386031 h 6.700628 c 2.158222,0 3.937358,1.097758 3.937358,3.445082 0,2.3091559 -1.77827,3.4828159 -3.937358,3.4828159 H 24.230082 Z M 19.23313,0.60622111 V 28.999203 h 4.996952 v -6.965634 l 15.63494,7.003366 v -5.48923 L 24.684628,16.998447 h 6.132446 c 4.846018,0 9.047948,-3.104172 9.047948,-8.2147619 0,-5.11059 -4.20193,-8.17746399 -9.047948,-8.17746399 z m 22.146028,0 V 28.999203 h 17.717264 v -4.731948 h -12.72031 v -7.117436 h 12.72031 V 12.417871 H 46.376112 V 5.3386031 h 12.72031 V 0.60622111 Z m 65.341202,0 V 20.027155 c 0,2.915068 -2.12007,4.921484 -4.99739,4.921484 -2.877329,0 -4.996959,-2.006416 -4.996959,-4.921484 V 0.60622111 h -4.99738 V 19.950385 c 0,5.716504 4.46738,9.653866 9.994339,9.653866 5.52696,0 9.99434,-3.937362 9.99434,-9.653866 V 0.60622111 Z m 6.51109,0 V 28.999203 h 17.71681 V 24.267255 H 118.2284 v -7.117436 h 12.71986 V 12.417871 H 118.2284 V 5.3386031 h 12.71986 V 0.60622111 Z m 35.05545,0 V 19.762147 L 137.87746,0.60622111 h -5.41504 V 28.999203 h 4.92148 V 9.8814451 l 10.44844,19.1177579 h 5.3782 V 0.60622111 Z m 46.37524,0 -3.93736,10.67615789 -4.16376,-10.67615789 h -5.5274 L 193.10984,28.999203 h 5.22422 L 193.29938,17.149819 200,0.60622111 Z M 65.342511,14.802929 a 10.088892,10.088892 0 1 1 20.17777,0 10.32961,10.32961 0 0 1 -1.32502,5.07459 l -11.24261,-6.929634 v 5.640602 l 7.91246,4.770982 a 10.29361,10.29361 0 0 1 -5.45151,1.55187 9.979159,9.979159 0 0 1 -10.07023,-10.105806 M 75.412741,7.411091e-4 A 14.802189,14.802189 0 1 0 85.179811,25.970497 l 5.03512,3.028706 v -5.451498 l -2.00642,-1.211394 A 15.110133,15.110133 0 0 0 90.214931,14.802929 14.679877,14.679877 0 0 0 75.412741,7.411091e-4 Z m 94.111959,0 A 14.802189,14.802189 0 1 0 181.41182,23.585439 L 177.929,20.102623 a 9.314692,9.314692 0 0 1 -8.4043,4.807848 c -5.7165,0 -10.03208,-4.391472 -10.03208,-10.105806 0,-5.7143359 4.31558,-10.1457099 10.03208,-10.1457099 a 9.34592,9.34592 0 0 1 8.4043,4.845582 l 3.48282,-3.482818 A 14.456509,14.456509 0 0 0 169.5247,7.411091e-4 Z"
-                        fill="currentcolor" />
-                    </svg>
-                </a>
                 {{#toc}}{{/toc}}
                 <div class="spacer"></div>
                 <ol class="chapter">
@@ -159,10 +148,11 @@
             }
         </script>
 
+        {{> header}}
+
         <div id="page-wrapper" class="page-wrapper">
 
             <div class="page">
-                {{> header}}
                 <div id="menu-bar-hover-placeholder"></div>
                 <div id="menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">