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

src/app/components/Header/contents.tsx

@@ -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">
+					<DropdownMenu
-						<DropdownItem key="profile" className="h-14 gap-2">
+						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"