design dashboard comments & messages & modals

2024-09-04 03:00:36 +03:30
parent bc47663002
commit 52a745fcb8
34 changed files with 669 additions and 128 deletions
@@ -1,17 +1,36 @@
+import { useState } from "react"
 import Head from "./Head"
 import List from "./List"

-function Sidebar({ user }) {
+function Sidebar({ user, value, setValue }) {
+
+    const [open, setOpen] = useState(false);
+
    return (
-        <aside
-            className="h-fit lg:h-screen w-full lg:w-[39%]"
-        >
-            <div className="sticky pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
-            min-w-[288px] top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]">
-                <Head user={user} />
-                <List user={user} />
-            </div>
-        </aside>
+        // ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
+        <div className="flex-1 w-[28%]">
+
+            <aside
+                // className={`
+                //     flex-1 overflow-hidden lg:w-[39%] w-full
+                // `}
+                className="
+                sticky top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]"
+            >
+                <div className="
+                
+                pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
+               
+            ">
+                    <Head user={user} />
+                    <List
+                        user={user}
+                        value={value}
+                        setValue={setValue}
+                    />
+                </div>
+            </aside>
+        </div>
    )
 }