feat(pdc-frontend): use grid to improve the header

frameless · Oct 18, 2023 · b46a70f · b46a70f
1 parent 49a6e49
commit b46a70f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 25 deletions.
diff --git a/apps/pdc-frontend/src/app/[locale]/layout.tsx b/apps/pdc-frontend/src/app/[locale]/layout.tsx
@@ -3,7 +3,7 @@ import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
-import { Navigation, Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
+import { Grid, GridCell, Navigation, Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
 import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
@@ -210,14 +210,14 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                 <SkipLink href="#main">{t('components.skip-link.main')}</SkipLink>
                 <SkipLink href="#menu">{t('components.skip-link.menu')}</SkipLink>
                 <SkipLink href="#search-input">{t('components.skip-link.search-input')}</SkipLink>
-                <div className="utrecht-header">
-                  <div className="utrecht-grid--col-6">
+                <Grid spacing="sm">
+                  <GridCell xs={6}>
                     <Logo locale={locale} />
-                  </div>
-                  <div className="utrecht-grid--col-6">
+                  </GridCell>
+                  <GridCell xs={6}>
                     <ClientLanguageSwitcher locales={languages} currentLocale={locale} />
-                  </div>
-                  <div className="utrecht-grid--col-12">
+                  </GridCell>
+                  <GridCell sm={12} justifyContent="flex-end">
                     <SearchBar
                       locale={locale}
                       onSearchSubmit={onSearchSubmitAction}
@@ -227,8 +227,8 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                       suggestionsTitle={t('search-bar.suggestions-title')}
                       hitsTitle={t('search-bar.hits-title')}
                     />
-                  </div>
-                </div>
+                  </GridCell>
+                </Grid>
               </PageHeader>
               <Navigation
                 list={getNavListData(t)}

diff --git a/apps/pdc-frontend/src/styles/globals.css b/apps/pdc-frontend/src/styles/globals.css
@@ -163,22 +163,6 @@ a {
   padding-inline: 0 !important;
 }
 
-.utrecht-header {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 5px;
-}
-
-/* TODO: replace the following css classes with the grid component */
-.utrecht-grid--col-6 {
-  inline-size: 50%;
-}
-.utrecht-grid--col-12 {
-  display: flex;
-  inline-size: 100%;
-  justify-content: flex-end;
-}
-
 .utrecht-spotlight-section > :first-child {
   --utrecht-space-around: 0;
 }