keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

more mobile support

Browse source
This commit is contained in:
Keyemail 2024-01-15 05:02:51 -08:00
parent 95c7cdee2d
commit 283d649bea
1 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/NavBar.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<h1>Keyemail</h1> <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="/">Home</router-link></li>
<li><router-link to="/gallery">Gallery</router-link></li> <li><router-link to="/gallery">Gallery</router-link></li>
<li><router-link to="/socials">Socials</router-link></li> <li><router-link to="/socials">Socials</router-link></li>
</ul> </ul>
<div class="mobileNavButton"> <div class="mobileNavButton" v-else>
<i class="fa-solid fa-x" @click="mobileUI()" v-if="turnOnMobileUI"></i> <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
<i class="fas fa-bars" @click="mobileUI()" v-else></i> <i class="fas fa-bars" @click="mobileUI();" v-else></i>
</div> </div>
</div> </div>
<div class="mobileNav" v-if="turnOnMobileUI"> <div class="mobileNav" v-if="turnOnMobileUI">
@ -26,9 +26,14 @@
export default { export default {
data(){ data(){
return { return {
turnOnMobileUI: false turnOnMobileUI: false,
smallScreen: false
} }
}, },
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
methods: { methods: {
mobileUI() { mobileUI() {
if(this.turnOnMobileUI == false) { if(this.turnOnMobileUI == false) {
@ -40,6 +45,18 @@ export default {
this.turnOnMobileUI = false; this.turnOnMobileUI = false;
document.body.style.overflow = 'auto'; 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 { .mobileNavButton {
display: none;
z-index: 10; z-index: 10;
} }
@ -144,13 +160,4 @@ export default {
.mobileNavContents a:hover { .mobileNavContents a:hover {
color: #74d2f1; color: #74d2f1;
} }
@media only screen and (max-width: 415px) {
.navContents {
display: none;
}
.mobileNavButton {
display: block;
}
}
</style> </style>