Menu hide/show

rubyuy · Feb 5, 2024 · c349e9c · c349e9c
1 parent 4139454
commit c349e9c
Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,13 +1,14 @@
-  <head>
-    <title>Ruby UY</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="view-transition" content="same-origin" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Syncopate:wght@700&display=swap" rel="stylesheet">
+<head>
+  <title>Ruby UY</title>
+  <meta charset='utf-8' />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="view-transition" content="same-origin" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Syncopate:wght@700&display=swap" rel="stylesheet">
 
-    <script async src="https://analytics.umami.is/script.js" data-website-id="209b35e2-b972-4bf5-8a88-09cedbc740f8" data-domains="ruby.uy"></script>
-    <link rel="stylesheet" href="{{ "styles" | css_asset | buster }}">
-  </head>
+  <script async src="https://analytics.umami.is/script.js" data-website-id="209b35e2-b972-4bf5-8a88-09cedbc740f8" data-domains="ruby.uy"></script>
+  <link rel="stylesheet" href="{{ "styles" | css_asset | buster }}">
+  <script src="{{ "topbar" | js_asset | buster }}"></script>
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -10,7 +10,12 @@
       <a href='#contact'>CONTACT</a>
     </div>
     <div class='barMenu'>
-      <a href='#'><img class='barBurger' src='/assets/images/menu.svg'/></a>
+      <a href='#' onclick="toggleBarLinks()"><img class='barBurger' src='/assets/images/menu.svg'/></a>
+      <div class='barLinks'>
+        <a href='#'>HOME</a>
+        <a href='#about'>ABOUT</a>
+        <a href='#contact'>CONTACT</a>
+      </div>
     </div>
   <div>
 </header>
diff --git a/_plugins/filters.rb b/_plugins/filters.rb
@@ -8,6 +8,10 @@ def buster(filename)
   def css_asset(filename)
     "/assets/css/#{filename}.css"
   end
+
+  def js_asset(filename)
+    "/assets/js/#{filename}.js"
+  end
 end
 
 Liquid::Template.register_filter(CustomFilters)
diff --git a/_sass/topbar.scss b/_sass/topbar.scss
@@ -85,4 +85,14 @@
   @media (min-width: 713px) {
     display: none;
   }
+
+  .barLinks {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    width: calc(100% - 8px);
+    flex-direction: column;
+    border: 4px solid #2E2E2E;
+    height: 12rem;
+  }
 }
diff --git a/assets/js/topbar.js b/assets/js/topbar.js
@@ -0,0 +1,8 @@
+function toggleBarLinks() {
+  var x = document.querySelector(".barMenu .barLinks");
+  if (x.style.display === "flex") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "flex";
+  }
+}