From cb49569a0228a16db13aa82df22192566a845672 Mon Sep 17 00:00:00 2001
From: Sandra Guerreiro <sandragjacinto@gmail.com>
Date: Thu, 29 Jan 2026 11:56:47 +0100
Subject: [PATCH 1/3] feat(layout): fixes ui issues on smaller screens

---
 src/App.vue                                   |   2 +-
 src/components/AppHeader.vue                  |  41 +--
 src/components/AppLayout.vue                  |  23 +-
 src/components/NavComponent.vue               | 324 ------------------
 .../__snapshots__/AppHeader.test.ts.snap      |  24 +-
 src/components/nav/BaseNavItem.vue            | 102 ++++++
 src/components/{ => nav}/HelpComponent.vue    |  34 +-
 src/components/nav/LanguageSelector.vue       |  74 ++++
 src/components/nav/NavComponent.vue           | 145 ++++++++
 src/stores/featureFlip.ts                     |   4 +
 10 files changed, 358 insertions(+), 415 deletions(-)
 delete mode 100644 src/components/NavComponent.vue
 create mode 100644 src/components/nav/BaseNavItem.vue
 rename src/components/{ => nav}/HelpComponent.vue (65%)
 create mode 100644 src/components/nav/LanguageSelector.vue
 create mode 100644 src/components/nav/NavComponent.vue

diff --git a/src/App.vue b/src/App.vue
index 92b0cd5..75f6594 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { RouterView } from 'vue-router';
 import AppHeader from '@/components/AppHeader.vue';
-import NavComponent from '@/components/NavComponent.vue';
+import NavComponent from '@/components/nav/NavComponent.vue';
 import FooterComponent from '@/components/FooterComponent.vue';
 import AppLayout from '@/components/AppLayout.vue';
 import SmallScreenPage from '@/views/SmallScreenPage.vue';
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 453c0a8..5ae67a7 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,38 +1,31 @@
 <template>
-  <div class="app-header">
-    <router-link to="/">
-      <img alt="logo" class="logo" src="@/assets/logo.png" />
-    </router-link>
-    <span class="is-title has-text-weight-semibold is-size-4 has-text-success ml-1">Beta</span>
-  </div>
+  <router-link class="app-header-link" to="/">
+    <div class="app-header">
+      <img alt="App large logo" class="logo" src="@/assets/logo.png" />
+
+      <span class="is-title has-text-weight-semibold has-text-success ml-1">Beta</span>
+    </div>
+  </router-link>
 </template>
 
 <style scoped>
 .app-header {
   margin: 1rem 0 1em 1rem;
   z-index: 1;
-  transition: height 0.5s;
+  display: flex;
+  margin-left: 2%;
+  margin-bottom: 0rem;
 }
 
-@media screen and (min-width: 576px) {
-  .logo {
-    width: 100%;
-    min-width: 4em;
-    max-height: 2em;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .logo {
-    font-size: 2rem;
-  }
+.logo {
+  height: 100%;
+  width: auto;
+  max-height: clamp(24px, 5vw, 3.5em);
 }
 
-@media screen and (min-width: 992px) {
-  .app-header {
-    display: flex;
-    margin-left: 2rem;
-    margin-bottom: 0rem;
+@media (max-width: 1600px) {
+  .app-header-link {
+    display: none;
   }
 }
 </style>
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index d1f3b6b..72eb282 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -46,38 +46,21 @@ const manageNavBarAnimations = () => {
   overflow: hidden;
   margin: 0;
 
-  display: grid;
-  grid-template-rows: 6.5rem auto;
-  grid-template-areas:
-    'header '
-    'main ';
-  transition: grid-template-rows 0.5s;
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
 }
 
 .header {
-  grid-area: header;
   display: flex;
 }
 
 .main {
-  grid-area: main;
   width: 100%;
   height: 100%;
   overflow: auto;
   scroll-behavior: smooth;
 }
-@media screen and (min-width: 576px) {
-  .appLayout {
-    grid-template-rows: 7rem auto;
-    grid-gap: 0.05rem;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .appLayout {
-    grid-template-rows: auto 1fr;
-  }
-}
 
 .wl-footer {
   background-color: var(--neutral-10);
diff --git a/src/components/NavComponent.vue b/src/components/NavComponent.vue
deleted file mode 100644
index 0591a1c..0000000
--- a/src/components/NavComponent.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<script setup lang="ts">
-import SearchIcon from '@/components/icons/SearchIcon.vue';
-import AboutIcon from '@/components/icons/AboutIcon.vue';
-import LinesLeaningIcon from '@/components/icons/LinesLeaningIcon.vue';
-import QnAIcon from '@/components/icons/QnAIcon.vue';
-import HelpComponent from '@/components/HelpComponent.vue';
-import { ref } from 'vue';
-import i18n from '@/localisation/i18n';
-import BookIcon from '@/components/icons/BookIcon.vue';
-import NavBookmarkIcon from '@/components/icons/NavBookmarkIcon.vue';
-import { useFeatureFlipStore } from '@/stores/featureFlip';
-import { useMetricsStore } from '@/stores/metrics';
-
-const featureFlip = useFeatureFlipStore();
-const metricStore = useMetricsStore();
-const isFeatureEnabled = featureFlip.isFeatureEnabled('tutor');
-const isFeatureEnabledMicrolearning = featureFlip.isFeatureEnabled('microlearning');
-const isWorkshopFeatureEnabled = featureFlip.isWorkshopFeatureEnabled();
-
-const isNavOpened = ref<boolean>(false);
-
-const handle_nav_bookmarks = () => {
-  isNavOpened.value = false;
-};
-</script>
-<template>
-  <div class="nav" :class="isNavOpened && 'open'">
-    <div class="nav-items" :class="isNavOpened && 'open'">
-      <div class="link-wrapper">
-        <router-link
-          class="router-link"
-          to="/q-and-a"
-          @click="isNavOpened = false"
-          data-testid="nav-chat"
-        >
-          <div class="icon mr-2">
-            <QnAIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{ $t('nav.chat') }}</span>
-        </router-link>
-      </div>
-
-      <div class="link-wrapper" v-if="isFeatureEnabled">
-        <router-link
-          class="router-link"
-          to="/tutor"
-          @click="isNavOpened = false"
-          data-testid="nav-tutor"
-        >
-          <div class="icon mr-2">
-            <BookIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{
-            $t('nav.syllabus')
-          }}</span>
-        </router-link>
-      </div>
-
-      <div class="link-wrapper" v-if="isFeatureEnabledMicrolearning">
-        <router-link
-          class="router-link"
-          to="/microlearning"
-          @click="isNavOpened = false"
-          data-testid="nav-microlearning"
-        >
-          <div class="icon mr-2">
-            <LinesLeaningIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{
-            $t('nav.microlearning')
-          }}</span>
-        </router-link>
-      </div>
-
-      <div class="link-wrapper">
-        <router-link
-          class="router-link"
-          to="/search"
-          @click="isNavOpened = false"
-          data-testid="nav-search"
-        >
-          <div class="icon mr-2">
-            <SearchIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{
-            $t('nav.search')
-          }}</span>
-        </router-link>
-      </div>
-      <div class="link-wrapper is-relative">
-        <router-link
-          class="router-link"
-          to="/bookmarks"
-          @click="handle_nav_bookmarks"
-          data-testid="nav-bookmarks"
-        >
-          <div class="icon mr-2">
-            <NavBookmarkIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{
-            $t('nav.bookmarks')
-          }}</span>
-        </router-link>
-      </div>
-
-      <div class="link-wrapper mr-6">
-        <router-link
-          class="router-link"
-          to="/about"
-          @click="isNavOpened = false"
-          data-testid="nav-about"
-        >
-          <div class="icon mr-2">
-            <AboutIcon />
-          </div>
-          <span class="item-name" :class="isNavOpened && 'visible-name'">{{
-            $t('nav.about')
-          }}</span>
-        </router-link>
-      </div>
-      <a
-        class="mx-0 px-0"
-        v-if="isWorkshopFeatureEnabled"
-        target="_blank"
-        :href="metricStore.getWorkshopFormUrl()"
-      >
-        <span class="item-name router-link-form has-text-success mx-1 px-1 pr-4 is-size-6">{{
-          $t('nav.workshopForm')
-        }}</span>
-      </a>
-
-      <div class="nav-langs" :class="isNavOpened && 'open'">
-        <a
-          class="nav-lang"
-          @click="i18n.global.locale.value = 'fr'"
-          :class="i18n.global.locale.value === 'fr' && 'selected'"
-          >{{ $t('lang.fr') }}</a
-        >
-        <a
-          class="nav-lang"
-          @click="i18n.global.locale.value = 'en'"
-          :class="i18n.global.locale.value === 'en' && 'selected'"
-          >{{ $t('lang.en') }}</a
-        >
-      </div>
-      <HelpComponent />
-    </div>
-  </div>
-</template>
-<style scoped>
-.nav {
-  display: flex;
-  z-index: 2;
-  border-bottom: 1px solid var(--neutral-20);
-}
-
-.icon {
-  position: relative;
-}
-
-.nav-langs {
-  opacity: 0;
-}
-
-.nav-langs.open {
-  opacity: 1;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin-top: 2rem;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.nav-lang {
-  all: unset;
-  cursor: pointer;
-  border-bottom: 1px solid var(--neutral-20);
-  padding: 0.25rem;
-
-  &:hover {
-    font-weight: 800;
-  }
-}
-
-.nav-lang.selected {
-  font-weight: 800;
-}
-
-.nav-items {
-  position: absolute;
-  opacity: 0;
-  width: 0rem;
-  height: 0rem;
-
-  & > * {
-    display: none;
-  }
-}
-
-.router-link {
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.2rem;
-  cursor: pointer;
-  padding: 0.75rem 1rem;
-  width: calc(100% - 2rem);
-  flex-wrap: nowrap;
-  white-space: nowrap;
-}
-
-.router-link-form {
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.2rem;
-  cursor: pointer;
-  width: calc(100% - 2rem);
-  flex-wrap: nowrap;
-  white-space: nowrap;
-  &:hover {
-    background-color: var(--neutral-15);
-  }
-}
-
-.router-link-active {
-  margin-bottom: 1rem;
-  background-color: var(--neutral-20);
-}
-
-.item-name {
-  width: 0rem;
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-  flex-wrap: nowrap;
-}
-
-.item-name.visible-name {
-  display: block;
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0.1s linear;
-}
-
-@media screen and (min-width: 992px) {
-  .nav {
-    width: 100%;
-    padding: 0rem;
-  }
-
-  .toggler {
-    display: none;
-  }
-
-  .nav-items {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-    display: flex;
-    flex-direction: row;
-    padding-top: 1.5rem;
-    text-align: start;
-
-    & > * {
-      display: flex;
-      opacity: 1;
-    }
-  }
-
-  .item-name {
-    display: default;
-    visibility: visible;
-    opacity: 1;
-    width: auto;
-    white-space: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  .link-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    padding-bottom: 0.25rem;
-    & > * {
-      display: flex;
-    }
-  }
-
-  .link-wrapper:has(.router-link-active) {
-    border-bottom: 2px solid var(--tertiary);
-  }
-
-  .router-link {
-    all: unset;
-    border-radius: 4px;
-    padding: 0.25rem 0.75rem;
-    display: flex;
-    font-size: 0.9rem;
-
-    gap: 0.5rem;
-    cursor: pointer;
-    margin: 0 0.5rem;
-    width: auto;
-    &:hover {
-      background-color: var(--neutral-15);
-    }
-  }
-
-  .nav-langs {
-    all: unset;
-    flex-direction: row;
-    justify-self: flex-end;
-    margin-top: auto;
-    font-size: 0.75rem;
-    margin-left: auto;
-  }
-}
-</style>
diff --git a/src/components/__tests__/__snapshots__/AppHeader.test.ts.snap b/src/components/__tests__/__snapshots__/AppHeader.test.ts.snap
index 701658d..e7aa804 100644
--- a/src/components/__tests__/__snapshots__/AppHeader.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/AppHeader.test.ts.snap
@@ -1,22 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppHeader > renders properly 1`] = `
-<div
-  class="app-header"
+<router-link-stub
+  ariacurrentvalue="page"
+  class="app-header-link"
+  custom="false"
   data-v-48a13218=""
->
-  <router-link-stub
-    ariacurrentvalue="page"
-    custom="false"
-    data-v-48a13218=""
-    replace="false"
-    to="/"
-  />
-  <span
-    class="is-title has-text-weight-semibold is-size-4 has-text-success ml-1"
-    data-v-48a13218=""
-  >
-    Beta
-  </span>
-</div>
+  replace="false"
+  to="/"
+/>
 `;
diff --git a/src/components/nav/BaseNavItem.vue b/src/components/nav/BaseNavItem.vue
new file mode 100644
index 0000000..4e6f94f
--- /dev/null
+++ b/src/components/nav/BaseNavItem.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="link-wrapper">
+    <router-link
+      class="router-link"
+      :to="to"
+      :class="{ 'router-link-not-active': neverActive }"
+      data-testid="nav-{{ name }}"
+    >
+      <div class="icon">
+        <component :is="icon" />
+      </div>
+      <span class="item-name">{{ $t(`nav.${name}`) }}</span>
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to: string;
+  name: string;
+  icon: object;
+  neverActive?: boolean;
+}>();
+</script>
+
+<style scoped>
+.link-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+  & > * {
+    display: flex;
+  }
+}
+
+.link-wrapper:not(:has(.router-link-not-active)):has(.router-link-active) {
+  border-bottom: 2px solid var(--tertiary);
+}
+
+.router-link {
+  all: unset;
+  border-radius: 4px;
+  padding: 0.25rem 0.75rem;
+  display: flex;
+  font-size: 0.9rem;
+
+  gap: 1rem;
+  cursor: pointer;
+  margin: 0 0.5rem;
+  width: auto;
+  &:hover {
+    background-color: var(--neutral-15);
+  }
+}
+
+.router-link-active:not(.router-link-not-active) {
+  background-color: var(--neutral-20);
+}
+
+.item-name {
+  width: auto;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 1450px) {
+  .item-name {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+    width: 0rem;
+    white-space: nowrap;
+  }
+  .router-link {
+    gap: 0;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .router-link {
+    padding-inline: 0.5rem;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .link-wrapper {
+    padding-inline: 0.25rem;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .router-link {
+    padding-inline: 0.25rem;
+  }
+  .link-wrapper {
+    padding-inline: 0rem;
+  }
+}
+</style>
diff --git a/src/components/HelpComponent.vue b/src/components/nav/HelpComponent.vue
similarity index 65%
rename from src/components/HelpComponent.vue
rename to src/components/nav/HelpComponent.vue
index 762cdc4..62499fa 100644
--- a/src/components/HelpComponent.vue
+++ b/src/components/nav/HelpComponent.vue
@@ -5,6 +5,7 @@ import ModalWrapper from '@/components/ModalWrapper.vue';
 import HelpComponentContent from '@/components/HelpComponentContent.vue';
 import { HELP_USER } from '@/utils/constants';
 import { useRoute } from 'vue-router';
+import BaseNavItem from './BaseNavItem.vue';
 
 const route = useRoute();
 const openModal = ref(false);
@@ -23,11 +24,8 @@ watch(
 </script>
 <template>
   <div>
-    <div class="link-wrapper" :class="{ disabled: !instructions.length }" @click="toggleModal">
-      <div class="icon mr-2">
-        <HelpIcon />
-      </div>
-      <span class="item-name">{{ $t('nav.help') }}</span>
+    <div class="none" :class="{ disabled: !instructions.length }">
+      <BaseNavItem to="" name="help" :icon="HelpIcon" neverActive @click="toggleModal" />
     </div>
     <ModalWrapper :isOpen="openModal" :onClose="toggleModal">
       <HelpComponentContent
@@ -41,34 +39,12 @@ watch(
 </template>
 
 <style scoped>
-.icon {
-  position: relative;
-}
-
-.link-wrapper {
+.none {
   display: flex;
-  flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem 1rem;
-  padding-bottom: 0.25rem;
-  & > * {
-    display: flex;
-  }
 }
-.item-name {
-  display: default;
-  visibility: visible;
-  white-space: nowrap;
-  opacity: 1;
-  width: auto;
-}
-.link-wrapper:hover {
-  background-color: var(--neutral-10);
-  cursor: pointer;
-}
-
-.link-wrapper.disabled {
+.disabled {
   pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/src/components/nav/LanguageSelector.vue b/src/components/nav/LanguageSelector.vue
new file mode 100644
index 0000000..d5a1be5
--- /dev/null
+++ b/src/components/nav/LanguageSelector.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="language-selector">
+    <select v-model="$i18n.locale">
+      <option
+        class="nav-lang"
+        v-for="locale in $i18n.availableLocales"
+        :key="`locale-${locale}`"
+        :value="locale"
+      >
+        {{ locale.toLocaleUpperCase() }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.language-selector {
+  all: unset;
+  flex-direction: row;
+  justify-self: flex-end;
+  margin-top: auto;
+  font-size: 0.75rem;
+  margin-left: auto;
+  margin-right: 1rem;
+}
+
+select,
+::picker(select) {
+  appearance: base-select;
+}
+
+select {
+  border: 2px solid var(--neutral-0);
+
+  padding: 10px;
+  transition: 0.4s;
+  margin-bottom: 0.5rem;
+  font-size: 0.8rem;
+}
+
+select:hover {
+  background: var(--neutral-10);
+}
+
+select::picker-icon {
+  color: var(--neutral-50);
+  transition: 0.4s rotate;
+}
+
+select:open::picker-icon {
+  rotate: 180deg;
+}
+::picker(select) {
+  border-radius: 8px;
+  border: 1px solid #cccccc;
+}
+
+option {
+  display: flex;
+  justify-content: flex-start;
+  gap: 20px;
+
+  border-bottom: 1px solid var(--neutral-10);
+  padding: 10px;
+  transition: 0.4s;
+}
+
+option:hover,
+option:focus {
+  background: var(--primary-light);
+}
+</style>
diff --git a/src/components/nav/NavComponent.vue b/src/components/nav/NavComponent.vue
new file mode 100644
index 0000000..56eb959
--- /dev/null
+++ b/src/components/nav/NavComponent.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import SearchIcon from '@/components/icons/SearchIcon.vue';
+import AboutIcon from '@/components/icons/AboutIcon.vue';
+import LinesLeaningIcon from '@/components/icons/LinesLeaningIcon.vue';
+import QnAIcon from '@/components/icons/QnAIcon.vue';
+import HelpComponent from '@/components/nav/HelpComponent.vue';
+
+import BookIcon from '@/components/icons/BookIcon.vue';
+import NavBookmarkIcon from '@/components/icons/NavBookmarkIcon.vue';
+import { useFeatureFlipStore } from '@/stores/featureFlip';
+import { useMetricsStore } from '@/stores/metrics';
+import BaseNavItem from './BaseNavItem.vue';
+import LanguageSelector from './LanguageSelector.vue';
+
+const featureFlip = useFeatureFlipStore();
+const metricStore = useMetricsStore();
+
+const isWorkshopFeatureEnabled = featureFlip.isWorkshopFeatureEnabled();
+
+const navEntries = [
+  {
+    name: 'chat',
+    to: '/q-and-a',
+    icon: QnAIcon,
+    isFeatureEnabled: featureFlip.isFeatureEnabled('chat')
+  },
+  {
+    name: 'syllabus',
+    to: '/tutor',
+    icon: BookIcon,
+    featureFlag: 'tutor',
+    isFeatureEnabled: featureFlip.isFeatureEnabled('tutor')
+  },
+
+  {
+    name: 'search',
+    to: '/search',
+    icon: SearchIcon,
+    isFeatureEnabled: featureFlip.isFeatureEnabled('search')
+  },
+  {
+    name: 'bookmarks',
+    to: '/bookmarks',
+    icon: NavBookmarkIcon,
+    isFeatureEnabled: featureFlip.isFeatureEnabled('bookmarks')
+  },
+  {
+    name: 'microlearning',
+    to: '/microlearning',
+    icon: LinesLeaningIcon,
+    featureFlag: 'microlearning',
+    isFeatureEnabled: featureFlip.isFeatureEnabled('microlearning')
+  },
+  {
+    name: 'about',
+    to: '/about',
+    icon: AboutIcon,
+    isFeatureEnabled: featureFlip.isFeatureEnabled('about')
+  }
+];
+</script>
+<template>
+  <div class="nav">
+    <div class="nav-items">
+      <div v-for="entry in navEntries" :key="entry.name">
+        <BaseNavItem
+          v-if="entry.isFeatureEnabled"
+          :to="entry.to"
+          :name="entry.name"
+          :icon="entry.icon"
+        />
+      </div>
+
+      <HelpComponent />
+      <a
+        class="mx-0 px-0 ml-auto"
+        v-if="isWorkshopFeatureEnabled"
+        target="_blank"
+        :href="metricStore.getWorkshopFormUrl()"
+      >
+        <span class="item-name router-link-form has-text-success mx-1 px-1 pr-4 is-size-6">{{
+          $t('nav.workshopForm')
+        }}</span>
+      </a>
+
+      <LanguageSelector />
+    </div>
+  </div>
+</template>
+<style scoped>
+.nav {
+  display: flex;
+  z-index: 2;
+  border-bottom: 1px solid var(--neutral-20);
+  width: 100%;
+  padding: 0rem;
+}
+
+.nav-items {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  display: flex;
+  flex-direction: row;
+  padding-top: 1.5rem;
+  text-align: start;
+
+  & > * {
+    display: flex;
+    opacity: 1;
+  }
+}
+
+.router-link-form {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  cursor: pointer;
+  width: calc(100% - 2rem);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  &:hover {
+    background-color: var(--neutral-15);
+  }
+}
+
+.item-name {
+  width: auto;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 1450px) {
+  .item-name {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+    width: 0rem;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/stores/featureFlip.ts b/src/stores/featureFlip.ts
index 5a2975d..544f957 100644
--- a/src/stores/featureFlip.ts
+++ b/src/stores/featureFlip.ts
@@ -6,6 +6,10 @@ export const useFeatureFlipStore = defineStore('featureFlip', () => {
   const isDevEnvironment = (import.meta.env.VITE_ENVIRONMENT || '').trim().includes('dev');
   const featureFlip: FeatureFlip = {
     tutor: true,
+    search: true,
+    bookmarks: true,
+    chat: true,
+    about: true,
     microlearning: isDevEnvironment
   };
 

From 346b890b213d85bdbb71a4023b7d822cffca7ce1 Mon Sep 17 00:00:00 2001
From: Sandra Guerreiro <sandragjacinto@gmail.com>
Date: Thu, 29 Jan 2026 12:14:33 +0100
Subject: [PATCH 2/3] fix e2e

---
 e2e/nav.spec.ts                    | 8 ++++----
 src/components/nav/BaseNavItem.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/e2e/nav.spec.ts b/e2e/nav.spec.ts
index 4b2e0e8..3b865a7 100644
--- a/e2e/nav.spec.ts
+++ b/e2e/nav.spec.ts
@@ -19,11 +19,11 @@ test.describe('nav', () => {
     await expect(page).toHaveURL(/\/bookmarks/);
   });
 
-  test.describe('switch to french', () => {
-    test('switch to French', async ({ page }) => {
+  test.describe('switch to language', () => {
+    test('switch language', async ({ page }) => {
       expect(await page.getByText('Posez une question')).toBeTruthy();
-      await page.getByText('Anglais').click();
-      expect(await page.getByText('English')).toBeTruthy();
+      await page.getByRole('combobox').selectOption('EN');
+      expect(await page.getByText('EN')).toBeTruthy();
       expect(await page.getByText('Ask a question')).toBeTruthy();
     });
   });
diff --git a/src/components/nav/BaseNavItem.vue b/src/components/nav/BaseNavItem.vue
index 4e6f94f..0af36a8 100644
--- a/src/components/nav/BaseNavItem.vue
+++ b/src/components/nav/BaseNavItem.vue
@@ -4,7 +4,7 @@
       class="router-link"
       :to="to"
       :class="{ 'router-link-not-active': neverActive }"
-      data-testid="nav-{{ name }}"
+      :data-testid="`nav-${name}`"
     >
       <div class="icon">
         <component :is="icon" />

From dc934101c88c14e078bb12915228c1eb4d4d4a57 Mon Sep 17 00:00:00 2001
From: Sandra Guerreiro <sandragjacinto@gmail.com>
Date: Thu, 29 Jan 2026 14:14:38 +0100
Subject: [PATCH 3/3] fix typing

---
 src/components/HelpComponentContent.vue | 8 +++++++-
 src/components/nav/HelpComponent.vue    | 7 +++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/HelpComponentContent.vue b/src/components/HelpComponentContent.vue
index f14778b..24e968e 100644
--- a/src/components/HelpComponentContent.vue
+++ b/src/components/HelpComponentContent.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { ref, watchEffect, computed } from 'vue';
 
+interface StepContent {
+  title: string;
+  description: string;
+  image?: string;
+}
+
 const props = defineProps<{
-  stepsContent?: Record<string, string>[];
+  stepsContent?: StepContent[];
   modalState: boolean;
   toggleModal: () => void;
 }>();
diff --git a/src/components/nav/HelpComponent.vue b/src/components/nav/HelpComponent.vue
index 62499fa..5a7c5b6 100644
--- a/src/components/nav/HelpComponent.vue
+++ b/src/components/nav/HelpComponent.vue
@@ -7,9 +7,12 @@ import { HELP_USER } from '@/utils/constants';
 import { useRoute } from 'vue-router';
 import BaseNavItem from './BaseNavItem.vue';
 
+type HelpUserKey = keyof typeof HELP_USER;
+type HelpUserValue = (typeof HELP_USER)[HelpUserKey];
+
 const route = useRoute();
 const openModal = ref(false);
-const instructions = ref([]);
+const instructions = ref<HelpUserValue>([]);
 const toggleModal = () => {
   if (!instructions.value.length) return;
   openModal.value = !openModal.value;
@@ -18,7 +21,7 @@ const toggleModal = () => {
 watch(
   () => route.path.split('/')[1],
   async (path) => {
-    instructions.value = HELP_USER[path] || [];
+    instructions.value = HELP_USER[path as HelpUserKey] || [];
   }
 );
 </script>