From 61c093cb54f0c43b52ae36f197de64fa25b6e676 Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Thu, 14 Nov 2024 08:57:40 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20update=20header=20for?= =?UTF-8?q?=20the=20new=20responsive=20layout=20[FIRST=5FCOMMIT=5FHEADER]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new version of the responsive layout adds a burger menu to show the left-panel with a slide-in animation. We move the logout and language change button in this responsive panel. --- CHANGELOG.md | 1 + .../e2e/__tests__/app-impress/header.spec.ts | 22 +-- .../src/features/header/assets/icon-docs.svg | 33 +---- .../src/features/header/components/Header.tsx | 136 +++++++++--------- 4 files changed, 76 insertions(+), 116 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 58730ce5..2ed58624 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to - ✨(frontend) Add a broadcast store #387 - ✨(frontend) WIP: New ui - 💄(frontend) Add left panel +- 💄(frontend) update header layout #421 ## Changed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts index e1ade402..d213f510 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts @@ -75,29 +75,13 @@ test.describe('Header mobile', () => { test('it checks the header when mobile', async ({ page }) => { const header = page.locator('header').first(); + await expect(header.getByLabel('Open the header menu')).toBeVisible(); await expect( - header.getByRole('button', { - name: 'Les services de La Suite numérique', - }), + header.getByRole('link', { name: 'Docs Logo Docs' }), ).toBeVisible(); - await expect( - page.getByRole('button', { - name: 'Logout', - }), - ).toBeHidden(); - - await expect(page.getByText('English')).toBeHidden(); - - await header.getByLabel('Open the header menu').click(); - - await expect( - page.getByRole('button', { - name: 'Logout', - }), + header.getByRole('button', { name: 'Les services de La Suite numé' }), ).toBeVisible(); - - await expect(page.getByText('English')).toBeVisible(); }); }); diff --git a/src/frontend/apps/impress/src/features/header/assets/icon-docs.svg b/src/frontend/apps/impress/src/features/header/assets/icon-docs.svg index 4db0531f..4f26ae3b 100644 --- a/src/frontend/apps/impress/src/features/header/assets/icon-docs.svg +++ b/src/frontend/apps/impress/src/features/header/assets/icon-docs.svg @@ -1,31 +1,4 @@ - - - - - - - - - - - - + + + diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx index 2d417607..2fba99c0 100644 --- a/src/frontend/apps/impress/src/features/header/components/Header.tsx +++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx @@ -1,89 +1,91 @@ +import { Button } from '@openfun/cunningham-react'; import Image from 'next/image'; import { useTranslation } from 'react-i18next'; -import { Box, StyledLink, Text } from '@/components/'; +import { Box, Icon, StyledLink, Text } from '@/components/'; import { ButtonLogin } from '@/core/auth'; +import { useCunninghamTheme } from '@/cunningham'; import { LanguagePicker } from '@/features/language'; import { useResponsiveStore } from '@/stores'; import { default as IconDocs } from '../assets/icon-docs.svg?url'; +import { HEADER_HEIGHT } from '../conf'; -import { DropdownMenu } from './DropdownMenu'; import { LaGaufre } from './LaGaufre'; export const Header = () => { const { t } = useTranslation(); - const { isSmallMobile } = useResponsiveStore(); + const theme = useCunninghamTheme(); + const tokens = theme.themeTokens(); + const colors = theme.colorsTokens(); + const { isResponsive, toggleMobileMenu } = useResponsiveStore(); return ( - - - - - - - BETA - - - {t('Docs')} - - - + {isResponsive && ( + } + /> + )} + + + + + + + {t('Docs')} + - {isSmallMobile ? ( - - - - - ) : ( - - - - - - )} - + + {isResponsive ? ( + + + + ) : ( + + + + + + )} ); };