Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: import sidebar form les bases #63

Merged
merged 1 commit into from
Sep 16, 2024
Merged

feat: import sidebar form les bases #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions src/app/_components/NavigationSideMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use client';

import type { SideMenuProps } from '@codegouvfr/react-dsfr/SideMenu';
import SideMenu from '@codegouvfr/react-dsfr/SideMenu';
import { useNavigationSideMenu } from './useNavigationSideMenu';

/**
* This component is a wrapper around the SideMenu component from DSFR.
* It adds the active state to the items of the menu depending on scroll position.
* This will use all the side menu items with an href starting with # to compute the active item
*/

const isItemActive = (activeHref: string, item: SideMenuProps.Item) =>
'linkProps' in item && item.linkProps?.href === activeHref;

const addActiveStateToItems = (
items: SideMenuProps.Item[],
activeHref?: string | null,
isFirstRecursion = true
): SideMenuProps.Item[] =>
items.map((item, index) => {
// Sub menu
if ('items' in item) {
return {
expandedByDefault: activeHref ? item.items.some((subItem) => isItemActive(activeHref, subItem)) : index === 0,
...item,
items: addActiveStateToItems(item.items, activeHref, index === 0)
};
}

return {
...item,
isActive: activeHref ? isItemActive(activeHref, item) : index === 0 && isFirstRecursion
};
});

const NavigationSideMenu = ({
contentId,
items,
...sideMenuProps
}: {
className?: string;
contentId: string;
} & Omit<SideMenuProps, 'id'>) => {
const { activeHref } = useNavigationSideMenu({
contentId,
items
});

return <SideMenu {...sideMenuProps} items={addActiveStateToItems(items, activeHref)} />;
};

export default NavigationSideMenu;
302 changes: 155 additions & 147 deletions src/app/_components/PageBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,164 +50,172 @@ export const PageBuilder = ({
const allComponents = buildComponents(data);
const struct = buildSections(allComponents);
const array = struct[1] ?? [];
const navigationComponent = array.find((component) => component.type === 'navigation');

return (
<>
{isHome && <Banner />}
<div className='fr-container mb2'>
<div className='fr-container fr-mb-4w'>
{!isHome && <BreadCrumb breadCrumbItems={breadCrumbItems} navbarNavigationItems={navbarNavigationItems} />}
{array.map((e) => {
switch (e.type) {
case 'badge':
return (
<div
className={
position[e.position] == 'left' || position[e.position] == 'right' ? `${position[e.position]}` : 'center'
}
style={{ margin: '32px' }}>
<p className={`fr-badge fr-badge--${labelColors[e.couleur]}`}>{e.texte} </p>
</div>
);
case 'bloc-de-texte':
return (
<div>
<TextArea data={e} row={null} />
</div>
);
case 'titre':
return <Title data={e} />;
case 'bouton':
return <Button data={e} rows={1} />;
case 'groupe-de-boutons':
return <ButtonGroup data={e} rows={1} />;
case 'carte-verticale':
return <VerticalCard data={e} rows={1} />;
case 'carte-horizontale':
return <HorizontalCard data={e} rows={1} />;
case 'flux-de-publications':
return (
<div key={e.id} style={{ marginBottom: marginsBottom[e.espacement_bas] }}>
<div className='grid2'>
{dataArticles &&
dataArticles.map((flux) => {
return (
<HorizontalCard
key={flux.titre_de_la_carte}
data={flux}
rows={2}
displayText={false}
fluxTwo={true}
/>
);
})}
</div>
</div>
);
case 'flux-actualite':
return (
<div className='flexrow-container' style={{ marginBottom: marginsBottom[e.espacement_bas] }}>
<div className='grid3'>
{dataArticles &&
dataArticles.map(({ attributes }) => {
return <VerticalCard key={attributes.titre_de_la_carte} data={attributes} rows={3} />;
})}
</div>
</div>
);
case 'champ-de-blocs':
return <BlocFields data={e} />;
case 'navigation':
return <AnchorNavigator data={e} />;
case 'ancre':
return <div className='translate-header-margin' id={e.ancre} />;
case 'bloc-de-breves':
return <BlocCards articles={dataArticles.map(({ attributes }) => attributes)} type='breve' />;
case 'bloc-de-publications-strategiques':
return <BlocCards articles={strategiques} type='rapport-strategique' />;
case 'bloc-de-rapports-de-recherches':
return <BlocCards articles={dataArticles.map(({ attributes }) => attributes)} type='etude' />;
case 'citation':
return <Quote data={e} />;
case 'mise-en-avant':
return <MiseEnAvant data={e} />;
case 'media':
return <Media data={e} />;
case 'lien-hypertexte':
return <NavLink data={e} rows={1} />;
case 'telechargement':
return <DownloadLink data={e} rows={1} />;
case 'carte-telechargement':
return <DownloadCard data={e} rows={1} />;
case 'accordeon':
return <Accordion data={e} rows={1} />;
case 'iframe':
return <Iframe data={e} rows={1} />;
case 'carte-deroulante':
return <RollingCard data={e} />;
case 'bandeau-titre':
if (bannerTitle == null) setBannerTitle(e);
break;
case 'flux-dispositifs':
return <ToolsDevicesContainer data={dataToolsDevices} slug={slug} type={'Dispositif'} />;
case 'flux-outils':
return <ToolsDevicesContainer data={dataToolsDevices} slug={slug} type={'Outil'} />;
case 'section':
// eslint-disable-next-line no-case-declarations
const sections = buildSections(allComponents)[0];
if (sections) {
const currentSection = sections.find((i) => i.sectionId == e.id);
if (currentSection) {
<div className='fr-grid-row gutter'>
{navigationComponent && (
<div className='fr-col-3'>
<AnchorNavigator data={navigationComponent} />
</div>
)}
<div className={navigationComponent ? 'fr-col-9' : 'fr-col-12'}>
{array.map((e) => {
switch (e.type) {
case 'badge':
return (
<div className='fr-grid-row fr-grid-row--gutters fr-mb-3v'>
{currentSection.elements.map((c) => {
switch (c.type) {
case 'badge':
return (
<div key={c.id}>
<p className={`fr-badge fr-badge--${labelColors[c.couleur]}`}>{c.texte} </p>
</div>
);
case 'bloc-de-texte':
return (
<div key={c.id}>
<TextArea data={{ texte: c.texte }} row={currentSection.rows} />
</div>
);

case 'titre':
<div
className={
position[e.position] == 'left' || position[e.position] == 'right' ? `${position[e.position]}` : 'center'
}
style={{ margin: '32px' }}>
<p className={`fr-badge fr-badge--${labelColors[e.couleur]}`}>{e.texte} </p>
</div>
);
case 'bloc-de-texte':
return (
<div>
<TextArea data={e} row={null} />
</div>
);
case 'titre':
return <Title data={e} />;
case 'bouton':
return <Button data={e} rows={1} />;
case 'groupe-de-boutons':
return <ButtonGroup data={e} rows={1} />;
case 'carte-verticale':
return <VerticalCard data={e} rows={1} />;
case 'carte-horizontale':
return <HorizontalCard data={e} rows={1} />;
case 'flux-de-publications':
return (
<div key={e.id} style={{ marginBottom: marginsBottom[e.espacement_bas] }}>
<div className='grid2'>
{dataArticles &&
dataArticles.map((flux) => {
return (
<div key={c.id}>
{e.taille == 'h1' && <h1>{e.titre}</h1>}
{e.taille == 'h2' && <h2>{e.titre}</h2>}
{e.taille == 'h3' && <h3>{e.titre}</h3>}
{e.taille == 'h4' && <h4>{e.titre}</h4>}
{e.taille == 'h5' && <h5>{e.titre}</h5>}
{e.taille == 'h6' && <h6>{e.titre}</h6>}
</div>
<HorizontalCard
key={flux.titre_de_la_carte}
data={flux}
rows={2}
displayText={false}
fluxTwo={true}
/>
);
case 'bouton':
return <Button data={c} rows={currentSection.rows} />;
case 'groupe-de-boutons':
return <ButtonGroup data={c} rows={currentSection.rows} />;
case 'carte-verticale':
return <VerticalCard data={c} rows={currentSection.rows} />;
case 'carte-horizontale':
return <HorizontalCard data={c} rows={currentSection.rows} />;
case 'lien-hypertexte':
return <NavLink data={c} rows={currentSection.rows} />;
case 'telechargement':
return <DownloadLink data={c} rows={currentSection.rows} />;
case 'carte-telechargement':
return <DownloadCard data={c} rows={currentSection.rows} />;
}
})}
})}
</div>
</div>
);
case 'flux-actualite':
return (
<div className='flexrow-container' style={{ marginBottom: marginsBottom[e.espacement_bas] }}>
<div className='grid3'>
{dataArticles &&
dataArticles.map(({ attributes }) => {
return <VerticalCard key={attributes.titre_de_la_carte} data={attributes} rows={3} />;
})}
</div>
</div>
);
}
case 'champ-de-blocs':
return <BlocFields data={e} />;
case 'ancre':
return <div className='translate-header-margin' id={e.ancre} />;
case 'bloc-de-breves':
return <BlocCards articles={dataArticles.map(({ attributes }) => attributes)} type='breve' />;
case 'bloc-de-publications-strategiques':
return <BlocCards articles={strategiques} type='rapport-strategique' />;
case 'bloc-de-rapports-de-recherches':
return <BlocCards articles={dataArticles.map(({ attributes }) => attributes)} type='etude' />;
case 'citation':
return <Quote data={e} />;
case 'mise-en-avant':
return <MiseEnAvant data={e} />;
case 'media':
return <Media data={e} />;
case 'lien-hypertexte':
return <NavLink data={e} rows={1} />;
case 'telechargement':
return <DownloadLink data={e} rows={1} />;
case 'carte-telechargement':
return <DownloadCard data={e} rows={1} />;
case 'accordeon':
return <Accordion data={e} rows={1} />;
case 'iframe':
return <Iframe data={e} rows={1} />;
case 'carte-deroulante':
return <RollingCard data={e} />;
case 'bandeau-titre':
if (bannerTitle == null) setBannerTitle(e);
break;
case 'flux-dispositifs':
return <ToolsDevicesContainer data={dataToolsDevices} slug={slug} type={'Dispositif'} />;
case 'flux-outils':
return <ToolsDevicesContainer data={dataToolsDevices} slug={slug} type={'Outil'} />;
case 'section':
// eslint-disable-next-line no-case-declarations
const sections = buildSections(allComponents)[0];
if (sections) {
const currentSection = sections.find((i) => i.sectionId == e.id);
if (currentSection) {
return (
<div className='fr-grid-row fr-grid-row--gutters fr-mb-3v'>
{currentSection.elements.map((c) => {
switch (c.type) {
case 'badge':
return (
<div key={c.id}>
<p className={`fr-badge fr-badge--${labelColors[c.couleur]}`}>{c.texte} </p>
</div>
);
case 'bloc-de-texte':
return (
<div key={c.id}>
<TextArea data={{ texte: c.texte }} row={currentSection.rows} />
</div>
);

case 'titre':
return (
<div key={c.id}>
{e.taille == 'h1' && <h1>{e.titre}</h1>}
{e.taille == 'h2' && <h2>{e.titre}</h2>}
{e.taille == 'h3' && <h3>{e.titre}</h3>}
{e.taille == 'h4' && <h4>{e.titre}</h4>}
{e.taille == 'h5' && <h5>{e.titre}</h5>}
{e.taille == 'h6' && <h6>{e.titre}</h6>}
</div>
);
case 'bouton':
return <Button data={c} rows={currentSection.rows} />;
case 'groupe-de-boutons':
return <ButtonGroup data={c} rows={currentSection.rows} />;
case 'carte-verticale':
return <VerticalCard data={c} rows={currentSection.rows} />;
case 'carte-horizontale':
return <HorizontalCard data={c} rows={currentSection.rows} />;
case 'lien-hypertexte':
return <NavLink data={c} rows={currentSection.rows} />;
case 'telechargement':
return <DownloadLink data={c} rows={currentSection.rows} />;
case 'carte-telechargement':
return <DownloadCard data={c} rows={currentSection.rows} />;
}
})}
</div>
);
}
}
break;
}
break;
}
})}
})}
</div>
</div>
</div>
</>
);
Expand Down
Loading