Skip to content

Commit 558cc1a

Browse files
Julian Roelandsvenvandescheur
Julian Roeland
authored and
svenvandescheur
committed
🎨 - refactor: context logo
1 parent e6decbf commit 558cc1a

File tree

2 files changed

+116
-103
lines changed

2 files changed

+116
-103
lines changed

‎frontend/src/App.tsx

+110-101
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
ButtonLink,
66
Card,
77
Column,
8+
ConfigContext,
89
Dropdown,
910
Grid,
1011
H3,
@@ -96,110 +97,118 @@ function App() {
9697
description="Sommige instellingen zijn niet goed geconfigureerd, wat invloed kan hebben op hoe de app werkt. Controleer de instellingen en volg de instructies om dit op te lossen."
9798
/>
9899
)}
99-
<NavigationContext.Provider
100+
<ConfigContext.Provider
100101
value={{
101-
breadcrumbItems,
102-
primaryNavigationItems: [
103-
<Logo key="logo" />,
104-
{
105-
children: <Solid.HomeIcon />,
106-
title: "Home",
107-
// size: "xl",
108-
onClick: () => navigate("/destruction-lists"),
109-
},
110-
{
111-
children: <Solid.DocumentPlusIcon />,
112-
title: "Vernietigingslijst opstellen",
113-
hidden: user ? !canStartDestructionList(user) : true,
114-
// size: "xl",
115-
onClick: () => navigate("/destruction-lists/create"),
116-
},
117-
"spacer",
118-
<>
119-
{state !== "idle" ? (
120-
<P title="Bezig met laden...">
121-
<Solid.ArrowPathIcon
122-
spin
123-
stroke="var(--button-color-text-primary)"
124-
/>
125-
</P>
126-
) : undefined}
127-
</>,
128-
{
129-
children: <Outline.CogIcon />,
130-
title: "Instellingen",
131-
hidden: user ? !canChangeSettings(user) : true,
132-
// size: "xl",
133-
onClick: () => navigate("/settings"),
134-
},
135-
<Dropdown
136-
aria-label="Profiel"
137-
key="account"
138-
label={
139-
<IconInitials
140-
name={
141-
user
142-
? formatUser(user as User, { showUsername: false })
143-
: ""
144-
}
145-
/>
146-
}
147-
pad="v"
148-
variant="transparent"
149-
>
150-
<Body>
151-
<Card>
152-
<H3>Account</H3>
153-
<Hr />
154-
<Grid>
155-
<Column containerType="normal" span={2}>
156-
<IconInitials
157-
name={
158-
user
159-
? formatUser(user as User, { showUsername: false })
160-
: ""
161-
}
162-
/>
163-
</Column>
164-
<Column span={8}>
165-
<Grid gutter={false}>
166-
<Column span={12}>
167-
<P bold>
168-
{user?.firstName} {user?.lastName}
169-
</P>
170-
</Column>
171-
<Column span={12}>
172-
<P muted>{user?.email}</P>
173-
</Column>
174-
</Grid>
175-
</Column>
176-
<Hr />
177-
<Column span={6} />
178-
<Column span={6}>
179-
<ButtonLink
180-
href={"/logout"}
181-
variant="outline"
182-
wrap={false}
183-
>
184-
<Solid.ArrowRightEndOnRectangleIcon />
185-
Uitloggen
186-
</ButtonLink>
187-
</Column>
188-
</Grid>
189-
</Card>
190-
</Body>
191-
</Dropdown>,
192-
],
102+
logo: <Logo />,
193103
}}
194104
>
195-
<OidcConfigContext.Provider value={oidcInfo}>
196-
<ZaakSelectionContextProvider>
197-
<ModalService>
198-
<Outlet />
199-
</ModalService>
200-
</ZaakSelectionContextProvider>
201-
</OidcConfigContext.Provider>
202-
</NavigationContext.Provider>
105+
<NavigationContext.Provider
106+
value={{
107+
breadcrumbItems,
108+
primaryNavigationItems: [
109+
<Logo key="logo" width={32} />,
110+
{
111+
children: <Solid.HomeIcon />,
112+
title: "Home",
113+
// size: "xl",
114+
onClick: () => navigate("/destruction-lists"),
115+
},
116+
{
117+
children: <Solid.DocumentPlusIcon />,
118+
title: "Vernietigingslijst opstellen",
119+
hidden: user ? !canStartDestructionList(user) : true,
120+
// size: "xl",
121+
onClick: () => navigate("/destruction-lists/create"),
122+
},
123+
"spacer",
124+
<>
125+
{state !== "idle" ? (
126+
<P title="Bezig met laden...">
127+
<Solid.ArrowPathIcon
128+
spin
129+
stroke="var(--button-color-text-primary)"
130+
/>
131+
</P>
132+
) : undefined}
133+
</>,
134+
{
135+
children: <Outline.CogIcon />,
136+
title: "Instellingen",
137+
hidden: user ? !canChangeSettings(user) : true,
138+
// size: "xl",
139+
onClick: () => navigate("/settings"),
140+
},
141+
<Dropdown
142+
aria-label="Profiel"
143+
key="account"
144+
label={
145+
<IconInitials
146+
name={
147+
user
148+
? formatUser(user as User, { showUsername: false })
149+
: ""
150+
}
151+
/>
152+
}
153+
pad="v"
154+
variant="transparent"
155+
>
156+
<Body>
157+
<Card>
158+
<H3>Account</H3>
159+
<Hr />
160+
<Grid>
161+
<Column containerType="normal" span={2}>
162+
<IconInitials
163+
name={
164+
user
165+
? formatUser(user as User, {
166+
showUsername: false,
167+
})
168+
: ""
169+
}
170+
/>
171+
</Column>
172+
<Column span={8}>
173+
<Grid gutter={false}>
174+
<Column span={12}>
175+
<P bold>
176+
{user?.firstName} {user?.lastName}
177+
</P>
178+
</Column>
179+
<Column span={12}>
180+
<P muted>{user?.email}</P>
181+
</Column>
182+
</Grid>
183+
</Column>
184+
<Hr />
185+
<Column span={6} />
186+
<Column span={6}>
187+
<ButtonLink
188+
href={"/logout"}
189+
variant="outline"
190+
wrap={false}
191+
>
192+
<Solid.ArrowRightEndOnRectangleIcon />
193+
Uitloggen
194+
</ButtonLink>
195+
</Column>
196+
</Grid>
197+
</Card>
198+
</Body>
199+
</Dropdown>,
200+
],
201+
}}
202+
>
203+
<OidcConfigContext.Provider value={oidcInfo}>
204+
<ZaakSelectionContextProvider>
205+
<ModalService>
206+
<Outlet />
207+
</ModalService>
208+
</ZaakSelectionContextProvider>
209+
</OidcConfigContext.Provider>
210+
</NavigationContext.Provider>
211+
</ConfigContext.Provider>
203212
</div>
204213
);
205214
}

‎frontend/src/components/Logo/Logo.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
export function Logo() {
2-
return <img src="/logo.svg" alt="Open Archiefbeheer Logo" width={32} />;
1+
export type LogoProps = {
2+
width?: number;
3+
};
4+
5+
export function Logo({ width = 128 }: LogoProps) {
6+
return <img src="/logo.svg" alt="Open Archiefbeheer Logo" width={width} />;
37
}

0 commit comments

Comments
 (0)