From 12f685010bd54f26dce37fa75c00ec61fd1775a1 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 11 Jul 2023 16:31:30 +0900
Subject: [PATCH] Add icons for logout and delete account

---
 front/packages/primitives/src/menu.tsx     | 4 ++--
 front/packages/primitives/src/menu.web.tsx | 2 +-
 front/packages/ui/src/navbar/index.tsx     | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/front/packages/primitives/src/menu.tsx b/front/packages/primitives/src/menu.tsx
index 9db1f0ee..6663084c 100644
--- a/front/packages/primitives/src/menu.tsx
+++ b/front/packages/primitives/src/menu.tsx
@@ -145,8 +145,8 @@ const MenuItem = ({
 				props as any,
 			)}
 		>
-			{selected && <Icon icon={icon ?? Check} color={theme.paragraph} size={24} />}
-			<P {...css({ paddingLeft: ts(2) + +!selected * px(24) })}>{label}</P>
+			{(icon || selected) && <Icon icon={icon ?? Check} color={theme.paragraph} size={24} {...css({ paddingLeft: icon ? ts(2) : 0 })}/>}
+			<P {...css({ paddingLeft: ts(2) + +!(icon || selected) * px(24) })}>{label}</P>
 		</PressableFeedback>
 	);
 };
diff --git a/front/packages/primitives/src/menu.web.tsx b/front/packages/primitives/src/menu.web.tsx
index 1ffcd47c..b9ab0244 100644
--- a/front/packages/primitives/src/menu.web.tsx
+++ b/front/packages/primitives/src/menu.web.tsx
@@ -152,7 +152,7 @@ const MenuItem = ({
 					props as any,
 				)}
 			>
-				{selected && (
+				{(icon || selected) && (
 					<Icon
 						icon={icon ?? Dot}
 						color={theme.paragraph}
diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx
index f288f45a..99c4ac06 100644
--- a/front/packages/ui/src/navbar/index.tsx
+++ b/front/packages/ui/src/navbar/index.tsx
@@ -49,6 +49,8 @@ import { useRouter } from "solito/router";
 import { px, rem, Stylable, useYoshiki } from "yoshiki/native";
 import MenuIcon from "@material-symbols/svg-400/rounded/menu-fill.svg";
 import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
+import Logout from "@material-symbols/svg-400/rounded/logout.svg";
+import Delete from "@material-symbols/svg-400/rounded/delete.svg";
 import { Fetch, FetchNE } from "../fetch";
 import { KyooLongLogo } from "./icon";
 import { forwardRef, useRef, useState } from "react";
@@ -127,6 +129,7 @@ export const NavbarProfile = () => {
 						<>
 							<Menu.Item
 								label={t("login.logout")}
+								icon={Logout}
 								onSelect={async () => {
 									await logout();
 									queryClient.invalidateQueries(["auth", "me"]);
@@ -134,6 +137,7 @@ export const NavbarProfile = () => {
 							/>
 							<Menu.Item
 								label={t("login.delete")}
+								icon={Delete}
 								onSelect={async () => {
 									Alert.alert(
 										t("login.delete"),