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/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 @@ 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/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 @@ - - 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`] = ` -
- - - Beta - -
+ replace="false" + to="/" +/> `; diff --git a/src/components/nav/BaseNavItem.vue b/src/components/nav/BaseNavItem.vue new file mode 100644 index 0000000..0af36a8 --- /dev/null +++ b/src/components/nav/BaseNavItem.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/components/HelpComponent.vue b/src/components/nav/HelpComponent.vue similarity index 61% rename from src/components/HelpComponent.vue rename to src/components/nav/HelpComponent.vue index 762cdc4..5a7c5b6 100644 --- a/src/components/HelpComponent.vue +++ b/src/components/nav/HelpComponent.vue @@ -5,10 +5,14 @@ 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'; + +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([]); const toggleModal = () => { if (!instructions.value.length) return; openModal.value = !openModal.value; @@ -17,17 +21,14 @@ const toggleModal = () => { watch( () => route.path.split('/')[1], async (path) => { - instructions.value = HELP_USER[path] || []; + instructions.value = HELP_USER[path as HelpUserKey] || []; } );