nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed navigation for mobile version

Browse Source
This commit is contained in:
Čarodej
2022-01-26 18:28:19 +01:00
parent 438e930e06
commit 0b3fc946bd
12 changed files with 203 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/components/Admin/CardNavigation.vue
View File

@@ -1,15 +1,19 @@
<template>
<div class="whitespace-nowrap overflow-x-auto">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': routeName === page.route, 'dark:text-gray-400 text-gray-600': routeName !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
<div id="card-navigation" style="height: 62px" class="mb-7">
<div :class="{'fixed top-0 left-0 right-0 px-6 rounded-none backdrop-filter backdrop-blur-lg dark:bg-dark-foreground bg-white bg-opacity-50 z-10': fixedNav}">
<div class="whitespace-nowrap overflow-x-auto">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': routeName === page.route, 'dark:text-gray-100 text-gray-600': routeName !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
</div>
</div>
</div>
</template>
@@ -24,5 +28,18 @@ export default {
return this.$route.name
}
},
data() {
return {
fixedNav: false,
}
},
created() {
// Handle fixed mobile navigation
window.addEventListener("scroll", () => {
let card = document.getElementById('card-navigation')
this.fixedNav = card.getBoundingClientRect().top < 0;
});
}
}
</script>