From a57dfce108af080e4162dce0b76cfeb18f7f47a4 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Fri, 7 Apr 2023 18:17:26 +0800
Subject: [PATCH] style: folder icon

---
 src/components/Menu/ChatFolder.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 365c83e..f7fcd71 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -146,7 +146,9 @@ const ChatFolder = ({
 
   return (
     <div
-      className={`w-full transition-colors ${isHover ? 'bg-gray-800/40' : ''}`}
+      className={`w-full transition-colors group/folder ${
+        isHover ? 'bg-gray-800/40' : ''
+      }`}
       onDrop={handleDrop}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -215,7 +217,7 @@ const ChatFolder = ({
             </>
           ) : (
             <>
-              <div className='relative'>
+              <div className='relative md:hidden group-hover/folder:md:inline'>
                 <button
                   className='p-1 hover:text-white'
                   onClick={() => {
@@ -250,13 +252,13 @@ const ChatFolder = ({
               </div>
 
               <button
-                className='p-1 hover:text-white'
+                className='p-1 hover:text-white md:hidden group-hover/folder:md:inline'
                 onClick={() => setIsEdit(true)}
               >
                 <EditIcon />
               </button>
               <button
-                className='p-1 hover:text-white'
+                className='p-1 hover:text-white md:hidden group-hover/folder:md:inline'
                 onClick={() => setIsDelete(true)}
               >
                 <DeleteIcon />