fix nav layout

RyanBrewer317 · Oct 21, 2024 · 44c814b · 44c814b
1 parent 5e065d1
commit 44c814b
Show file tree

Hide file tree

Showing 16 changed files with 59 additions and 112 deletions.
diff --git a/arctic_build/__pages/demos/index.html b/arctic_build/__pages/demos/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<div><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
+<div><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
 </span></h1><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.

diff --git a/arctic_build/__pages/index.html b/arctic_build/__pages/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head></head><body><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/arctic_build/index.html b/arctic_build/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/arctic_build/public/style.css b/arctic_build/public/style.css
@@ -22,8 +22,10 @@ h3 {
 nav {
   padding: 10pt;
   color: var(--color);
-  position: sticky;
-  top: 0pt;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   background-color: var(--background);
   z-index: 1;
 }
@@ -38,10 +40,6 @@ nav.dropdown a {
 }
 
 nav.dropdown {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   background-color: var(--background2);
   border-bottom: 1pt solid var(--highlight);
 }

diff --git a/dist/__pages/demos/index.html b/dist/__pages/demos/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<div><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
+<div><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
 </span></h1><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.

diff --git a/dist/__pages/index.html b/dist/__pages/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head></head><body><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/dist/index.html b/dist/index.html
@@ -1,14 +1,5 @@
 <!doctype html>
-<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="
-const el = document.getElementById(&#39;nav&#39;);
-const height = el.clientHeight;
-el.classList.toggle(&#39;dropdown&#39;);
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains(&#39;dropdown&#39;))
-  document.body.style.paddingTop = &#39;&#39; + height + &#39;px&#39;;
-else
-  document.body.style.paddingTop = &#39;0px&#39;;
-          ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav" onload="document.body.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache_meta b/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache_meta
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache
diff --git a/dist/priv/arctic_framework_org/navbar.mjs b/dist/priv/arctic_framework_org/navbar.mjs
@@ -7,14 +7,20 @@ import { toList } from "./gleam.mjs";
 
 export function navbar() {
   return $html.nav(
-    toList([$attribute.id("nav")]),
+    toList([
+      $attribute.id("nav"),
+      attribute(
+        "onload",
+        "document.body.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
+      ),
+    ]),
     toList([
       $html.div(
         toList([
           $attribute.id("nav-dropdown"),
           attribute(
             "onclick",
-            "\nconst el = document.getElementById('nav');\nconst height = el.clientHeight;\nel.classList.toggle('dropdown');\n// because absolute positioning removes the nav from the dom\nif (el.classList.contains('dropdown'))\n  document.body.style.paddingTop = '' + height + 'px';\nelse\n  document.body.style.paddingTop = '0px';\n          ",
+            "document.getElementById('nav').classList.toggle('dropdown');",
           ),
         ]),
         toList([text("☰")]),

diff --git a/dist/style.css b/dist/style.css
@@ -22,8 +22,10 @@ h3 {
 nav {
   padding: 10pt;
   color: var(--color);
-  position: sticky;
-  top: 0pt;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   background-color: var(--background);
   z-index: 1;
 }
@@ -38,10 +40,6 @@ nav.dropdown a {
 }
 
 nav.dropdown {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   background-color: var(--background2);
   border-bottom: 1pt solid var(--highlight);
 }

diff --git a/public/style.css b/public/style.css
@@ -22,8 +22,10 @@ h3 {
 nav {
   padding: 10pt;
   color: var(--color);
-  position: sticky;
-  top: 0pt;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   background-color: var(--background);
   z-index: 1;
 }
@@ -38,10 +40,6 @@ nav.dropdown a {
 }
 
 nav.dropdown {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   background-color: var(--background2);
   border-bottom: 1pt solid var(--highlight);
 }

diff --git a/src/navbar.gleam b/src/navbar.gleam
@@ -3,36 +3,37 @@ import lustre/element.{type Element, text}
 import lustre/element/html
 
 pub fn navbar() -> Element(a) {
-  html.nav([attribute.id("nav")], [
-    html.div(
-      [
-        attribute.id("nav-dropdown"),
-        attribute(
-          "onclick",
-          "
-const el = document.getElementById('nav');
-const height = el.clientHeight;
-el.classList.toggle('dropdown');
-// because absolute positioning removes the nav from the dom
-if (el.classList.contains('dropdown'))
-  document.body.style.paddingTop = '' + height + 'px';
-else
-  document.body.style.paddingTop = '0px';
-          ",
-        ),
-      ],
-      [text("☰")],
-    ),
-    html.a([attribute.href("/"), attribute.id("nav-home")], [text("Arctic")]),
-    html.a([attribute.href("/guides/quickstart"), attribute.id("nav-guides")], [
-      text("Guides"),
-    ]),
-    html.a([attribute.href("/demos"), attribute.id("nav-demos")], [
-      text("Demos"),
-    ]),
-    html.a(
-      [attribute.href("https://hexdocs.pm/arctic/"), attribute.id("nav-docs")],
-      [text("Docs")],
-    ),
-  ])
+  html.nav(
+    [
+      attribute.id("nav"),
+      attribute(
+        "onload",
+        "document.body.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
+      ),
+    ],
+    [
+      html.div(
+        [
+          attribute.id("nav-dropdown"),
+          attribute(
+            "onclick",
+            "document.getElementById('nav').classList.toggle('dropdown');",
+          ),
+        ],
+        [text("☰")],
+      ),
+      html.a([attribute.href("/"), attribute.id("nav-home")], [text("Arctic")]),
+      html.a(
+        [attribute.href("/guides/quickstart"), attribute.id("nav-guides")],
+        [text("Guides")],
+      ),
+      html.a([attribute.href("/demos"), attribute.id("nav-demos")], [
+        text("Demos"),
+      ]),
+      html.a(
+        [attribute.href("https://hexdocs.pm/arctic/"), attribute.id("nav-docs")],
+        [text("Docs")],
+      ),
+    ],
+  )
 }