fix burger menu

src/assets/main.css

@@ -29,6 +29,7 @@ h5 {
   --white: #ffffff;
   --black: #181818;
   --red: #f70000;
+  --grey: #e6e6e6;
 }
 
 @media (min-width: 1024px) {

src/components/BetaText.vue

@@ -0,0 +1,41 @@
+<template>
+  <p class="instance-beta">
+    {{ $t('general.header.title') }}
+    <span class="beta">{{ $t('general.beta_version') }}</span>
+  </p>
+</template>
+
+<style scoped>
+.beta {
+  color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 0.5rem;
+  padding: 0.2rem 0.3rem;
+  margin-left: 0.5rem;
+  font-size: 1.2rem;
+  position: absolute;
+  top: -1rem;
+  right: -9.5rem;
+  width: 9rem;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 500px) {
+  .instance-beta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--grey);
+    padding: 1rem;
+    margin-bottom: 0;
+  }
+  .beta {
+    font-size: 1rem;
+    position: relative;
+    top: initial;
+    right: initial;
+    margin-left: 1rem;
+  }
+}
+</style>

src/components/Header.vue

@@ -1,5 +1,8 @@
 <template>
   <header class="header">
+    <div class="wrapper-beta-mobile">
+      <beta-text />
+    </div>
     <nav class="nav">
       <div class="wrapper-logo">
         <Link
@@ -11,66 +14,84 @@
           }"
           path="https://panoramax.fr/"
         />
-        <p>
-          {{ $t('general.header.title') }}
-          <span class="beta">{{ $t('general.beta_version') }}</span>
-        </p>
+        <div class="wrapper-beta-desktop">
+          <beta-text />
+        </div>
       </div>
-      <ul :class="['nav-list', { 'mobile-menu-open': !menuIsClosed }]">
-        <li class="nav-list-item">
-          <Link
-            :text="$t('general.header.contribute_text')"
-            :disabled="true"
-            path="/"
-          />
-        </li>
-        <li class="nav-list-item">
-          <Link
-            :text="$t('general.header.help_text')"
-            :disabled="true"
-            path="/"
-          />
-        </li>
-        <li class="item-with-sub">
-          <Link
-            type="external"
-            icon="bi bi-person-circle"
-            :path="userUrl"
-            :text="userName"
-          />
-          <i v-if="isLogged" class="chevron bi bi-chevron-up"></i>
-          <div v-if="isLogged" class="sub-nav-block">
+      <div class="wrapper-entries">
+        <ul :class="['nav-list', { 'mobile-menu-open': !menuIsClosed }]">
+          <li v-if="isLogged" class="item-logout">
             <Button
               :text="$t('general.header.logout_text')"
               @trigger="logout"
             />
+          </li>
+          <li class="nav-list-item">
+            <Link
+              :text="$t('general.header.contribute_text')"
+              :disabled="true"
+              path="/"
+            />
+          </li>
+          <li class="nav-list-item">
+            <Link
+              :text="$t('general.header.help_text')"
+              :disabled="true"
+              path="/"
+            />
+          </li>
+        </ul>
+        <div class="wrapper-right-entries">
+          <div class="item-with-sub">
+            <Link
+              type="external"
+              icon="bi bi-person-circle"
+              :path="userUrl"
+              :text="userName"
+            />
+            <i v-if="isLogged" class="chevron bi bi-chevron-up"></i>
+            <div v-if="isLogged" class="sub-nav-block">
+              <Button
+                :text="$t('general.header.logout_text')"
+                @trigger="logout"
+              />
+            </div>
           </div>
-        </li>
-      </ul>
-      <button class="menu-burger" @click="toggleMenu">
-        <i v-if="!menuIsClosed" class="bi bi-x-lg"></i>
-        <i v-else class="bi bi-list"></i>
-      </button>
+          <button class="menu-burger" @click="toggleMenu">
+            <i v-if="!menuIsClosed" class="cross bi bi-x-lg"></i>
+            <i v-else class="bi bi-list"></i>
+          </button>
+        </div>
+      </div>
     </nav>
   </header>
 </template>
 
 <script lang="ts" setup>
 import axios from 'axios'
+import { ref, computed } from 'vue'
 import { useCookies } from 'vue3-cookies'
+import { useRoute } from 'vue-router'
 import Link from '@/components/Link.vue'
 import Button from '@/components/Button.vue'
-import { ref, computed } from 'vue'
+import BetaText from '@/components/BetaText.vue'
 
-let menuIsClosed = ref<boolean>(true)
 const { cookies } = useCookies()
+const route = useRoute()
+let menuIsClosed = ref<boolean>(true)
 
 function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
 async function logout(): Promise<void> {
   try {
-    await axios.get(`${import.meta.env.VITE_API_URL}auth/logout`)
+    console.log('GOOO')
+    console.log('route.path', route.path)
+
+    const { data } = await axios.get(
+      `${import.meta.env.VITE_API_URL}auth/logout?next_url=`
+    )
+    console.log(data)
   } catch (err) {
     console.log(err)
   }
@@ -89,9 +110,10 @@ const userName = computed((): string => {
 <style scoped>
 .header {
   height: 8rem;
-  padding: 2rem;
+  border-bottom: 0.1rem solid var(--black);
 }
 .nav {
+  padding: 2rem;
   display: flex;
   justify-content: space-between;
 }
@@ -99,6 +121,15 @@ const userName = computed((): string => {
   display: flex;
   align-items: center;
 }
+.wrapper-entries {
+  display: flex;
+}
+.wrapper-beta-mobile {
+  display: none;
+}
+.wrapper-beta-desktop {
+  display: block;
+}
 .wrapper-logo p {
   margin-bottom: 0;
   margin-left: 1rem;
@@ -114,6 +145,7 @@ const userName = computed((): string => {
   position: relative;
   display: flex;
   align-items: center;
+  margin-left: 1rem;
 }
 .chevron {
   margin-left: 0.5rem;
@@ -134,31 +166,18 @@ const userName = computed((): string => {
 .item-with-sub:hover .chevron {
   transform: rotate(180deg);
 }
-.beta {
-  color: var(--red);
-  border: 1px solid var(--red);
-  border-radius: 0.5rem;
-  padding: 0.2rem 0.3rem;
-  margin-left: 0.5rem;
-  font-size: 1.2rem;
-  position: absolute;
-  top: -1rem;
-  width: 9rem;
-  display: flex;
-  justify-content: center;
-  right: -9.5rem;
-}
 .nav-list-item {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 .menu-burger {
   display: none;
 }
+.item-logout {
+  display: none;
+}
 @media (max-width: 500px) {
   .header {
-    height: 6rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    height: 11rem;
     position: fixed;
     top: 0;
     left: 0;
@@ -166,8 +185,27 @@ const userName = computed((): string => {
     z-index: 2;
     background: var(--white);
   }
+  .wrapper-right-entries {
+    display: flex;
+  }
+  .cross {
+    font-size: 2rem;
+  }
+  .item-with-sub {
+    margin-right: 1.5rem;
+  }
+  .wrapper-beta-desktop {
+    display: none;
+  }
+  .wrapper-beta-mobile {
+    display: block;
+  }
+  .chevron {
+    display: none;
+  }
   .nav {
     align-items: center;
+    padding: 1.5rem;
   }
   .nav-list {
     display: none;
@@ -177,7 +215,7 @@ const userName = computed((): string => {
     position: fixed;
     width: 100%;
     height: 20rem;
-    top: 6rem;
+    top: 11rem;
     left: 0;
     z-index: 2;
     background-color: var(--white);
@@ -186,9 +224,6 @@ const userName = computed((): string => {
   .wrapper-logo p {
     font-size: 1.2rem;
   }
-  .beta {
-    font-size: 1rem;
-  }
   .menu-burger {
     display: block;
     background-color: transparent;
@@ -201,6 +236,10 @@ const userName = computed((): string => {
   .nav-list-item {
     margin-bottom: 2.5rem;
   }
+  .item-logout {
+    display: block;
+    margin-bottom: 1.5rem;
+  }
   .menu-burger {
     padding: 0;
   }

src/views/HomeView.vue

@@ -98,7 +98,7 @@ onMounted(async () => {
 }
 @media (max-width: 500px) {
   .entry-page {
-    padding-top: 6rem;
+    padding-top: 12rem;
   }
   .entry-viewer {
     min-height: -webkit-fill-available;

static/keycloak.css

@@ -1,113 +0,0 @@
-/*backend/docker/keycloak/themes/panoramax/login/resources/css/styles.css*/
-:root {
-  --pf-global--primary-color--100: black;
-  --pf-global--primary-color--200: black;
-  --default-background-color: #97a1cdff;
-  --link-hover-color: black;
-}
-
-.login-pf body {
-  background: none;
-}
-
-.pf-c-form-control {
-  --pf-global--primary-color--100: unset;
-  border-radius: 5px;
-}
-.login-pf-page {
-  padding-top: 0;
-}
-
-.pf-c-button.pf-m-block {
-  border-radius: 10px;
-  height: 45px;
-  max-width: 320px;
-  font-size: 16px;
-  margin: auto;
-}
-.card-pf {
-  box-shadow: none;
-  border-radius: 20px;
-  border: 1px solid #e6e6e6;
-}
-.pf-c-button:hover {
-  opacity: 0.8;
-}
-.panoramax-header {
-  height: 80px;
-  padding: 20px;
-  margin-bottom: 100px;
-  border-bottom: 1px solid black;
-}
-.panoramax-nav {
-  display: flex;
-  justify-content: space-between;
-}
-.panoramax-logo {
-  height: 40px;
-  border-radius: 5px;
-}
-.panoramax-wrapper-logo {
-  display: flex;
-  align-items: center;
-}
-.panoramax-wrapper-logo p {
-  margin-bottom: 0;
-  margin-left: 10px;
-  font-size: 16px;
-  position: relative;
-}
-.panoramax-beta {
-  color: red;
-  border: 1px solid red;
-  border-radius: 5px;
-  padding: 2px 3px;
-  margin-left: 5px;
-  font-size: 12px;
-  position: absolute;
-  top: -10px;
-  width: 90px;
-  display: flex;
-  justify-content: center;
-  right: -95px;
-}
-.panoramax-link {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: black;
-  font-size: 14px;
-}
-.login-pf a:hover {
-  color: black;
-  text-decoration: underline;
-}
-#kc-info-wrapper {
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-}
-@media (max-width: 500px) {
-  .login-pf-page {
-    padding-top: 150px;
-  }
-  .panoramax-header {
-    height: 60px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 2;
-    background: white;
-  }
-  .panoramax-nav {
-    align-items: center;
-  }
-  .panoramax-wrapper-logo p {
-    font-size: 12px;
-  }
-  .panoramax-beta {
-    font-size: 10px;
-  }
-}