From 19b50dad445bcbeee8c8bd76120251e8245a60b7 Mon Sep 17 00:00:00 2001
From: Astha Negi <asthanegi539@gmail.com>
Date: Thu, 13 Jun 2024 16:44:08 +0530
Subject: [PATCH] Updating css of sidebar and app.jsx

---
 src/App.css                        | 19 ++++++++++++++-----
 src/App.jsx                        | 11 +++++++++--
 src/components/Sidebar/SideBar.jsx | 26 +++++++++++++-------------
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/App.css b/src/App.css
index a98f40ca..2196b8bb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
   padding: 0;
@@ -6,19 +7,27 @@ html, 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 */
+  padding: 20px;
 }
 
-.main-page{
+.main-page {
   display: flex;
+}
+
+.main-container {
+  transition: margin-left 0.5s ease;
+}
+
+@media (min-width: 768px) {
+  .main-container.shifted {
+    margin-left: 120px;
+  }
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index ede80924..7e102bc0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,13 +13,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) => {
diff --git a/src/components/Sidebar/SideBar.jsx b/src/components/Sidebar/SideBar.jsx
index ff7ef634..bcd0a14c 100644
--- a/src/components/Sidebar/SideBar.jsx
+++ b/src/components/Sidebar/SideBar.jsx
@@ -40,10 +40,10 @@ 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")
+  const [modes, setModes] = useState("Dark")
   useEffect(() => {
     const currentCategory = getCurrentCategory();
     const scrollbarColor = getScrollbarColor(currentCategory);
@@ -92,18 +92,18 @@ const SideBar = ({ routes, children }) => {
     };
   };
 
-  const toggle = () => setIsOpen(!isOpen);
+  // const toggle = () => setIsOpen(!isOpen);
 
-  const modes_control=()=>{
+  const modes_control = () => {
     document.body.classList.toggle('light')
-    if(document.body.classList.contains('light')){
+    if (document.body.classList.contains('light')) {
       setModes("Light")
     }
-    else{
+    else {
       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>
 
@@ -169,11 +169,11 @@ const SideBar = ({ routes, children }) => {
                 </NavLink>
               );
             })}
-            <div className={isOpen?"opened_menu_bar":'Dark_Light_mode'} onClick={()=>modes_control()}>
-            <img  src='https://cdn-icons-png.flaticon.com/128/12301/12301351.png' alt='Dark_light_mode' />
-            {isOpen?<p>{modes}</p>:<></>}
+            <div className={isOpen ? "opened_menu_bar" : 'Dark_Light_mode'} onClick={() => modes_control()}>
+              <img src='https://cdn-icons-png.flaticon.com/128/12301/12301351.png' alt='Dark_light_mode' />
+              {isOpen ? <p>{modes}</p> : <></>}
             </div>
-            </section>
+          </section>
         </motion.div>
 
         <main style={{ marginLeft: 'auto', transition: 'all 0.3s' }}>{children}</main>