From 9d77ada81e9d2c921d5470ebe1a06229f9f8e09b Mon Sep 17 00:00:00 2001 From: clement franckelemon <clement.franckelemon.etu@univ-lille.fr> Date: Sat, 1 Mar 2025 16:56:47 +0100 Subject: [PATCH] :lipstick: add mobile nav --- src/components/HeaderView.vue | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/components/HeaderView.vue b/src/components/HeaderView.vue index 1cb52ab..688e67f 100644 --- a/src/components/HeaderView.vue +++ b/src/components/HeaderView.vue @@ -1,9 +1,29 @@ <template> <q-header reveal elevated> <q-toolbar class="bg-secondary" > + <q-drawer + v-model="openNav" + show-if-above + :breakpoint="1024" + side="left" + bordered + class="bg-secondary" + > + <div class="full-height row justify-evenly q-ml-sm col-11"> + <HeaderButton class="col-6 row justify-center" icon="home" to="/#accueil" label="Accueil" /> + <HeaderButton class="col-6 row justify-center" icon="person" to="/#presentation" label="Présentation" /> + <HeaderButton class="col-6 row justify-center" icon="school" to="/#formations" label="Formations" /> + <HeaderButton class="col-6 row justify-center" icon="timeline" to="/#experiences" label="Expériences" /> + <HeaderButton class="col-6 row justify-center" icon="workspaces" to="/#competences" label="Compétences" /> + <HeaderButton class="col-6 row justify-center" icon="construction" to="/#projets" label="Projets" /> + <HeaderButton class="col-6 row justify-center" icon="mail" to="/#contacts" label="Contacts" /> + </div> + <q-linear-progress size="6px" color="accent" indeterminate class="bg-dark vertical-progress absolute" style="top:50%; left: -25px ; width: 100vh" /> + </q-drawer> + <q-btn flat round dense icon="menu" class="q-mr-sm" @click="openNav = !openNav" v-if="$q.screen.sm || $q.screen.lt.sm" /> <div/> <q-space /> - <div class="full-height row"> + <div class="full-height row" v-if="$q.screen.gt.sm"> <HeaderButton icon="home" to="/#accueil" label="Accueil" /> <HeaderButton icon="person" to="/#presentation" label="Présentation" /> <HeaderButton icon="school" to="/#formations" label="Formations" /> @@ -14,6 +34,9 @@ </div> <q-space /> <div/> + <div class="q-mr-sm text-bold text-uppercase" v-if="$q.screen.sm || $q.screen.lt.sm" > + PORTFOLIO 2025 édition + </div> </q-toolbar> <q-linear-progress size="6px" color="accent" class="bg-dark" :value="pageAdvanced" /> </q-header> @@ -24,6 +47,7 @@ import HeaderButton from 'components/HeaderButton.vue' import { onMounted, ref } from 'vue' const pageAdvanced = ref(0) +const openNav = ref(false) onMounted( () =>{ window.addEventListener('scroll', updatePageAdvanced) @@ -37,5 +61,9 @@ const updatePageAdvanced = () => { </script> <style scoped> - +.vertical-progress { + transform: rotate( + 90deg + ) +} </style> -- GitLab