diff --git a/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx b/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx index 531e9eb89..abbe0a780 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx @@ -1,4 +1,3 @@ -import { Message } from '@/design-system' import { Grid } from '@/design-system/layout' import { H1 } from '@/design-system/typography/heading' diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx index d91d2f087..38ee93e30 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx @@ -65,56 +65,64 @@ export default function Navigation({ const prevStep = stepOrder[stepOrder.indexOf(currentStep) - 1] as PartialStep return ( - - - - - - {nextStep && ( + <> + + - )} - - + {nextStep && ( + + + + )} + + + + ) } const StyledNavigation = styled.div` + display: flex; + align-items: center; + height: 110px; position: sticky; padding: ${({ theme }) => theme.spacings.lg} 1rem; margin: 0 -1rem; @@ -124,5 +132,20 @@ const StyledNavigation = styled.div` ? theme.colors.extended.dark[800] : theme.colors.extended.grey[100]}; z-index: 2; - /* box-shadow: ${({ theme }) => theme.elevations[6]}; */ +` + +const Shadow = styled.div` + z-index: 1; + position: sticky; + bottom: 35px; + transform: translateY(-200%); + height: 25px; + padding: 0; + margin: 0; + background: transparent; + box-shadow: ${({ theme }) => + theme.darkMode ? theme.elevationsDarkMode[6] : theme.elevations[6]}; + + /* debug + /* background: red; */ `