Style/setting

src/components/common/Header.tsx

@@ -92,7 +92,7 @@ function Header() {
                             className="relative flex justify-around items-center w-full">
                             <ProfileImageCircle profileUrl={loginState.profileUrl} onClick={handleDropDown}/>
                             <div
-                                className={`${isOpen ? "" : "hidden"} absolute z-50 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
+                                className={`${isOpen ? "" : "hidden"} absolute z-99 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
                                 <div className="flex flex-col gap-1 px-4 py-3 text-sm text-gray-900">
                                     <div className="font-medium truncate">{loginState.username}</div>
                                     <div className="font-medium truncate">{loginState.email}</div>

src/components/setting/SettingSideBar.tsx

@@ -3,9 +3,9 @@ interface TabType {
     title: string;
 }
 
-function SettingSideBar({setSelectedSection}: {
+function SettingSideBar({setSelectedSection, side}: {
     setSelectedSection: (section: string) => void,
-    side?: boolean,
+    side: boolean,
 }) {
 
     const tabList: TabType[] = [
@@ -23,7 +23,7 @@ function SettingSideBar({setSelectedSection}: {
 
     return (
         <div
-            className="w-52 h-full flex-col justify-start items-start">
+            className={`w-48 h-full flex-col justify-start items-start ${side && "pt-16 px-4 bg-gray-50 h-screen"}`}>
             <ul className="w-full flex flex-col gap-y-1.5 flex-wrap">
                 {tabList.map((tab) =>
                     <li key={tab.section}>

src/pages/blog/BlogPage.tsx

@@ -212,9 +212,9 @@ function BlogPage() {
                 </div>
             </div>
             <div ref={sideBarRef}
-                 className={`${isOpen ? "block translate-x-0 overflow-y-scroll" : "hidden translate-x-full overflow-y-hidden"} !bg-orange-400 absolute top-0 right-0 w-96 flex-col
+                 className={`${isOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 right-0 w-96 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
-                <button className="absolute top-4 right-[calc(320px)] hover:cursor-pointer"
+                <button className="absolute top-6 left-6 hover:cursor-pointer"
                         onClick={() => setIsOpen(false)}>
                     <MdOutlineExitToApp className="size-8 text-gray-500"/>
                 </button>

src/pages/setting/SettingPage.tsx

@@ -1,12 +1,14 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import PostSettingPage from "./PostSettingPage.tsx";
 import ProfileSettingPage from "./ProfileSettingPage.tsx";
 import FolderSettingPage from "./FolderSettingPage.tsx";
 import {useNavigate, useParams} from "react-router-dom";
 import SettingSideBar from "../../components/setting/SettingSideBar.tsx";
 import {useSelector} from "react-redux";
 import {RootState} from "../../store.tsx";
+import IconButton from "../../components/common/IconButton.tsx";
+import {MdMenu, MdOutlineExitToApp} from "react-icons/md";
 
 function SettingPage() {
 
@@ -15,6 +17,22 @@ function SettingPage() {
     const navigate = useNavigate();
     const [selectedSection, setSelectedSection] = useState<string>(section || "profile");
 
+    const sideBarRef = useRef<HTMLDivElement | null>(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (sideBarRef.current && !sideBarRef.current.contains(event.target as Node)) {
+            setMenuOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     useEffect(() => {
         navigate(`/setting/${selectedSection}`);
     }, [selectedSection]);
@@ -32,18 +50,39 @@ function SettingPage() {
 
     return (
         <BasicLayout>
-            <div className="flex w-full gap-x-4">
-                <SettingSideBar setSelectedSection={setSelectedSection}/>
+            <div
+                ref={sideBarRef}
+                className={`${menuOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 left-0 flex-col
+                     transform transition-transform duration-300 ease-out z-20`}>
+                <button className="absolute top-6 right-6 hover:cursor-pointer"
+                        onClick={() => setMenuOpen(false)}>
+                    <MdOutlineExitToApp className="size-8 text-gray-500"/>
+                </button>
+                <SettingSideBar
+                    setSelectedSection={setSelectedSection}
+                    side={true}/>
+            </div>
+            <div className={`${(menuOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} px-4 flex flex-col md:flex-row w-full gap-x-4 md:gap-y-4`}>
+                <div className="hidden md:block">
+                    <SettingSideBar
+                        setSelectedSection={setSelectedSection}
+                        side={false}/>
+                </div>
+                <div className="block md:hidden">
+                    <IconButton
+                        icon={<MdMenu size={24}/>}
+                        onClick={() => setMenuOpen(prev => !prev)}/>
+                </div>
                 {(selectedSection === "profile") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <ProfileSettingPage/>
                     </div>}
                 {(selectedSection === "folder") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <FolderSettingPage/>
                     </div>}
                 {(selectedSection === "post") &&
-                    <div className="min-w-160 border-l border-gray-200 w-full ps-8">
+                    <div className="md:border-l border-gray-200 w-full ps-8">
                         <PostSettingPage/>
                     </div>}
             </div>