fix problem

src/index.css

@@ -47,3 +47,12 @@ textarea::placeholder {
   --color-description: #c3c7dd;
   --color-desc: #8c90a3;
 }
+
+::-webkit-scrollbar {
+  display: none;
+}
+body,
+html {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}

src/pages/editor/Editor.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import { type FC } from 'react'
 import EditorSidebar from './components/EditorSidebar'
 
-const Editor = () => {
+const Editor: FC = () => {
     return (
         <div>
             <EditorSidebar />

src/pages/editor/components/EditorSidebar.tsx

@@ -2,6 +2,7 @@
 import Logo from "@/assets/images/logo.svg";
 import { clx } from "@/helpers/utils";
 import { useSharedStore } from "@/shared/store/sharedStore";
+import { DocumentUpload, Element, Gallery, Grid8, Link, MouseSquare, Shapes, Sticker, Text, VideoSquare } from "iconsax-react";
 
 const EditorSidebar = () => {
     const { openSidebar, setOpenSidebar } = useSharedStore();
@@ -21,6 +22,41 @@ const EditorSidebar = () => {
                     <img src={Logo} alt="لوگو دانک" className="h-9" />
                 </div>
 
+                <div className="flex flex-1 min-h-0">
+                    <div className="flex h-full max-w-[92px] flex-1 flex-col items-center gap-6 overflow-y-auto border-l border-border">
+                        <div className="min-h-10">
+                            <MouseSquare size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Shapes size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Text size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Grid8 size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Sticker size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <DocumentUpload size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Element size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Gallery size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <VideoSquare size={20} color="black" />
+                        </div>
+                        <div className="min-h-10">
+                            <Link size={20} color="black" />
+                        </div>
+                    </div>
+                </div>
+
             </aside>
         </>
     );

src/pages/home/Home.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { type FC } from 'react'
 
-const Home = () => {
+const Home: FC = () => {
     return (
         <div>Home</div>
     )

src/shared/Header.tsx

@@ -46,6 +46,7 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
 
     useEffect(() => {
         setSearch('')
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.pathname])
 
     return (

src/shared/SideBar.tsx

@@ -45,8 +45,8 @@ const SideBar: FC = () => {
             <div
                 className={clx(
                     'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
-                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
-                    hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
+                    openSidebar && 'opacity-100 visible translate-x-0 block z-40',
+                    hasSubMenu && 'w-24 rounded-tl-none! rounded-bl-none!'
                 )}
             >
                 <div className='flex justify-center'>