[FIX] New title system for navbar

Yaprof · Apr 19, 2023 · d572e4f · d572e4f
1 parent 3523b92
commit d572e4f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 10 deletions.
diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -6,6 +6,9 @@
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 sidebar-toggle">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" class="sidebar-toggle" />
                 </svg>
+                <Transition name="opacity" mode="out-in">
+                    <h1 v-if="!isHiddenTitle" class="text-2xl text-dark dark:text-white font-semibold">{{ pages[this?.$route?.name] }}</h1>
+                </Transition>
             </div>
             <div class="flex text-dark dark:text-white items-center gap-3 p-5">
                 <NuxtLink to="/shop" class="flex bg-primary bg-opacity-10 rounded-full py-2 pl-4 pr-2 items-center gap-1">
@@ -29,25 +32,34 @@ export default {
             config: {api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL},
             errors: [],
             isSidebarOpen: false,
-            isShadowed: false
+            isShadowed: false,
+            pages: {
+                'index': "Asbences",
+                'cantine': "Cantine",
+                'shop': "Boutique",
+                'params': "Paramètres",
+                'user-profile': 'Profile',
+                'admin-users': "Users"
+            },
+            isHiddenTitle: true
         }
     },
     methods: {
         toggleSidebar() {
             this.$emit('toggle-sidebar');
         },
         onScroll() {
-            // Get the current scroll position
             const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-            // Set isShadowed to true if scroll position is greater than 0, otherwise set it to false
             this.isShadowed = scrollPosition > 0;
+            if (scrollPosition > 28) this.isHiddenTitle = false
+            else this.isHiddenTitle = true
         }
     },
     beforeUnmount() {
-        window.removeEventListener('scroll', this.onScroll); // Remove scroll event listener before component unmount
+        window.removeEventListener('scroll', this.onScroll)
     },
     async mounted() {
-        window.addEventListener('scroll', this.onScroll); // Add scroll event listener on component mount
+        window.addEventListener('scroll', this.onScroll)
         this.userInfos = JSON.parse(window.localStorage.getItem("user"))
         let user = await getUser(this.config.api, this.userInfos.id)
         if (!user) return this.errors.push({message: "Impossible de charger l'utilisateur", color: "danger"})

diff --git a/components/SideBar.vue b/components/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-click-outside="closeSidebar" id="sidebar" :class="(isOpen  ? 'translate-x-0 shadow-xl' : '-translate-x-full') + ' h-screen bg-white dark:bg-secondary fixed top-0 left-0 w-72 flex flex-col justify-between items-center z-[99] pb-5 transform-gpu transition-all'">
+    <div v-click-outside="closeSidebar" id="sidebar" :class="(isOpen  ? 'translate-x-0 shadow-xl' : '-translate-x-full') + ' h-screen bg-white dark:bg-secondary fixed top-0 left-0 w-72 flex flex-col justify-between items-center z-[99] pb-5 transform-gpu transition-all duration-200'">
         <Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>
         <div class="w-full h-fit min-h-[9rem] backdrop-blur-xl overflow-hidden bg-dark dark:bg-light relative">
             <img class="absolute top-0 left-0 h-full w-full object-cover blur-lg scale-150 brightness-110 dark:brightness-90" :src="userInfos.profile?.pp" />

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-    <NuxtLayout>
+        <NuxtLayout>
             <Creator :user="user" />
             <div id="container_div"  class="transition-all">
                 <Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>

diff --git a/pages/params.vue b/pages/params.vue
@@ -5,7 +5,24 @@
                 <div class="flex flex-col pb-5">
                     <h1 class="text-dark dark:text-white text-3xl font-bold">Paramètres</h1>
                 </div>
-                <button @click="logout()" class="text-white text-lg py-3 px-6 rounded-2xl w-full bg-red-500 active:bg-red-400">Se déconnecter</button>
+
+                <button @click="logout()" class="group text-dark dark:text-white text-lg py-3.5 px-6 rounded-2xl w-full bg-light dark:bg-secondary dark:active:bg-gray-800 active:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between transition-all">
+                    <div class="w-fit h-fit p-2 bg-">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
+                            <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z" clip-rule="evenodd" />
+                            <path fill-rule="evenodd" d="M6 10a.75.75 0 01.75-.75h9.546l-1.048-.943a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 11-1.004-1.114l1.048-.943H6.75A.75.75 0 016 10z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+
+                    <div class="flex flex-col justify-start">
+                        <p class="text-lg font-bold text-left">Se déconnecter</p>
+                        <p class="text-sm truncate text-left -mt-1">Retournez à la page de connexion</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6 text-neutral-400 dark:text-neutral-300 group-active:translate-x-1 transition-all">
+                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+                    </svg>
+
+                </button>
             </div>
         </NuxtLayout>
     </div>
@@ -24,7 +41,7 @@ export default {
     methods: {
         logout: function () {
             window.localStorage.clear();
-            window.location.reload();
+            window.location.replace('/auth/login')
         }
     }
 }

diff --git a/pages/user/profile.vue b/pages/user/profile.vue
@@ -6,7 +6,22 @@
                 <h1 class="text-dark dark:text-white text-3xl font-bold">Profile</h1>
             </div>
             <div>
-                <button id="avatar-upload-button" class="text-dark text-lg py-3 px-6 rounded-2xl w-full bg-light active:bg-gray-50 cursor-pointer">Changer sa photo</button>
+                <button id="avatar-upload-button" class="group text-dark dark:text-white text-lg py-3.5 px-6 rounded-2xl w-full bg-light dark:bg-secondary dark:active:bg-gray-800 active:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between transition-all">
+                    <div class="w-fit h-fit p-2 bg-">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
+                            <path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 01.672 0 41.059 41.059 0 018.198 5.424.75.75 0 01-.254 1.285 31.372 31.372 0 00-7.86 3.83.75.75 0 01-.84 0 31.508 31.508 0 00-2.08-1.287V9.394c0-.244.116-.463.302-.592a35.504 35.504 0 013.305-2.033.75.75 0 00-.714-1.319 37 37 0 00-3.446 2.12A2.216 2.216 0 006 9.393v.38a31.293 31.293 0 00-4.28-1.746.75.75 0 01-.254-1.285 41.059 41.059 0 018.198-5.424zM6 11.459a29.848 29.848 0 00-2.455-1.158 41.029 41.029 0 00-.39 3.114.75.75 0 00.419.74c.528.256 1.046.53 1.554.82-.21.324-.455.63-.739.914a.75.75 0 101.06 1.06c.37-.369.69-.77.96-1.193a26.61 26.61 0 013.095 2.348.75.75 0 00.992 0 26.547 26.547 0 015.93-3.95.75.75 0 00.42-.739 41.053 41.053 0 00-.39-3.114 29.925 29.925 0 00-5.199 2.801 2.25 2.25 0 01-2.514 0c-.41-.275-.826-.541-1.25-.797a6.985 6.985 0 01-1.084 3.45 26.503 26.503 0 00-1.281-.78A5.487 5.487 0 006 12v-.54z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+
+                    <div class="flex flex-col justify-start">
+                        <p class="text-lg font-bold text-left">Changer sa photo</p>
+                        <p class="text-sm truncate text-left -mt-1">Utilise une photo de profil différente</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6 text-neutral-400 dark:text-neutral-300 group-active:translate-x-1 transition-all">
+                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+                    </svg>
+
+                </button>
                 <input type="file" name="avatar_input" class="hidden" id="avatar_image" accept="image/*" />
             </div>
         </NuxtLayout>
@@ -24,6 +39,7 @@
 <script>
 import { updateUser } from '../../mixins/user.js'
 export default {
+    name: "profile",
     data() {
         return {
             config: { api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL },