tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

📱 Navbar show/ hide functionality on mobile

This commit is contained in:
Alicia Sykes 2021-10-11 21:36:23 +01:00
parent 5fe79711bd
commit 987f904430
2 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/interface-icons/burger-menu.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

97
src/components/PageStrcture/Nav.vue
View File

@ -1,54 +1,93 @@
<template> <template>
<nav id="nav"> <div class="nav-outer">
<IconBurger
:class="`burger ${!navVisible ? 'visible' : ''}`"
@click="navVisible = !navVisible"
/>
<nav id="nav" v-if="navVisible">
<router-link <router-link
v-for="(link, index) in links" v-for="(link, index) in links"
:key="index" :key="index"
:to="link.path" :to="link.path"
:href="link.path" :href="link.path"
:target="isUrl(link.path) ? '_blank' : ''" :target="isUrl(link.path) ? '_blank' : ''"
rel="noopener noreferrer" rel="noopener noreferrer"
class="nav-item" class="nav-item"
>{{link.title}}</router-link> >{{link.title}}</router-link>
</nav> </nav>
</div>
</template> </template>
<script> <script>
import IconBurger from '@/assets/interface-icons/burger-menu.svg';
export default { export default {
name: 'Nav', name: 'Nav',
components: {
IconBurger,
},
props: { props: {
links: Array, links: Array,
}, },
data: () => ({
navVisible: true,
isMobile: false,
}),
created() {
this.navVisible = !this.detectMobile();
this.isMobile = this.detectMobile();
},
methods: { methods: {
detectMobile() {
const screenWidth = document.body.clientWidth;
return screenWidth && screenWidth < 600;
},
isUrl: (str) => new RegExp(/(http|https):\/\/(\S+)(:[0-9]+)?/).test(str), isUrl: (str) => new RegExp(/(http|https):\/\/(\S+)(:[0-9]+)?/).test(str),
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';
nav { .nav-outer {
nav {
display: flex; display: flex;
align-items: center; align-items: center;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
margin: 0.5rem; margin: 0.5rem;
min-width: 5rem; min-width: 5rem;
text-align: center; text-align: center;
outline: none; outline: none;
border: none; border: none;
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
-webkit-box-shadow: 1px 1px 2px #232323; -webkit-box-shadow: 1px 1px 2px #232323;
box-shadow: 1px 1px 2px #232323; box-shadow: 1px 1px 2px #232323;
color: var(--nav-link-text-color); color: var(--nav-link-text-color);
background: var(--nav-link-background-color); background: var(--nav-link-background-color);
border: 1px solid var(--nav-link-border-color); border: 1px solid var(--nav-link-border-color);
text-decoration: none; text-decoration: none;
&.router-link-active, &:hover { &.router-link-active, &:hover {
color: var(--nav-link-text-color-hover); color: var(--nav-link-text-color-hover);
background: var(--nav-link-background-color-hover); background: var(--nav-link-background-color-hover);
border: 1px solid var(--nav-link-border-color-hover); border: 1px solid var(--nav-link-border-color-hover);
} }
} }
}
/* Mobile and Burger-Menu Styles */
@extend .svg-button;
@include phone {
width: 100%;
nav { flex-wrap: wrap; }
}
.burger {
display: none;
&.visible { display: block; }
@include phone { display: block; }
}
} }
</style> </style>