create main menu and dropdown menu

package.json

@@ -10,6 +10,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.15
+        version: 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-toast':
         specifier: ^1.2.14
         version: 1.2.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)

src/components/main-menu/chat-cell.tsx

@@ -0,0 +1,71 @@
+import { Dropdown } from "../ui/dropdown";
+import { cn } from "@/lib/utils";
+import { Link, useMatchRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import ThreeDots from "@/icons/three-dots.svg?react";
+import Edit from "@/icons/edit.svg?react";
+import Share from "@/icons/share.svg?react";
+import Trash from "@/icons/trash.svg?react";
+
+export const ChatCell = ({ chat }: { chat: { id: string; title: string } }) => {
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+	const matchRoute = useMatchRoute();
+	const match = matchRoute({ to: "/interaction-panel/$id", fuzzy: true });
+
+	const activeChatId = match ? match.id : undefined;
+
+	const DROPDOWN_OPTIONS = [
+		{
+			name: "Share",
+			icon: <Share />,
+			onClick: () => console.log("1"),
+		},
+		{
+			name: "Rename",
+			icon: <Edit />,
+			onClick: () => console.log("2"),
+		},
+		{
+			name: "Delete",
+			icon: <Trash />,
+			onClick: () => console.log("3"),
+			className: "text-feedback-negative-900",
+		},
+	];
+
+	return (
+		<div
+			data-active={activeChatId === chat.id}
+			className="data-[active=true]:bg-fill-150  block rounded-md h-10  hover:bg-fill-100 cursor-pointer transition-colors group flex items-center"
+		>
+			<Link
+				to="/interaction-panel/$id"
+				params={{ id: chat.id }}
+				viewTransition={{ types: ["warp"] }}
+				key={chat.id}
+				className="flex-1  h-full items-center flex pl-3"
+			>
+				<div className="text-sm font-medium text-text-light-900 truncate">
+					{chat.title}
+				</div>
+			</Link>
+
+			<Dropdown
+				options={DROPDOWN_OPTIONS}
+				isOpen={isDropdownOpen}
+				onToggle={() => setIsDropdownOpen(!isDropdownOpen)}
+				className="cursor-pointer flex items-center pr-3  justify-end w-5 h-full"
+			>
+				<ThreeDots
+					className={cn(
+						"duration-300",
+						isDropdownOpen
+							? "opacity-100"
+							: "opacity-0 group-hover:opacity-100",
+					)}
+				/>
+			</Dropdown>
+		</div>
+	);
+};

src/components/main-menu/main-menu.tsx

@@ -4,16 +4,19 @@ import Plus from "@/icons/plus.svg?react";
 import Books from "@/icons/books.svg?react";
 import Discord from "@/icons/discord.svg?react";
 import Profile from "@/icons/profile.svg?react";
-import ThreeDots from "@/icons/three-dots.svg?react";
+import Settings from "@/icons/settings.svg?react";
+import SignOut from "@/icons/sign-out.svg?react";
 
 import { LINKS } from "@/lib/constants";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Button, type ButtonVariantType } from "../ui/button";
-import { Link, useMatchRoute, useParams } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 
 import Logo from "@/icons/logo.svg?react";
 import LogoWithText from "@/icons/logo-with-text.svg?react";
 import Sidebar from "@/icons/sidebar.svg?react";
+import { ChatCell } from "./chat-cell";
+import { Dropdown } from "../ui/dropdown";
 
 interface MenuItemType extends ButtonVariantType {
 	name: string;
@@ -21,27 +24,6 @@ interface MenuItemType extends ButtonVariantType {
 	path: string;
 }
 
-const MENU_ITEMS: MenuItemType[] = [
-	{
-		name: "New Chat",
-		icon: <Plus className="scale-80" />,
-		path: "/",
-		variant: "primary",
-	},
-	{
-		name: "All chats",
-		icon: <Books className="scale-90" />,
-		path: "/all-chats",
-		variant: "secondary",
-	},
-	{
-		name: "Support",
-		icon: <Discord width={12} height={12} className="text-[#5865F2]" />,
-		path: LINKS.discord,
-		variant: "secondary",
-	},
-];
-
 const MainMenu = observer(() => {
 	const { isMainMenuOpen } = useAccountStore();
 
@@ -61,6 +43,8 @@ const MOCK_CHATS = Array.from({ length: 20 }, (_, i) => ({
 }));
 
 const MainMenuContent = observer(() => {
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
 	const { isMainMenuOpen, setIsMainMenuOpen } = useAccountStore();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [hasScrolled, setHasScrolled] = useState(false);
@@ -81,6 +65,25 @@ const MainMenuContent = observer(() => {
 		};
 	}, []);
 
+	const DROPDOWN_OPTIONS = [
+		{
+			name: "user-mail",
+			icon: <Profile />,
+			onClick: () => console.log("1"),
+			className: "text-text-light-500",
+		},
+		{
+			name: "Settings",
+			icon: <Settings />,
+			onClick: () => console.log("2"),
+		},
+		{
+			name: "Sigh out",
+			icon: <SignOut />,
+			onClick: () => console.log("3"),
+		},
+	];
+
 	return (
 		<div
 			data-open={isMainMenuOpen}
@@ -145,20 +148,28 @@ const MainMenuContent = observer(() => {
 				</ul>
 			</div>
 
-			<footer className="sticky bottom-0 z-10 bg-white w-full p-4 border-t border-fill-150">
+			<footer className="sticky bottom-0 z-10 bg-white w-full p-4 border-t border-fill-150 w-full">
-				<Button
+				<Dropdown
-					data-open={isMainMenuOpen}
+					options={DROPDOWN_OPTIONS}
-					className="w-8 h-8 p-2 transition-all data-[open=true]:w-full data-[open=true]:h-10 items-center justify-start data-[open=true]:py-2 data-[open=true]:px-4"
+					isOpen={isDropdownOpen}
-					variant="secondary"
+					onToggle={() => setIsDropdownOpen(!isDropdownOpen)}
+					classNameContent="min-w-[200px]"
+					classNameTrigger="w-[195px]"
 				>
-					<Profile />
+					<Button
-					<div
 						data-open={isMainMenuOpen}
-						className="data-[open=true]:opacity-100 opacity-0 transition-opacity duration-200 font-[500] text-[14px]"
+						className="w-8 h-8 p-2 transition-all data-[open=true]:w-full data-[open=true]:h-10 items-center justify-start data-[open=true]:py-2 data-[open=true]:px-4"
+						variant="secondary"
 					>
-						username
+						<Profile />
-					</div>
+						<div
-				</Button>
+							data-open={isMainMenuOpen}
+							className="data-[open=true]:opacity-100 opacity-0 transition-opacity duration-200 font-[500] text-[14px]"
+						>
+							username
+						</div>
+					</Button>
+				</Dropdown>
 			</footer>
 		</div>
 	);
@@ -190,37 +201,25 @@ const MenuItem = ({ item }: { item: MenuItemType }) => {
 	);
 };
 
-const ChatCell = ({ chat }: { chat: { id: string; title: string } }) => {
+const MENU_ITEMS: MenuItemType[] = [
-	const matchRoute = useMatchRoute();
+	{
-	const match = matchRoute({ to: "/interaction-panel/$id", fuzzy: true });
+		name: "New Chat",
-
+		icon: <Plus className="scale-80" />,
-	const activeChatId = match ? match.id : undefined;
+		path: "/",
-
+		variant: "primary",
-	return (
+	},
-		<div
+	{
-			data-active={activeChatId === chat.id}
+		name: "All chats",
-			className="data-[active=true]:bg-fill-150 block rounded-md h-10  hover:bg-fill-100 cursor-pointer transition-colors group flex items-center"
+		icon: <Books className="scale-90" />,
-		>
+		path: "/all-chats",
-			<Link
+		variant: "secondary",
-				to="/interaction-panel/$id"
+	},
-				params={{ id: chat.id }}
+	{
-				viewTransition={{ types: ["warp"] }}
+		name: "Support",
-				key={chat.id}
+		icon: <Discord width={12} height={12} className="text-[#5865F2]" />,
-				className="flex-1  h-full items-center flex pl-3"
+		path: LINKS.discord,
-			>
+		variant: "secondary",
-				<div className="text-sm font-medium text-text-light-900 truncate">
+	},
-					{chat.title}
+];
-				</div>
-			</Link>
-
-			<button
-				className="opacity-0 group-hover:opacity-100 duration-300 cursor-pointer flex items-center pr-3  justify-end   w-5 h-full"
-				type="button"
-			>
-				<ThreeDots />
-			</button>
-		</div>
-	);
-};
 
 export { MainMenu, MenuItem, MENU_ITEMS, MainMenuContent };

src/components/ui/dropdown.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { FC, type ReactNode } from "react";
+import clsx from "clsx";
+import { cn } from "@/lib/utils";
+
+interface DropdownOption {
+	name: string;
+	icon?: ReactNode;
+	onClick: () => void;
+	className?: string;
+}
+
+interface DropdownProps {
+	children: ReactNode;
+	options: DropdownOption[];
+	isOpen: boolean;
+	onToggle: () => void;
+	classNameContent?: string;
+	classNameTrigger?: string;
+}
+
+const Dropdown: FC<DropdownProps> = ({
+	children,
+	options = [],
+	isOpen,
+	onToggle,
+	classNameContent = "",
+	classNameTrigger = "",
+}) => {
+	return (
+		<DropdownMenu.Root open={isOpen} onOpenChange={onToggle}>
+			<DropdownMenu.Trigger asChild>
+				<button
+					type="button"
+					className={clsx(
+						"inline-flex items-center focus:outline-none",
+						classNameTrigger,
+					)}
+					aria-haspopup="true"
+					aria-expanded={isOpen}
+				>
+					{children}
+				</button>
+			</DropdownMenu.Trigger>
+
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content
+					className={clsx(
+						"z-50 overflow-hidden p-2 bg-white border border-fill-150 rounded-[16px] min-w-[130px]",
+						classNameContent,
+					)}
+					side="bottom"
+					align="start"
+					style={{ boxShadow: "0px 4px 10px 0px #00000014" }}
+					sideOffset={8}
+				>
+					{options.map((option, index) => (
+						<DropdownMenu.Item
+							key={`${option.name}-${index}`}
+							onSelect={(e) => {
+								e.preventDefault();
+								option.onClick();
+							}}
+							className={cn(
+								"focus:outline-none flex items-center gap-2 h-8 px-2 text-sm text-text-light-900 hover:bg-fill-100 cursor-pointer rounded-[8px] transition-colors",
+								option.className,
+							)}
+						>
+							{option.icon && (
+								<span className="w-4 h-4 flex items-center justify-center text-inherit">
+									{option.icon}
+								</span>
+							)}
+							<span>{option.name}</span>
+						</DropdownMenu.Item>
+					))}
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+};
+
+export { Dropdown };

src/icons/edit.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2069 3.58561L9.41438 0.792486C9.32152 0.699603 9.21127 0.625923 9.08993 0.575654C8.96859 0.525385 8.83853 0.499512 8.70719 0.499512C8.57585 0.499512 8.4458 0.525385 8.32446 0.575654C8.20312 0.625923 8.09287 0.699603 8 0.792486L0.29313 8.49998C0.199867 8.59251 0.125926 8.70265 0.0756045 8.824C0.025283 8.94535 -0.000414649 9.07549 5.05934e-06 9.20686V12C5.05934e-06 12.2652 0.105362 12.5196 0.292898 12.7071C0.480435 12.8946 0.734788 13 1 13H3.79313C3.9245 13.0004 4.05464 12.9747 4.17599 12.9244C4.29735 12.8741 4.40748 12.8001 4.5 12.7069L12.2069 4.99999C12.2998 4.90712 12.3734 4.79687 12.4237 4.67553C12.474 4.55419 12.4999 4.42414 12.4999 4.2928C12.4999 4.16146 12.474 4.0314 12.4237 3.91006C12.3734 3.78872 12.2998 3.67847 12.2069 3.58561ZM3.79313 12H1V9.20686L6.5 3.70686L9.29313 6.49999L3.79313 12ZM10 5.79249L7.20688 2.99999L8.70688 1.49999L11.5 4.29249L10 5.79249Z" fill="currentColor"/>
+</svg>

src/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 6.5H12.4769C12.4207 5.87498 12.257 5.26436 11.9931 4.695L12.8794 4.18313C12.9942 4.11682 13.0781 4.0076 13.1124 3.87949C13.1468 3.75138 13.1288 3.61487 13.0625 3.5C12.9962 3.38513 12.887 3.3013 12.7589 3.26696C12.6308 3.23262 12.4942 3.25057 12.3794 3.31687L11.4919 3.82937C11.1293 3.31744 10.6826 2.87069 10.1706 2.50813L10.6831 1.62063C10.7494 1.50575 10.7674 1.36925 10.733 1.24114C10.6987 1.11303 10.6149 1.0038 10.5 0.9375C10.3851 0.871196 10.2486 0.85324 10.1205 0.887583C9.9924 0.921925 9.88318 1.00575 9.81688 1.12063L9.305 2.00688C8.73564 1.74299 8.12502 1.57934 7.5 1.52312V0.5C7.5 0.367392 7.44732 0.240215 7.35355 0.146447C7.25979 0.0526784 7.13261 0 7 0C6.86739 0 6.74021 0.0526784 6.64645 0.146447C6.55268 0.240215 6.5 0.367392 6.5 0.5V1.52312C5.87498 1.57934 5.26436 1.74299 4.695 2.00688L4.18313 1.12063C4.15029 1.06375 4.10658 1.01389 4.05448 0.973905C4.00239 0.93392 3.94292 0.904587 3.87949 0.887583C3.81605 0.870578 3.74989 0.866234 3.68478 0.874799C3.61967 0.883364 3.55688 0.90467 3.5 0.9375C3.38513 1.0038 3.3013 1.11303 3.26696 1.24114C3.23262 1.36925 3.25057 1.50575 3.31687 1.62063L3.82937 2.50813C3.31744 2.87069 2.87069 3.31744 2.50813 3.82937L1.62063 3.31687C1.50575 3.25057 1.36925 3.23262 1.24114 3.26696C1.11303 3.3013 1.0038 3.38513 0.9375 3.5C0.871196 3.61487 0.85324 3.75138 0.887583 3.87949C0.921925 4.0076 1.00575 4.11682 1.12063 4.18313L2.00688 4.695C1.74299 5.26436 1.57934 5.87498 1.52312 6.5H0.5C0.367392 6.5 0.240215 6.55268 0.146447 6.64645C0.0526784 6.74021 0 6.86739 0 7C0 7.13261 0.0526784 7.25979 0.146447 7.35355C0.240215 7.44732 0.367392 7.5 0.5 7.5H1.52312C1.57934 8.12502 1.74299 8.73564 2.00688 9.305L1.12063 9.81688C1.02525 9.87188 0.950695 9.95684 0.908536 10.0585C0.866377 10.1603 0.85897 10.273 0.887464 10.3794C0.915957 10.4857 0.978758 10.5797 1.06612 10.6467C1.15348 10.7137 1.26052 10.75 1.37063 10.75C1.45841 10.7503 1.5447 10.7272 1.62063 10.6831L2.50813 10.1706C2.87069 10.6826 3.31744 11.1293 3.82937 11.4919L3.31687 12.3794C3.25057 12.4942 3.23262 12.6308 3.26696 12.7589C3.3013 12.887 3.38513 12.9962 3.5 13.0625C3.61487 13.1288 3.75138 13.1468 3.87949 13.1124C4.0076 13.0781 4.11682 12.9942 4.18313 12.8794L4.695 11.9931C5.26436 12.257 5.87498 12.4207 6.5 12.4769V13.5C6.5 13.6326 6.55268 13.7598 6.64645 13.8536C6.74021 13.9473 6.86739 14 7 14C7.13261 14 7.25979 13.9473 7.35355 13.8536C7.44732 13.7598 7.5 13.6326 7.5 13.5V12.4769C8.12502 12.4207 8.73564 12.257 9.305 11.9931L9.81688 12.8794C9.88318 12.9942 9.9924 13.0781 10.1205 13.1124C10.2486 13.1468 10.3851 13.1288 10.5 13.0625C10.6149 12.9962 10.6987 12.887 10.733 12.7589C10.7674 12.6308 10.7494 12.4942 10.6831 12.3794L10.1706 11.4919C10.6826 11.1293 11.1293 10.6826 11.4919 10.1706L12.3794 10.6831C12.4363 10.716 12.499 10.7373 12.5642 10.7459C12.6293 10.7544 12.6954 10.7501 12.7589 10.7331C12.8223 10.7161 12.8818 10.6867 12.9339 10.6467C12.986 10.6068 13.0297 10.5569 13.0625 10.5C13.1289 10.3852 13.1469 10.2488 13.1127 10.1206C13.0785 9.99253 12.9948 9.88327 12.88 9.81688L11.9937 9.305C12.2574 8.7356 12.4209 8.12498 12.4769 7.5H13.5C13.6326 7.5 13.7598 7.44732 13.8536 7.35355C13.9473 7.25979 14 7.13261 14 7C14 6.86739 13.9473 6.74021 13.8536 6.64645C13.7598 6.55268 13.6326 6.5 13.5 6.5ZM7 2.5C8.10643 2.50132 9.17369 2.90976 9.99831 3.64746C10.8229 4.38517 11.3472 5.40054 11.4712 6.5H7.28875L5.1975 2.87812C5.76561 2.62843 6.37944 2.49966 7 2.5ZM2.5 7C2.50038 6.2951 2.66636 5.60015 2.98455 4.97115C3.30274 4.34215 3.76424 3.7967 4.33187 3.37875L6.4225 7L4.33187 10.6213C3.76424 10.2033 3.30274 9.65785 2.98455 9.02885C2.66636 8.39985 2.50038 7.7049 2.5 7ZM7 11.5C6.37967 11.5013 5.76584 11.3736 5.1975 11.125L7.28875 7.5H11.4712C11.3472 8.59946 10.8229 9.61483 9.99831 10.3525C9.17369 11.0902 8.10643 11.4987 7 11.5Z" fill="currentColor"/>
+</svg>

src/icons/share.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.5C12 4.63261 11.9473 4.75979 11.8536 4.85355C11.7598 4.94732 11.6326 5 11.5 5C11.3674 5 11.2402 4.94732 11.1464 4.85355C11.0527 4.75979 11 4.63261 11 4.5V1.7075L6.85437 5.85375C6.76055 5.94757 6.63331 6.00028 6.50062 6.00028C6.36794 6.00028 6.2407 5.94757 6.14688 5.85375C6.05305 5.75993 6.00035 5.63268 6.00035 5.5C6.00035 5.36732 6.05305 5.24007 6.14688 5.14625L10.2925 1H7.5C7.36739 1 7.24021 0.947321 7.14645 0.853553C7.05268 0.759785 7 0.632608 7 0.5C7 0.367392 7.05268 0.240215 7.14645 0.146447C7.24021 0.0526785 7.36739 0 7.5 0H11.5C11.6326 0 11.7598 0.0526785 11.8536 0.146447C11.9473 0.240215 12 0.367392 12 0.5V4.5ZM9.5 6C9.36739 6 9.24021 6.05268 9.14645 6.14645C9.05268 6.24021 9 6.36739 9 6.5V11H1V3H5.5C5.63261 3 5.75979 2.94732 5.85355 2.85355C5.94732 2.75979 6 2.63261 6 2.5C6 2.36739 5.94732 2.24021 5.85355 2.14645C5.75979 2.05268 5.63261 2 5.5 2H1C0.734784 2 0.48043 2.10536 0.292893 2.29289C0.105357 2.48043 0 2.73478 0 3V11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H9C9.26522 12 9.51957 11.8946 9.70711 11.7071C9.89464 11.5196 10 11.2652 10 11V6.5C10 6.36739 9.94732 6.24021 9.85355 6.14645C9.75979 6.05268 9.63261 6 9.5 6Z" fill="currentColor"/>
+</svg>

src/icons/sign-out.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 11.5C5.5 11.6326 5.44732 11.7598 5.35355 11.8536C5.25979 11.9473 5.13261 12 5 12H1C0.867392 12 0.740215 11.9473 0.646447 11.8536C0.552679 11.7598 0.5 11.6326 0.5 11.5V0.5C0.5 0.367392 0.552679 0.240215 0.646447 0.146447C0.740215 0.0526785 0.867392 0 1 0H5C5.13261 0 5.25979 0.0526785 5.35355 0.146447C5.44732 0.240215 5.5 0.367392 5.5 0.5C5.5 0.632608 5.44732 0.759785 5.35355 0.853553C5.25979 0.947321 5.13261 1 5 1H1.5V11H5C5.13261 11 5.25979 11.0527 5.35355 11.1464C5.44732 11.2402 5.5 11.3674 5.5 11.5ZM12.3538 5.64625L9.85375 3.14625C9.75993 3.05243 9.63268 2.99972 9.5 2.99972C9.36732 2.99972 9.24007 3.05243 9.14625 3.14625C9.05243 3.24007 8.99972 3.36732 8.99972 3.5C8.99972 3.63268 9.05243 3.75993 9.14625 3.85375L10.7931 5.5H5C4.86739 5.5 4.74021 5.55268 4.64645 5.64645C4.55268 5.74021 4.5 5.86739 4.5 6C4.5 6.13261 4.55268 6.25979 4.64645 6.35355C4.74021 6.44732 4.86739 6.5 5 6.5H10.7931L9.14625 8.14625C9.05243 8.24007 8.99972 8.36732 8.99972 8.5C8.99972 8.63268 9.05243 8.75993 9.14625 8.85375C9.24007 8.94757 9.36732 9.00028 9.5 9.00028C9.63268 9.00028 9.75993 8.94757 9.85375 8.85375L12.3538 6.35375C12.4002 6.30731 12.4371 6.25217 12.4623 6.19147C12.4874 6.13077 12.5004 6.06571 12.5004 6C12.5004 5.93429 12.4874 5.86923 12.4623 5.80853C12.4371 5.74783 12.4002 5.69269 12.3538 5.64625Z" fill="currentColor"/>
+</svg>

src/icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 2H0.5C0.367392 2 0.240215 2.05268 0.146447 2.14645C0.0526785 2.24021 0 2.36739 0 2.5C0 2.63261 0.0526785 2.75979 0.146447 2.85355C0.240215 2.94732 0.367392 3 0.5 3H1V12C1 12.2652 1.10536 12.5196 1.29289 12.7071C1.48043 12.8946 1.73478 13 2 13H10C10.2652 13 10.5196 12.8946 10.7071 12.7071C10.8946 12.5196 11 12.2652 11 12V3H11.5C11.6326 3 11.7598 2.94732 11.8536 2.85355C11.9473 2.75979 12 2.63261 12 2.5C12 2.36739 11.9473 2.24021 11.8536 2.14645C11.7598 2.05268 11.6326 2 11.5 2ZM10 12H2V3H10V12ZM3 0.5C3 0.367392 3.05268 0.240215 3.14645 0.146447C3.24021 0.0526784 3.36739 0 3.5 0H8.5C8.63261 0 8.75979 0.0526784 8.85355 0.146447C8.94732 0.240215 9 0.367392 9 0.5C9 0.632608 8.94732 0.759785 8.85355 0.853553C8.75979 0.947322 8.63261 1 8.5 1H3.5C3.36739 1 3.24021 0.947322 3.14645 0.853553C3.05268 0.759785 3 0.632608 3 0.5Z" fill="currentColor"/>
+</svg>