khuramhaf · khuramhaf · Nov 28, 2022 · Nov 28, 2022
diff --git a/src/App.css b/src/App.css
@@ -58,8 +58,8 @@
 .sidebar{
   float:left;
   background: lightgray;
-  width: 20%;
-  padding: 2%;
+  width: 273px;
+  padding: 30px;
   height: calc(100vh - 0px);
   overflow:hidden;
   box-sizing: border-box;
@@ -69,11 +69,34 @@
 .comp{
   float:right;
   background: lightgreen;
-  width:80%;
-  padding: 2%;
+  width:calc(100% - 273px);
+
   height: calc(100vh - 0px);
   overflow:hidden;
   box-sizing: border-box;
 }
 
 
+.animation{
+  max-height: 65px;
+  overflow-y: hidden;
+	transition-duration: .5s;
+
+
+
+}
+
+
+.animation1{
+
+max-height: 0px; /* approximate max height */
+  overflow-y: hidden;
+	transition-duration: .5s;
+
+
+
+
+
+}
+
+
diff --git a/src/App.js b/src/App.js
@@ -20,47 +20,47 @@ import Comp9 from './Comp9';
 import Comp10 from './Comp10';
 import Comp11 from './Comp11';
 import Comp12 from './Comp12';
+import Sidebar5 from './Sidebar5';
 
 function App() {
 
-  var array = ["none", "none"]
+  var array = [false, false]
 
   const [state, setstate] = useState(array);
   const [state1, setstate1] = useState(array);
-  const [state2, setstate2]  = useState(true);
 
   useEffect(()=>{
     window.addEventListener('popstate', ()=>{
 
       if (window.location.pathname==="/accounts"){
-        var array1 = ["none", "none"]
+        var array1 = [false, false]
         setstate(array1);
       }
 
       else if (window.location.pathname==="/accounts/comp1" || window.location.pathname==="/accounts/comp2" || window.location.pathname==="/accounts/comp3"){
-        var array1 = ["block", "none"]
+        var array1 = [true, false]
         setstate(array1);
       }
 
       else if (window.location.pathname==="/accounts/comp4" || window.location.pathname==="/accounts/comp5" || window.location.pathname==="/accounts/comp6"){
-        var array1 = ["none", "block"]
+        var array1 = [false, true]
         setstate(array1);
       }
 
 
 
       else if (window.location.pathname==="/cards"){
-        var array1 = ["none", "none"]
+        var array1 = [false, false]
         setstate1(array1);
       }
 
       else if (window.location.pathname==="/cards/comp7" || window.location.pathname==="/cards/comp8"  || window.location.pathname==="/cards/comp9" ){
-        var array1 = ["block", "none"]
+        var array1 = [true, false]
         setstate1(array1);
       }
 
       else if (window.location.pathname==="/cards/comp10"  || window.location.pathname==="/cards/comp11"  || window.location.pathname==="/cards/comp12" ){
-        var array1 = ["none", "block"]
+        var array1 = [false, true]
         setstate1(array1);
       }
 
@@ -75,33 +75,33 @@ function App() {
 
 
       if (window.location.pathname==="/accounts"){
-        let array1 = ["none", "none"]
+        let array1 = [false, false]
         setstate(array1);
       }
 
       else if (window.location.pathname==="/accounts/comp1" || window.location.pathname==="/accounts/comp2" || window.location.pathname==="/accounts/comp3"){
-        let array1 = ["block", "none"]
+        let array1 = [true, false]
         setstate(array1);
       }
 
       else if (window.location.pathname==="/accounts/comp4" || window.location.pathname==="/accounts/comp5" || window.location.pathname==="/accounts/comp6"){
-        let array1 = ["none", "block"]
+        let array1 = [false, true]
         setstate(array1);
       }
 
 
       else if (window.location.pathname==="/cards"){
-        let array1 = ["none", "none"]
+        let array1 = [false, false]
         setstate1(array1);
       }
 
       else if (window.location.pathname==="/cards/comp7" || window.location.pathname==="/cards/comp8"  || window.location.pathname==="/cards/comp9" ){
-        let array1 = ["block", "none"]
+        let array1 = [true, false]
         setstate1(array1);
       }
 
       else if (window.location.pathname==="/cards/comp10"  || window.location.pathname==="/cards/comp11"  || window.location.pathname==="/cards/comp12" ){
-        let array1 = ["none", "block"]
+        let array1 = [false, true]
         setstate1(array1);
       }
 
@@ -115,14 +115,14 @@ function App() {
 
 function myfun(){
 
-  var array1 = ["none", "none"]
+  var array1 = [false, false]
   setstate(array1);
 }
 
 
 function myfun1(){
 
-  var array1 = ["none", "none"]
+  var array1 = [false, false]
   setstate1(array1);
 }
   return (

diff --git a/src/Sidebar1.js b/src/Sidebar1.js
@@ -12,14 +12,14 @@ function Sidebar1(props) {
         e.preventDefault();
 
 
-        if(props.state[0]==="none"){
+        if(props.state[0]===false){
 setstate(true)
-            var array1 = ["block", "none"]
+            var array1 = [true, false]
             props.setstate(array1)
         }
 
         else{
-            var array1 = ["none", "none"]
+            var array1 = [false, false]
             props.setstate(array1)
             setstate(false)
         }
@@ -28,7 +28,7 @@ setstate(true)
 
     useEffect(()=>{
 
-        if(props.state[0]==="none"){
+        if(props.state[0]===false){
             setstate(false)
 
         }
@@ -37,19 +37,21 @@ setstate(true)
             setstate(true)
         }
 
+        console.log(document.getElementById("hello").offsetHeight);
+
     })
     return ( 
 
 <div>
 <a className="anchor" href="" onClick={myfun}>Anchor1 <i className={state? "arrow1": 'arrow'}></i></a>
-<ul style={{display: props.state[0]}}>
+<div id="hello" className={"hello " + (state? "animation":"animation1") }>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp1">Comp1</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp2">Comp2</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp3">Comp3</NavLink></li>
-</ul>
+</div>
 
 
 </div>

diff --git a/src/Sidebar2.js b/src/Sidebar2.js
@@ -12,22 +12,22 @@ function Sidebar2(props) {
         e.preventDefault();
 
 
-        if(props.state[1]==="none"){
+        if(props.state[1]===false){
 setstate(true)
-            var array1 = ["none", "block"]
+            var array1 = [false, true]
             props.setstate(array1)
         }
 
         else{
-            var array1 = ["none", "none"]
+            var array1 = [false, false]
             props.setstate(array1)
             setstate(false)
         }
     }
 
     useEffect(()=>{
 
-        if(props.state[1]==="none"){
+        if(props.state[1]===false){
             setstate(false)
 
         }
@@ -41,14 +41,14 @@ setstate(true)
 
 <div>
 <a className="anchor" href="" onClick={myfun}>Anchor2 <i className={state? "arrow1": 'arrow'}></i></a>
-<ul style={{display: props.state[1]}}>
+<div className={"hello " + (state? "animation":"animation1") }>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp4">Comp4</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp5">Comp5</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp6">Comp6</NavLink></li>
-</ul>
+</div>
 
 
 </div>

diff --git a/src/Sidebar3.js b/src/Sidebar3.js
@@ -12,14 +12,14 @@ function Sidebar3(props) {
         e.preventDefault()
 
 
-        if(props.state[0]==="none"){
+        if(props.state[0]===false){
             setstate(true)
-            var array1 = ["block", "none"]
+            var array1 = [true, false]
             props.setstate(array1)
         }
 
         else{
-            var array1 = ["none", "none"]
+            var array1 = [false, false]
             props.setstate(array1)
             setstate(false)
         }
@@ -28,7 +28,7 @@ function Sidebar3(props) {
 
     useEffect(()=>{
 
-        if(props.state[0]==="none"){
+        if(props.state[0]===false){
             setstate(false)
 
         }
@@ -42,14 +42,14 @@ function Sidebar3(props) {
 
 <div>
 <a href="" className="anchor" onClick={myfun}>Anchor3 <i className={state? "arrow1": 'arrow'}></i></a>
-<ul style={{display: props.state[0]}}>
+<div className={"hello " + (state? "animation":"animation1") }>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp7">Comp7</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp8">Comp8</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp9">Comp9</NavLink></li>
-</ul>
+</div>
 
 
 </div>

diff --git a/src/Sidebar4.js b/src/Sidebar4.js
@@ -10,14 +10,14 @@ function Sidebar4(props) {
     function myfun(e){
 
         e.preventDefault()
-        if(props.state[1]==="none"){
+        if(props.state[1]===false){
             setstate(true)
-            var array1 = ["none", "block"]
+            var array1 = [false, true]
             props.setstate(array1)
         }
 
         else{
-            var array1 = ["none", "none"]
+            var array1 = [false, false]
             props.setstate(array1)
             setstate(false)
         }
@@ -26,7 +26,7 @@ function Sidebar4(props) {
     }
     useEffect(()=>{
 
-        if(props.state[1]==="none"){
+        if(props.state[1]===false){
             setstate(false)
 
         }
@@ -40,14 +40,14 @@ function Sidebar4(props) {
 
 <div>
 <a href="" className="anchor" onClick={myfun}>Anchor4  <i className={state? "arrow1": 'arrow'}></i></a>
-<ul style={{display: props.state[1]}}>
+<div className={"hello " + (state? "animation":"animation1") }>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp10">Comp10</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp11">Comp11</NavLink></li>
 <li><NavLink style={({ isActive }) => ({ 
                             color: isActive ? 'greenyellow' : 'blue' })} to="comp12">Comp12</NavLink></li>
-</ul>
+</div>
 
 
 </div>

diff --git a/src/Sidebar5.js b/src/Sidebar5.js
@@ -0,0 +1,48 @@
+import {Outlet, NavLink} from 'react-router-dom'
+import {useState, useEffect} from 'react'
+
+
+
+function Sidebar5(props) {
+
+    const [state, setstate] = useState(false)
+
+    function myfun(e){
+e.preventDefault();
+
+if (state===false){
+
+    setstate(true)
+}
+
+else{
+
+    setstate(false)
+}
+
+    }
+
+
+    useEffect(()=>{
+
+
+    })
+    return ( 
+
+<div>
+<a className="anchor" href="" onClick={myfun}>Anchor1 </a>
+<div className={"hello " + (state? "animation":"animation1") }>
+<li><NavLink style={({ isActive }) => ({ 
+                            color: isActive ? 'greenyellow' : 'blue' })} to="comp1">Comp1</NavLink></li>
+<li><NavLink style={({ isActive }) => ({ 
+                            color: isActive ? 'greenyellow' : 'blue' })} to="comp2">Comp2</NavLink></li>
+<li><NavLink style={({ isActive }) => ({ 
+                            color: isActive ? 'greenyellow' : 'blue' })} to="comp3">Comp3</NavLink></li>
+</div>
+
+
+</div>
+     );
+}
+
+export default Sidebar5;