make navbar smaller on mobile, and make it disappear on navigation

hacksu · May 3, 2024 · c27e0b7 · c27e0b7
1 parent 37096e0
commit c27e0b7
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 70 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,11 +5,14 @@
 		<meta property="og:description" v-if="description" :content="description" />
 		<meta property="og:image" v-if="image" :content="image" />
 	</Head>
-	<Navigation />
+	<div id="navigation" :class="{menu: showingNavigationMenu}">
+		<Navigation />
+	</div>
 	<router-view class="view" />
 </template>
 
 <script setup>
+import { showingNavigationMenu } from "./globals.js"
 import { Head } from "@unhead/vue/components";
 import { useRoute } from "vue-router";
 

diff --git a/src/assets/hamburger.svg b/src/assets/hamburger.svg
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO: make this go away when a link is clicked -->
   <Navbar id="nav" v-if="showNavigation">
     <Navbtn v-for="[text, link, options] in buttons"
       :key="text"
@@ -31,8 +32,6 @@ export default {
           ['Meetings', '/meetings'],
           ['Leadership', '/leadership'],
           ['Contact', '/contact'],
-        //   ['Constitution', '/constitution'],
-          //[(loggedIn.value ? 'Admin' : 'Login'), '/login', {style: {marginLeft: "auto"}}]
         ];
         if (loggedIn.value){  
             buttons.push(

diff --git a/src/components/navigation/Navbar.vue b/src/components/navigation/Navbar.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="navbar"
-    v-bind:class="{ 'scrolled': scrolled, 'fixed': !scrollNav, 'animated': !scrollNav && from }"
-    v-bind:style="{ 'padding': padding, 'background-color': color, 'box-shadow': shadow, }"
+    :class="{ 'scrolled': scrolled, 'fixed': !scrollNav, 'animated': !scrollNav && from }"
+    :style="{ 'padding': padding, 'background-color': color, 'box-shadow': shadow, }"
   >
-    <span class="navbar-color" hidden></span>
     <span class="background" v-on:click="hideMenu"></span>
-    <button class="hamburger navbtn" v-on:click="showMenu">Menu</button>
+    <button class="hamburger" v-on:click="showMenu">Menu</button>
     <span class="buttons">
       <button class="navbtn navbtn-back"></button>
       <slot></slot>
@@ -14,11 +13,8 @@
 </template>
 
 <script>
-// TODO: make navbar header thing less tall on mobile
+import { showingNavigationMenu } from "../../globals.js";
 export default {
-  name: 'Navbar',
-  components: {
-  },
   data() {
     return {
       scrolled: false,
@@ -31,14 +27,17 @@ export default {
   },
   computed: {
     padding() {
-      let n = 30 * (1 - this.progress) + 10 * this.progress
+      let scaleFactor = 1;
+      if (window && window.innerHeight && window.innerHeight < 700) {
+        scaleFactor = 0.5;
+      }
+      let n = (30 * scaleFactor) * (1 - this.progress) + (10 * scaleFactor) * this.progress
       return `${n}px 10px ${10 + n}px 10px`;
     },
     color() {
       if (this.$el) {
-        let bgc = getComputedStyle(this.$el.querySelector('.navbar-color')).backgroundColor;
+        let bgc = "rgb(20, 32, 39)";
         let a = `rgba(${bgc.substr(4).split(')')[0]}, ${this.progress})`;
-        //console.log(a);
         return a;
       } else {
         return `rgba(${this.progress}, 0, 0, 0)`;
@@ -56,10 +55,10 @@ export default {
   },
   methods: {
     showMenu() {
-      document.querySelector("#app").classList.add('menu');
+      showingNavigationMenu.value = true;
     },
     hideMenu() {
-      document.querySelector("#app").classList.remove('menu');
+      showingNavigationMenu.value = false;
     },
     computeScrolled() {
       this.offset = document.firstElementChild.scrollTop;
@@ -117,7 +116,6 @@ export default {
   height: 55px;
   @include mobile {
     text-align: left;
-    height: 77px;
   }
   //height: 4vh;
   /*@include mobile {
@@ -132,26 +130,16 @@ export default {
     transition: padding 0.25s;
   }
 
-  &.scrolled, &.fixed, .navbar-color {
-    //background-color: red;
-    //background-color: #142027;
-    //padding: 10px 10px 20px 10px;
-  }
-
   .hamburger {
     @include display-hide('tablet');
     @include display-hide('desktop');
     @include background(url('../../assets/hamburger.svg'), contain);
-    padding: 4px;
     background-color: transparent;
     background-position: left center !important;
-    //width: calc(4vh + 150px);
-    width: 200px;
-    font-size: 20px;
-    height: 30px;
+    width: 175px;
+    font-size: 15px;
     //color: transparent;
     margin-left: 10px;
-    margin-top: 12px;
     margin-right: 20px;
     border-radius: 0px;
     transition: opacity 0.05s;
@@ -205,7 +193,7 @@ export default {
 }
 
 @include mobile {
-  #app.menu {
+  #navigation.menu {
     .buttons {
       opacity: 1;
       pointer-events: all;

diff --git a/src/components/navigation/Navbtn.vue b/src/components/navigation/Navbtn.vue
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import { showingNavigationMenu } from "../../globals.js";
 export default {
   name: 'Navbtn',
   props: ["link", "external"],
@@ -75,43 +76,6 @@ export default {
       } else {
         buttons.classList.remove('dropdown-open')
       }
-      /*let this_ = this;
-      if (debounce) {
-        this.debounce = true;
-        setTimeout(function() {
-          this_.debounce = false;
-        }, 2000)
-      }
-      if (debounce || !this.debounce) {
-        this.open = newOpen;
-        console.log('setting open to', this.open, debounce);
-      }
-      if (this.open) {
-        this.$parent.$el.lastChild.classList.add('dropdown-open')
-      } else {
-        this.$parent.$el.lastChild.classList.remove('dropdown-open')
-      }
-      let calc = function() {
-        this_.width = this_.$el.firstChild.offsetWidth;
-        this_.offset = -((this_.width / 2) + (this_.$el.lastChild.offsetWidth / 2)) + 'px';
-      };
-      calc();
-      window.requestAnimationFrame(calc);*/
-    },
-    routelink: function() {
-      //console.log(this);
-      if (typeof(this.link) == 'string') {
-        if (this.link && !(this.$router.currentRoute.path == this.link)) {
-          if (this.link.indexOf('http') == 0) {
-            window.location.href = this.link;
-          } else {
-            this.$router.push(this.link);
-            document.querySelector("#app").classList.remove('menu')
-          }
-        }
-      } else {
-        this.$el.classList.toggle('open');
-      }
     },
   },
 }

diff --git a/src/globals.js b/src/globals.js
@@ -24,3 +24,5 @@ if (typeof window !== "undefined"){
         }
     });
 }
+
+export const showingNavigationMenu = ref(false);
diff --git a/src/main.js b/src/main.js
@@ -3,9 +3,8 @@ import { ViteSSG } from "vite-ssg";
 import { routes } from "./router";
 import App from "./App.vue";
 
-import { loggedIn, attemptedLogin } from "./globals.js";
+import { loggedIn, attemptedLogin, showingNavigationMenu } from "./globals.js";
 
-// `export const createApp` is required instead of the original `createApp(App).mount('#app')`
 export const createApp = ViteSSG(
   // the root component
   App,
@@ -27,6 +26,9 @@ export const createApp = ViteSSG(
           next();
         }
       });
+      router.afterEach(() => {
+        showingNavigationMenu.value = false;
+      });
     }
   }
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,3 +24,5 @@ if (typeof window !== "undefined"){ @@
             }
         });
     }
+    export const showingNavigationMenu = ref(false);