✨ add option nav

src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/classes.module.scss

@@ -10,6 +10,18 @@
 
 	background: var(--dropdown-option-background-default, #fff);
 
+	svg {
+		width: 24px;
+		height: 24px;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		flex: 1 0 0;
+	}
+
 	&:hover {
 		background-color: var(--dropdown-option-background-hovered);
 	}

src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/index.tsx

@@ -1,13 +1,13 @@
+import IconButton from "@Front/Components/DesignSystem/IconButton";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import IconButton from "@Front/Components/DesignSystem/IconButton";
 
 export type IOption = {
 	id: string;
-	label: string;
+	label: string | { text: string; subtext: string };
 };
 
 type IProps = {
@@ -23,12 +23,34 @@ export default function DropdownOption(props: IProps) {
 
 	return (
 		<div className={classes["root"]} onClick={handleOnClick}>
+			{getContent(option.label)}
+			{isActive && <CheckIcon />}
+		</div>
+	);
+
+	function getContent(label: string | { text: string; subtext: string }) {
+		if (typeof label === "string") {
+			return (
 				<Typography
 					typo={isActive ? ETypo.TEXT_MD_SEMIBOLD : ETypo.TEXT_MD_REGULAR}
 					color={isActive ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
-				{option.label}
+					{label}
+				</Typography>
+			);
+		}
+		return (
+			<div className={classes["content"]}>
+				<Typography
+					typo={ETypo.TEXT_MD_LIGHT}
+					color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					{label.text}
+				</Typography>
+				<Typography
+					typo={ETypo.TEXT_MD_BOLD}
+					color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					{label.subtext}
 				</Typography>
-			{isActive && <IconButton icon={<CheckIcon />} />}
 			</div>
 		);
+	}
 }

src/front/Components/DesignSystem/Dropdown/index.tsx

@@ -34,11 +34,19 @@ export default function Dropdown(props: IProps) {
 					<Typography
 						typo={ETypo.TEXT_MD_REGULAR}
 						color={!!selectedOption ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
-						{selectedOption?.label ?? placeholder}
+						{getLabel(selectedOption) ?? placeholder}
 					</Typography>
 				</div>
 				<IconButton icon={<ChevronDownIcon />} />
 			</div>
 		</DropdownMenu>
 	);
+
+	function getLabel(option: IOption | null): string | null {
+		if (!option) return null;
+		if (typeof option.label === "string") {
+			return option.label;
+		}
+		return `${option.label.text} ${option.label.subtext}`;
+	}
 }

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -97,6 +97,10 @@ export default function DesignSystem() {
 								id: "3",
 								label: "Option 3",
 							},
+							{
+								id: "4",
+								label: { text: "Option 4", subtext: "Subtext" },
+							},
 						]}
 						placeholder="Placeholder"
 					/>