chore: legg til lenkje til bloggen

ordbokapi · Feb 24, 2024 · c746db8 · c746db8
1 parent b7df92a
commit c746db8
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -49,6 +49,7 @@
     <meta property="og:locale" content="nn_NO" />
     <meta property="og:locale:alternate" content="nb_NO" />
     <link rel="stylesheet" href="style.css" />
+    <script src="nav-menu.js"></script>
   </head>
 
   <body>
@@ -57,10 +58,18 @@
         <a href="#welcome" class="navbar-logo">
           <img src="images/ordbokapi-logo.png" alt="Ordbok API Logo" />
         </a>
-        <a href="https://vis.ordbokapi.org">Vis-klient</a>
-        <a href="https://github.com/ordbokapi/api">GitHub-prosjekt</a>
-        <a href="https://api.ordbokapi.org/graphql">Apollo Sandbox</a>
-        <a href="/personvern.html">Personvern</a>
+        <div class="navbar-spacer"></div>
+        <div class="hamburger-container">
+          <a class="hamburger" aria-label="Toggle menu">☰</a>
+        </div>
+        <div class="navbar-break"></div>
+        <div class="navbar-links" data-shown="false">
+          <a href="https://vis.ordbokapi.org">Vis-klient</a>
+          <a href="https://github.com/ordbokapi/api">GitHub</a>
+          <a href="https://api.ordbokapi.org/graphql">Apollo Sandbox</a>
+          <a href="https://blog.ordbokapi.org/">Blogg</a>
+          <a href="/personvern.html">Personvern</a>
+        </div>
       </div>
     </nav>
 
@@ -78,6 +87,7 @@ <h1>Ordbok API</h1>
             >
             <a href="https://vis.ordbokapi.org" class="btn">Vis-klient</a>
             <a href="https://github.com/ordbokapi/api" class="btn">GitHub</a>
+            <a href="https://blog.ordbokapi.org/" class="btn">Blogg</a>
           </div>
         </div>
         <div class="image-content">

diff --git a/nav-menu.js b/nav-menu.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const hamburger = document.querySelector('.hamburger');
+  const navLinks = document.querySelector('.navbar-links');
+  const container = document.querySelector('#navbar .container');
+
+  hamburger.addEventListener('click', () => {
+    if (navLinks.dataset.shown === 'false') {
+      navLinks.dataset.shown = 'true';
+
+      container.style.maxHeight = '100vh';
+    } else {
+      navLinks.dataset.shown = 'false';
+
+      container.style.maxHeight = '84px';
+    }
+  });
+});
diff --git a/personvern.html b/personvern.html
@@ -46,6 +46,7 @@
     <meta property="og:locale" content="nn_NO" />
     <meta property="og:locale:alternate" content="nb_NO" />
     <link rel="stylesheet" href="style.css" />
+    <script src="nav-menu.js"></script>
   </head>
 
   <body>
@@ -54,10 +55,18 @@
         <a href="/" class="navbar-logo">
           <img src="images/ordbokapi-logo.png" alt="Ordbok API Logo" />
         </a>
-        <a href="https://vis.ordbokapi.org">Vis-klient</a>
-        <a href="https://github.com/ordbokapi/api">GitHub-prosjekt</a>
-        <a href="https://api.ordbokapi.org/graphql">Apollo Sandbox</a>
-        <a href="/personvern.html">Personvern</a>
+        <div class="navbar-spacer"></div>
+        <div class="hamburger-container">
+          <a class="hamburger" aria-label="Toggle menu">☰</a>
+        </div>
+        <div class="navbar-break"></div>
+        <div class="navbar-links" data-shown="false">
+          <a href="https://vis.ordbokapi.org">Vis-klient</a>
+          <a href="https://github.com/ordbokapi/api">GitHub</a>
+          <a href="https://api.ordbokapi.org/graphql">Apollo Sandbox</a>
+          <a href="https://blog.ordbokapi.org/">Blogg</a>
+          <a href="/personvern.html">Personvern</a>
+        </div>
       </div>
     </nav>
 

diff --git a/style.css b/style.css
@@ -54,8 +54,8 @@ h6 {
   max-width: 1200px;
   margin: auto;
   display: flex;
-  justify-content: space-around;
   align-items: center;
+  transition: max-height 0.3s ease-in-out;
 }
 
 .navbar-logo img {
@@ -293,6 +293,10 @@ footer {
   text-align: center;
 }
 
+.buttons {
+  line-height: 2;
+}
+
 a {
   color: var(--link-color);
   text-decoration: none;
@@ -344,6 +348,94 @@ strong {
   color: var(--main-text-emphasis-color);
 }
 
+.navbar-links {
+  flex: 1;
+  display: flex;
+  gap: 20px;
+}
+
+.hamburger {
+  display: none;
+  cursor: pointer;
+  font-size: 2rem;
+  user-select: none;
+}
+
+.hamburger-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.navbar-spacer {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.navbar-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.hamburger:hover {
+  color: var(--link-hover-color);
+}
+
+.hamburger:active {
+  color: var(--link-color);
+}
+
+.hamburger:active::before {
+  content: '';
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  bottom: -5px;
+  left: -5px;
+}
+
+@media (min-width: 768px) {
+  .hamburger,
+  .navbar-spacer,
+  .navbar-break {
+    display: none;
+  }
+
+  .navbar-links {
+    display: flex;
+    justify-content: flex-start;
+    margin-left: 2em;
+  }
+}
+
+@media (max-width: 767px) {
+  #navbar .container {
+    flex-wrap: wrap;
+    max-height: 84px;
+    overflow-y: hidden;
+  }
+
+  .hamburger {
+    display: flex;
+  }
+
+  .navbar-spacer,
+  .navbar-break {
+    display: block;
+  }
+
+  .navbar-links {
+    flex-direction: column;
+    order: 1;
+    width: 100vw;
+  }
+
+  .navbar-links a:last-child {
+    margin-bottom: 2em;
+  }
+}
+
 @media (max-width: 1199px) {
   #welcome .text-content {
     max-width: 50%;