Toogether/Webapp
2
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

feat: move class selection to profile dropdown in header for improved user experience

Browse Source
This commit is contained in:
Rémi 2025-01-06 11:49:51 +01:00
parent de8742437f
commit b3c6ae2460
1 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/components/Header/contents.tsx
View File

@ -46,29 +46,6 @@ export const HeaderContent = ({ user }: { user?: User }) => {
<NavbarBrand>
<p className="font-bold text-inherit">Toogether</p>
</NavbarBrand>
<NavbarContent as="div" justify="center">
<Autocomplete
size="sm"
label="Select an class"
value={selectedClass?.name}
selectedKey={selectedClass?.id}
onSelectionChange={(selectedId) => {
const inputSelectedClass = classes.find(
(Class) => Class.id === selectedId,
);
if (inputSelectedClass)
setSelectedClassId(inputSelectedClass.id);
}}
>
{classes.map((Class) => (
<AutocompleteItem key={Class.id}>
{Class.name}
</AutocompleteItem>
))}
</Autocomplete>
</NavbarContent>
<NavbarContent as="div" justify="end">
{user?.roles.includes("admin") ? (
<NavbarItem>
@ -98,11 +75,38 @@ export const HeaderContent = ({ user }: { user?: User }) => {
size="sm"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<DropdownMenu
aria-label="Profile Actions"
variant="flat"
closeOnSelect={false}
>
<DropdownItem key="profile" className="h-14 gap-2" showDivider>
<p>Signed in as</p>
<p className="font-semibold">{user?.name}</p>
</DropdownItem>
<DropdownItem key="class" className="h-14 gap-2">
<Autocomplete
size="sm"
label="Select an class"
value={selectedClass?.name}
selectedKey={selectedClass?.id}
onSelectionChange={(selectedId) => {
const inputSelectedClass = classes.find(
(Class) => Class.id === selectedId,
);
if (inputSelectedClass)
setSelectedClassId(
inputSelectedClass.id,
);
}}
>
{classes.map((Class) => (
<AutocompleteItem key={Class.id}>
{Class.name}
</AutocompleteItem>
))}
</Autocomplete>
</DropdownItem>
<DropdownItem key="settings">Settings</DropdownItem>
<DropdownItem
key="logout"