sidebar UI changed issue #104

src/App.jsx

@@ -5,6 +5,9 @@ import AllApps from "./Python_Library_Pages/AllApps";
 import PythonBasics from "./Python_Library_Pages/Python_Basics/Introduction-to-Python";
 import NumpyBasics from "./Python_Library_Pages/Numpy/Intro-to-Numpy";
 import PandasBasics from "./Python_Library_Pages/Pandas/Intro-to-Pandas";
+import MatplotlibBasics from "./Python_Library_Pages/Matplotlib/Intro-to-Matplotlib";
+import OperatorsBasics from "./Python_Library_Pages/Python_Basics/Intrduction-to-Operators";
+import FunctionsBasics from "./Python_Library_Pages/Python_Basics/Introduction-to-Functions";
 
 import PlayGround from "./Python/PlayGround";
 
@@ -18,20 +21,24 @@ const App = () => {
 
         <Route path="/Python-Basics" element={<Outlet />}>
           <Route path="Introduction-to-Python" element={<PythonBasics />} />
+          <Route
+            path="Introduction-to-Operators"
+            element={<OperatorsBasics />}
+          />
+          <Route
+            path="Introduction-to-Functions"
+            element={<FunctionsBasics />}
+          />
         </Route>
         <Route path="/NumPy-Library" element={<Outlet />}>
-        <Route path="Intro-to-Numpy" element={<NumpyBasics />} />
+          <Route path="Intro-to-Numpy" element={<NumpyBasics />} />
           {/* if we have child element we need added here */}
-          {/* <Route index element={<Two />} />I
-          <Route path="Introduction-to-Conditions" element={<Five />} />
-          <Route path="Loops-in-Python" element={<Six />} />
-          <Route path="While-Loop-in-Python" element={<Seven />} /> */}
         </Route>
         <Route path="Pandas-Library" element={<Outlet />}>
-        <Route path="Intro-to-pandas" element={<PandasBasics />} />
-          {/* <Route index element={<Two />} />
-          <Route path="Inbuilt-Functions" element={<Inbuilt />} />
-          <Route path="Loops-in-Python" element={<User />} /> */}
+          <Route path="Intro-to-pandas" element={<PandasBasics />} />
+        </Route>
+        <Route path="Matplotlib-Library" element={<Outlet />}>
+          <Route path="Intro-to-Matplotlib" element={<MatplotlibBasics />} />
         </Route>
         {/* remaing routes*/}
       </Routes>

src/Constants/index.js

@@ -1,4 +1,4 @@
-// important 
+// important
 // guys must name route value equal to same as what you give the route in App.jsx
 
 export const subMenusList = [
@@ -10,7 +10,15 @@ export const subMenusList = [
       {
         title: "Introduction to Python",
         route: "Introduction-to-Python",
-      }
+      },
+      {
+        title: "Introduction to Operators",
+        route: "Introduction-to-Operators",
+      },
+      {
+        title: "Introduction to Functions",
+        route: "Introduction-to-Functions",
+      },
     ],
   },
   {
@@ -19,11 +27,10 @@ export const subMenusList = [
     route: "/NumPy-Library/Intro-to-Numpy",
     children: [
       {
-        // List of Pages 
-        title: "Intro to Numpy", 
+        // List of Pages
+        title: "Intro to Numpy",
         route: "Intro-to-Numpy",
-
-      }
+      },
     ],
   },
   {
@@ -34,7 +41,7 @@ export const subMenusList = [
       {
         title: "Intro to pandas",
         route: "Intro-to-pandas",
-      }
+      },
     ],
   },
   /* remaining contents*/

src/Python_Library_Pages/Matplotlib/Intro-to-Matplotlib.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const MatplotlibBasics = () => {
+  return (
+    <div>
+      <h1>Introduction to Matplotlib</h1>
+
+      <p>Development can start for Matplotlib from here</p>
+    </div>
+  );
+};
+
+export default MatplotlibBasics;

src/Python_Library_Pages/Python_Basics/Intrduction-to-Operators.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const OperatorsBasics = () => {
+  return (
+    <div>
+      <h1>Introduction to Operators in Python</h1>
+
+      <p>Development can start for Python from here</p>
+    </div>
+  );
+};
+
+export default OperatorsBasics;

src/Python_Library_Pages/Python_Basics/Introduction-to-Functions.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const FunctionsBasics = () => {
+  return (
+    <div>
+      <h1>Introduction to Functions in Python</h1>
+
+      <p>Development can start for Python from here</p>
+    </div>
+  );
+};
+
+export default FunctionsBasics;

src/layouts/sidebar/SubMenu.jsx

@@ -6,19 +6,18 @@ import { NavLink, useLocation } from "react-router-dom";
 const SubMenu = ({ data }) => {
   const { pathname } = useLocation();
   const [subMenuOpen, setSubMenuOpen] = useState(false);
+  const childrenCount = data.children?.length || 0;
   return (
     <>
-    <li
+      <li
         className={`link ${pathname.includes(data.name) && "text-white-600"}`}
         onClick={() => setSubMenuOpen(!subMenuOpen)}
       >
         {/* <data.icon size={23} className="min-w-max" /> */}
         <p className="flex-1 capitalize">{data.title}</p>
-        <BsCheck size={23}
-
-        />
+        <BsCheck size={23} />
       </li>
-      
+
       <motion.ul
         animate={
           subMenuOpen
@@ -29,23 +28,25 @@ const SubMenu = ({ data }) => {
                 height: 0,
               }
         }
-        className="flex h-0 flex-col pl-14 text-[0.8rem] font-normal overflow-hidden"
+        className="flex h-0 flex-col text-[15px] font-normal overflow-hidden text-black bg-[#EAEDED] hover:text-[#8800ff] "
+        style={{
+          fontFamily: "Poppins, sans-serif",
+        }}
       >
+        {data.children?.map((child, i) => (
+          <li key={i}>
+            {/* className="hover:text-blue-600 hover:font-medium" */}
 
-
-{data.children?.map((child,i) => (
-    <li key={i}>
-    {/* className="hover:text-blue-600 hover:font-medium" */}
-
-    <NavLink
-      to={`${data.name}/${child.route}`}
-      className="link !bg-transparent capitalize"
-    >
-      {child.title}
-    </NavLink>
-  </li>
-
-))}
+            <NavLink
+              to={`${data.name}/${child.route}`}
+              className={`link !bg-transparent capitalize ${
+                i < childrenCount - 1 ? "border-b  border-[#8800ff] -mx-1" : ""
+              } `} // Add a bottom border to the last submenu link with the specified color
+            >
+              {child.title}
+            </NavLink>
+          </li>
+        ))}
       </motion.ul>
     </>
   );

src/layouts/sidebar/index.jsx

@@ -85,41 +85,53 @@ const Sidebar = () => {
         initial={{ x: isTabletMid ? -250 : 0 }}
         animate={open ? "open" : "closed"}
         // sidebar color code (#E0E0E0)
-        className=" bg-[#212121] text-white shadow-xl z-[999] max-w-[19rem]  w-[19rem] 
-            overflow-hidden md:relative fixed h-screen ">
+        className="border-r border-[#BFC9CA] shadow-lg bg-[#EAEDED] text-black  text-[16px] shadow-xl z-[999] max-w-[19rem] w-[19rem] overflow-hidden md:relative fixed h-screen"
+        style={{ fontFamily: "Poppins, sans-serif", fontWeight: "light" }}
+      >
         <div className="flex-col pt-5 pl-5 pr-5 gap-2.5 font-medium border-b h-[150px] border-slate-300  bg-[#8800ff]">
           {/* <img
             src="https://img.icons8.com/color/512/firebase.png"
             width={45}
             alt=""
           /> */}
-          <Link to='/'>
-          <h1
-            className="text-[22px] text-white whitespace-pre text-center pb-5"
-            style={{ fontFamily: "Poppins, sans-serif", fontWeight: "light" }}
-          >
-            PyLibLog
-          </h1>
+          <Link to="/">
+            <h1
+              className="text-[22px] text-white whitespace-pre text-center pb-5"
+              style={{ fontFamily: "Poppins, sans-serif", fontWeight: "light" }}
+            >
+              PyLibLog
+            </h1>
           </Link>
           <Search />
         </div>
-
+        <div className="my-3"></div>
         <div className="flex flex-col  h-full">
-          <div className='flex justify-center items-center mt-3'>
-          <Link to='/play-ground'>
-          <button className='px-5 py-1 bg-[#8800ff] rounded hover:bg-white hover:text-black'>
-            Python PlayGround
-          </button>
-          </Link>
+          <div className="flex justify-center items-center mt-3">
+            <Link to="/play-ground">
+              <button className="px-5 py-1 bg-[#8800ff] rounded  text-white  text-[16px]">
+                Python PlayGround
+              </button>
+            </Link>
           </div>
-          <ul className="whitespace-pre px-2.5 text-[0.9rem] py-1 flex flex-col gap-1  font-medium overflow-x-hidden scrollbar-thin scrollbar-track-[#ccc] scrollbar-thumb-yellow-500   md:h-[68%] h-[70%]">
+          <div className="my-2"></div>
+          <ul
+            className="whitespace-pre  text-[16px] py-1 flex flex-col gap-1 font-light overflow-x-hidden scrollbar-thin scrollbar-track-[#ccc] scrollbar-thumb-yellow-500 md:h-[68%] h-[70%]  "
+            style={{ fontFamily: "Poppins, sans-serif" }}
+          >
             {(open || isTabletMid) && (
-              <div className="py-5 border-slate-300 ">
+              <div className="py-5 border-slate-300 text-[16px]  ">
                 {/* <small className="pl-3 text-slate-500 inline-block mb-2">
                   Product categories
                 </small> */}
                 {subMenusList?.map((data, i) => (
-                  <div key={i} className="flex flex-col gap-1">
+                  <div
+                    key={i}
+                    className="flex flex-col gap-1 text-[16px] pl-2 pr-2 hover:bg-[#8800ff] hover:text-white border border-[#BFC9CA] p-1"
+                    style={{
+                      fontFamily: "Poppins, sans-serif",
+                      fontWeight: "light",
+                    }}
+                  >
                     <SubMenu data={data} />
                   </div>
                 ))}