From 776bad46ff92d0c90abd7dd7140bef0b67b195c4 Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 28 Nov 2024 18:23:21 +0100 Subject: [PATCH 1/7] Update global Layout --- src/app/global.styles.ts | 4 + src/app/layout.styles.tsx | 15 ++ src/app/layout.tsx | 53 ++++--- src/components/Notices/Notices.tsx | 4 +- src/layouts/Footer.styles.tsx | 85 +++++++++++ src/layouts/Footer.tsx | 236 +++++++++++++++-------------- src/layouts/Header.styles.tsx | 99 +++++++++++- src/layouts/Header.tsx | 40 +++-- src/layouts/MainLayout.tsx | 32 ++++ 9 files changed, 411 insertions(+), 157 deletions(-) create mode 100644 src/app/layout.styles.tsx create mode 100644 src/layouts/Footer.styles.tsx create mode 100644 src/layouts/MainLayout.tsx diff --git a/src/app/global.styles.ts b/src/app/global.styles.ts index 843efea7d..e70397a68 100644 --- a/src/app/global.styles.ts +++ b/src/app/global.styles.ts @@ -13,6 +13,10 @@ body { max-width: 100vw; overflow-x: hidden; } + +// Quik fix for DSFR Table component +.fr-table > table { + display: table; ` export default GlobalStyle diff --git a/src/app/layout.styles.tsx b/src/app/layout.styles.tsx new file mode 100644 index 000000000..04e4814e1 --- /dev/null +++ b/src/app/layout.styles.tsx @@ -0,0 +1,15 @@ +'use client' + +import styled from 'styled-components' + +export const StyledLayout = styled.div` + min-height: 100vh; + display: grid; + grid-template-rows: auto auto 1fr auto; +` + +export const PageWrapper = styled.div` + display: flex; + flex-direction: column; + height: 100%; +` diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0b2fcc881..4640a59e6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,11 +6,11 @@ import { DsfrProvider } from '@codegouvfr/react-dsfr/next-appdir/DsfrProvider' import { getHtmlAttributes } from '@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes' import { StartDsfr } from '@/providers' +import { LayoutProvider } from '@/layouts/MainLayout' import Header from '@/layouts/Header' import Footer from '@/layouts/Footer' -import Breadcrumb from '@/layouts/Breadcrumb' import { defaultColorScheme } from '@/theme/defaultColorScheme' -import styled, { ThemeProvider } from 'styled-components' +import { ThemeProvider } from 'styled-components' import StyledComponentsRegistry from '@/providers/StyledComponentsRegistry' import theme from '@/theme' import GlobalStyle from './global.styles' @@ -19,23 +19,21 @@ import { init as matomoInit } from '@socialgouv/matomo-next' import { BALWidgetProvider } from '@/contexts/BALWidget.context' import { PublicEnvScript, env } from 'next-runtime-env' -const StyledLayout = styled.div` - min-height: 100vh; - display: grid; - grid-template-rows: auto auto 1fr auto; - - .pageWrapper { - display: flex; - flex-direction: column; - height: 100%; - } -` +import { + StyledLayout, + PageWrapper, +} from './layout.styles' export default function RootLayout({ children }: { children: JSX.Element }) { const lang = 'fr' + // TODO : Connect to Grist API + const sampleNotice = { + text: 'Nouveau service : le calculateur de distance', + } + const dataNotices = { - data: [], + data: [sampleNotice], duration: 4000, } @@ -64,19 +62,20 @@ export default function RootLayout({ children }: { children: JSX.Element }) { - - - - -
-
- {/* */} - {children} -
-