nav box size/toggle patch

src/static/css/App.css

@@ -149,6 +149,7 @@ a {
   font-size: 1.2rem;
   font-size: 1rem;
   background-color: rgb(156, 49, 45, .4);
+  cursor: pointer;
 }
 
 .navElement:hover {

src/static/js/checkbox.js

@@ -1,4 +1,4 @@
-function toggle(dir) {
+function toggleCheckbox(dir) {
   let toggles = document.querySelectorAll(
     ".checkbox-wrapper input[type=checkbox]"
   );

src/static/js/responsive.js

@@ -4,13 +4,6 @@ window.onload = function () {
 function onLoaded() {
   document.body.scrollTop = 0; // For Safari
   document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-  let navs = document.querySelectorAll(".navElement");
-  navs.forEach(function (element) {
-    element.onclick = function () {
-      window.scrollTo(0, 0);
-      toggleMenu();
-    };
-  });
 
   window.onresize = function () {
     resizer();
@@ -88,11 +81,9 @@ function toggleMenu() {
   }
 }
 
-const loc = "https://asimonson.com"
-// const loc = 'http://127.0.0.1:5000'
-
-async function goto(location, push=true) {
-  let a = await fetch(loc + "/api/goto/" + location, {
+async function goto(location, {push=true, toggle=true}={}) {
+  console.log(toggle)
+  let a = await fetch("/api/goto/" + location, {
     credentials: "include",
     method: "GET",
     mode: "cors",
@@ -106,6 +97,10 @@ async function goto(location, push=true) {
     eval(x.innerHTML);
   });
   document.querySelector("title").textContent = metadata['title'];
+  window.scrollTo(0, 0);
+  if(toggle){
+    toggleMenu();
+  }
   if(push){
     history.pushState(null, null, metadata['canonical']);
   }
@@ -113,5 +108,5 @@ async function goto(location, push=true) {
 
 function backButton() {
   const location = window.location.pathname;
-  goto(location.substring(1), push=false); // remove slash, goto already does that
-}
+  goto(location.substring(1), {push:false}); // remove slash, goto already does that
+}

src/templates/about.html

@@ -90,7 +90,7 @@
           <input
             type="checkbox"
             id="pinned"
-            onClick='toggle("up")'
+            onClick='toggleCheckbox("up")'
             checked
           />
           <div class="slider round"></div>
@@ -99,20 +99,20 @@
       </div>
       <div class="flex start">
         <label class="switch" htmlFor="education">
-          <input type="checkbox" id="education" onClick="toggle('up')" />
+          <input type="checkbox" id="education" onClick="toggleCheckbox('up')" />
           <div class="slider round"></div>
           <strong>Education</strong>
         </label>
       </div>
       <div class="flex start">
-        <label class="switch" htmlFor="experience" onClick="toggle('up')">
+        <label class="switch" htmlFor="experience" onClick="toggleCheckbox('up')">
           <input type="checkbox" id="experience" />
           <div class="slider round"></div>
           <strong>Work Experience</strong>
         </label>
       </div>
       <div class="flex start">
-        <label class="switch" htmlFor="technical" onClick="toggle('up')">
+        <label class="switch" htmlFor="technical" onClick="toggleCheckbox('up')">
           <input type="checkbox" id="technical" />
           <div class="slider round"></div>
           <strong>Technical</strong>
@@ -125,7 +125,7 @@
       {{ timeitem(i, var["timeline"][i]["classes"], var["timeline"][i]["date"], var["timeline"][i]["content"])}}
       {% endfor %}
     </div>
-    <script>toggle('up')</script>
+    <script>toggleCheckbox('up')</script>
   </div>
 </div>
 {% endblock %}

src/templates/header.html

@@ -65,8 +65,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="App">
       <div class="header">
-
-          <div id="name-container" onclick="goto('home')">
+          <div id="name-container" onclick="goto('home', {toggle:false})">
             <div class="glitch">
               {% for i in range(9) %}
               <div class="line name">
@@ -84,18 +83,18 @@
         />
         <div class="navControl">
           <div class="navBar">
-            <div class="navElement">
-              <p onclick="goto('home')">Home</p>
+            <div onClick="goto('home')" class="navElement">
+              <p>Home</p>
             </div>
-            <div class="navElement">
-              <a href="Resume.pdf" target="_blank"> Resume </a>
-            </div>
-            <div class="navElement">
-              <p onclick="goto('projects')">Projects</p>
+            <a href="Resume.pdf" target="_blank" class="navElement">
+              <span>Resume</span>
+            </a>
+            <div onclick="goto('projects')" class="navElement">
+              <p>Projects</p>
             </div>
             <!-- <a href="/activities">Activities</a> -->
-            <div class="navElement">
-              <p onclick="goto('about')">About Me</p>
+            <div onclick="goto('about')" class="navElement">
+              <p>About Me</p>
             </div>
           </div>
         </div>

src/templates/projects.html

@@ -15,20 +15,20 @@
     <div class="checkbox-wrapper">
       <div class="flex start">
       <label class="switch" htmlFor="pinned">
-        <input type="checkbox" id="pinned" onClick="toggle('')" checked/>
+        <input type="checkbox" id="pinned" onClick="toggleCheckbox('')" checked/>
         <div class="slider round"></div>
         <strong>Pinned</strong>
       </label>
       </div>
       <div class="flex start">
       <label class="switch" htmlFor="programming">
-        <input type="checkbox" id="programming" onClick="toggle('')" />
+        <input type="checkbox" id="programming" onClick="toggleCheckbox('')" />
         <div class="slider round"></div>
         <strong>Programming</strong>
       </label>
       </div>
       <div class="flex start">
-      <label class="switch" htmlFor="geospacial" onClick="toggle('')">
+      <label class="switch" htmlFor="geospacial" onClick="toggleCheckbox('')">
         <input type="checkbox" id="geospacial" />
         <div class="slider round"></div>
         <strong>Geospacial</strong>
@@ -42,5 +42,5 @@
         {% endfor %}
     </div>
   </div>
-  <script>toggle('')</script>
+  <script>toggleCheckbox('')</script>
 {% endblock %}