base structure

src/pages/editor/Editor.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import EditorSidebar from './components/EditorSidebar'
+
+const Editor = () => {
+    return (
+        <div>
+            <EditorSidebar />
+        </div>
+    )
+}
+
+export default Editor

src/pages/editor/components/EditorSidebar.tsx

@@ -0,0 +1,30 @@
+
+import Logo from "@/assets/images/logo.svg";
+import { clx } from "@/helpers/utils";
+import { useSharedStore } from "@/shared/store/sharedStore";
+
+const EditorSidebar = () => {
+    const { openSidebar, setOpenSidebar } = useSharedStore();
+
+    return (
+        <>
+            {openSidebar ? (
+                <div className="fixed inset-0 z-10 bg-black/50" onClick={() => setOpenSidebar(false)} />
+            ) : null}
+            <aside
+                className={clx(
+                    "fixed right-0 top-0 bottom-0 flex translate-x-[420px] w-[350px] flex-col bg-white px-8 py-10 opacity-0 transition-all ease-in-out xl:visible xl:right-4 xl:top-4 xl:bottom-4 xl:translate-x-0 xl:rounded-[32px] xl:bg-white xl:px-8 xl:py-10 xl:opacity-100",
+                    openSidebar && "z-40 translate-x-0 opacity-100",
+                )}
+            >
+                <div className="mb-10 flex items-center justify-center">
+                    <img src={Logo} alt="لوگو دانک" className="h-9" />
+                </div>
+
+            </aside>
+        </>
+    );
+};
+
+export default EditorSidebar;
+