update

src/App.js

@@ -73,7 +73,7 @@ function App() {
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-        {/* <CourseChapter /> */}
+        <CourseChapter />
         {/* <SidebarMenu /> */}
         <SidebarDesign2 />
       </div>

src/components/Sidebar/SidebarDesign2/index.js

@@ -22,7 +22,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
     <section>
       <div
         style={{ width: "20%" }}
-        className="bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar"
+        className="bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative"
       >
         {/* profile */}
         <div className="flex flex-row items-center">
@@ -52,8 +52,9 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
             <p className="text-xs text-blue-800 my-2">{item.title}</p>
             {/* menu items */}
             {item.menuItems.map((menuItem, index) => (
+              <div className="flex flex-col justify-center">
                 <div
-                key={i}
+                  key={index}
                   className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
                 >
                   <img src={menuItem.icon} alt="" className="w-7 h-7" />
@@ -69,12 +70,39 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                       </span>
                     </div>
                   )}
+                  {menuItem.leftIcon && <img src={menuItem.leftIcon} alt="" />}
+                </div>
+                {menuItem.menuSubItems.map((menuSubItem, indexx) => (
+                  <div
+                    className="flex flex-row items-center"
+                    style={{
+                      transform: "translateY(-10px)",
+                      transform: "translateX(-10%)",
+                    }}
+                  >
+                    <div
+                      className=""
+                      style={{
+                        borderRight: "2px solid blue",
+                      }}
+                    >
+                      -
+                    </div>
+                    <div className="flex-1 hover:bg-indigo-300 p-1 rounded">
+                      <p className="text-xs">{menuSubItem.title}</p>
+                    </div>
+                  </div>
+                ))}
               </div>
             ))}
-
             <div className="border border-gray-100 my-2"></div>
           </div>
         ))}
+        {/* blue left border */}
+        <div
+          style={{ bottom: "15%" }}
+          className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"
+        ></div>
       </div>
     </section>
   );
@@ -126,7 +154,12 @@ SidebarMenu.defaultProps = {
           backgroundColor: null,
           borderColor: null,
           notification: null,
-          menuSubItems: [],
+          leftIcon: downwardArrow,
+          menuSubItems: [
+            { title: "مهدی" },
+            { title: "مهدی" },
+            { title: "مهدی" },
+          ],
         },
         {
           icon: discount,
@@ -149,7 +182,7 @@ SidebarMenu.defaultProps = {
       ],
     },
     {
-      title: "حسابداری و مالی",
+      title: "حساب کاربری",
       menuItems: [
         {
           icon: profileIcon,
@@ -188,43 +221,3 @@ SidebarMenu.defaultProps = {
   username: "رستم پهلوان زاده",
   userJob: "مدیریت سامانه هوشمند",
 };
-
-// {
-//   buttons.map((button, i) => (
-//     <div className="flex flex-col item-center">
-//       {/* divider */}
-//       <div className="border border-gray-200 my-1"></div>
-//       <div
-//         key={i}
-//         className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
-//       >
-//         <img src={button.icon} alt="" />
-//         <p className="text-blue-600 text-sm flex-1 mx-2">{button.title}</p>
-//         {button.leftIcon && <Switch />}
-//       </div>
-//     </div>
-//   ));
-// }
-
-{
-  /* sub items */
-}
-{
-  /* {item.subItems.map((subItem, i) => (
-              <div
-                key={i}
-                className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
-              >
-                {subItem.name && (
-                  <p className="text-gray-400 text-xs flex-1 mr-4">
-                    {subItem.name}
-                  </p>
-                )}
-                {subItem.num && (
-                  <div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
-                    <span className=" text-white text-xs">{subItem.num}</span>
-                  </div>
-                )}
-              </div>
-            ))} */
-}