Merge pull request #315 from asthanegi14/cssUpdate

Updating css of sidebar and app.jsx

src/App.css

@@ -7,20 +7,27 @@ body {
   flex-direction: column;
 }
 
-/* The app-container takes full height minus the footer height */
 .app-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
 
-/* Main content will take the remaining space */
 .main-content {
   flex: 1;
   padding: 20px;
-  /* Optional: Add padding to the main content */
 }
 
 .main-page {
   display: flex;
+}
+
+.main-container {
+  transition: margin-left 0.5s ease;
+}
+
+@media (min-width: 768px) {
+  .main-container.shifted {
+    margin-left: 120px;
+  }
 }

src/App.jsx

@@ -12,13 +12,20 @@ const routes = Links();
 
 function App() {
   const [progress, setProgress] = useState(0);
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!isSidebarOpen);
+  };
+
 
   return (
     <div className='app-container'>
       <Router>
-        <SideBar routes={routes}>
+        <SideBar routes={routes} isOpen={isSidebarOpen} toggleSidebar={toggleSidebar}>
+
           <LoadingBar height={3} color='#f11946' progress={progress} />
-          <div className="main-container">
+          <div className={`main-container ${isSidebarOpen ? 'shifted' : ''}`}>
 
             <Routes>
               {categories.map((category) => {

src/components/Sidebar/SideBar.jsx

@@ -40,8 +40,8 @@ const showAnimation = {
   },
 };
 
-const SideBar = ({ routes, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+const SideBar = ({ routes, isOpen, toggleSidebar, children }) => {
+  // const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
   const [modes, setModes] = useState("Dark")
   useEffect(() => {
@@ -92,7 +92,7 @@ const SideBar = ({ routes, children }) => {
     };
   };
 
-  const toggle = () => setIsOpen(!isOpen);
+  // const toggle = () => setIsOpen(!isOpen);
 
   const modes_control = () => {
     document.body.classList.toggle('light')
@@ -103,7 +103,7 @@ const SideBar = ({ routes, children }) => {
       setModes("Dark")
     }
   }
-  console.log(modes)
+  // console.log(modes)
   return (
     <>
       <div className='main-container'>
@@ -125,7 +125,7 @@ const SideBar = ({ routes, children }) => {
             </AnimatePresence>
 
             <div className='bars flex-grow d-flex align-items-stretch align-self-center'>
-              <FaBars onClick={toggle} />
+              <FaBars onClick={toggleSidebar} />
             </div>
           </div>