From 283d649bea42bc652acf5d563184f5fffd218ba6 Mon Sep 17 00:00:00 2001
From: Keyemail <67425124+Keyemail@users.noreply.github.com>
Date: Mon, 15 Jan 2024 05:02:51 -0800
Subject: [PATCH] more mobile support

---
 src/components/NavBar.vue | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6227a93..235a0b1 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="navbar">
     <h1>Keyemail</h1>
-    <ul class="navContents">
+    <ul class="navContents" v-if="!(isMobile() || smallScreen)">
       <li><router-link to="/">Home</router-link></li>
       <li><router-link to="/gallery">Gallery</router-link></li>
       <li><router-link to="/socials">Socials</router-link></li>
     </ul>
-    <div class="mobileNavButton">
-      <i class="fa-solid fa-x" @click="mobileUI()" v-if="turnOnMobileUI"></i>
-      <i class="fas fa-bars" @click="mobileUI()" v-else></i>
+    <div class="mobileNavButton" v-else>
+      <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
+      <i class="fas fa-bars" @click="mobileUI();" v-else></i>
     </div>
   </div>
   <div class="mobileNav" v-if="turnOnMobileUI">
@@ -26,9 +26,14 @@
 export default {
   data(){
     return {
-      turnOnMobileUI: false
+      turnOnMobileUI: false,
+      smallScreen: false
     }
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  },
   methods: {
     mobileUI() {
       if(this.turnOnMobileUI == false) {
@@ -40,6 +45,18 @@ export default {
         this.turnOnMobileUI = false;
         document.body.style.overflow = 'auto';
       }
+    },
+    isMobile(){
+       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    },
+    handleResize() {
+      if(window.innerWidth < 450) {
+        this.smallScreen = true;
+      } else if(this.turnOnMobileUI === true) {
+        return;
+      } else {
+        this.smallScreen = false;
+      }
     }
   }
 }
@@ -85,7 +102,6 @@ export default {
 }
 
 .mobileNavButton {
-  display: none;
   z-index: 10;
 }
 
@@ -144,13 +160,4 @@ export default {
 .mobileNavContents a:hover {
   color: #74d2f1;
 }
-
-@media only screen and (max-width: 415px) {
-  .navContents {
-    display: none;
-  }
-  .mobileNavButton {
-    display: block;
-  }
-}
 </style>
\ No newline at end of file