Add files via upload

DSoftofficial · Dec 26, 2023 · c0807c2 · c0807c2
1 parent ef7368f
commit c0807c2
Show file tree

Hide file tree

Showing 12 changed files with 297 additions and 51 deletions.
diff --git a/web-app/src/App.css b/web-app/src/App.css
@@ -2,7 +2,7 @@
     font-family: 'Ubuntu', sans-serif;
     margin: 0;
     padding: 0;
-    --main-bg-color: rgb(32, 0, 66);
+    --main-bg-color: rgb(32, 0, 68);
     --content-box-bg-color: rgb(20, 1, 39);
     --subdropdown-box-bg-color: rgb(32, 0, 58);
     --trigger-btn-dropdown-hover: rgba(72, 48, 177, 0.575);
@@ -184,11 +184,6 @@ li {
     align-items: center;
 }
 
-#editorwrapper {
-    display: flex;
-    justify-content: space-between;
-}
-
 .tabswrapper {
     width: auto;
     height: 7vh;
@@ -260,10 +255,13 @@ li {
     background-color: var(--main-bg-color);
 }
 
+.fa-chevron-right{
+    transform: translateX(8px);
+}
 
 .expandable:hover .fa-chevron-right {
-    transform: translateX(10px);
-    transition: ease-in-out .5s;
+    transform: translateX(13px);
+    transition: ease-in-out 0.3s;
 }
 
 .sidebarscontent{
@@ -274,4 +272,4 @@ li {
     color: white;
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
-}
+}
diff --git a/web-app/src/App.jsx b/web-app/src/App.jsx
@@ -9,29 +9,265 @@ import Tabs from "./components/Tabs/Tabs.jsx";
 import Search from "./components/SideBar/Main Components/Search/Search.jsx";
 import Extensions from "./components/SideBar/Main Components/Extensions/Extensions.jsx";
 import FilePioneer from "./components/SideBar/Main Components/filePioneer/filePioneer.jsx";
-
+import GitHub from "./components/SideBar/Main Components/GItHub/GitHub.jsx";
+import Terminal from "./components/SideBar/Main Components/Terminal/Terminal.jsx";
+import Debug from "./components/SideBar/Main Components/Debug/Debug.jsx";
+import CodeBlocks from "./components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx";
+import Git from "./components/SideBar/Main Components/Git/Git.jsx";
 
 function App() {
-  let [ariaExpandedisplay, changeariaExpandedisplay] = useState('none');
-  const toggleAriaExpanded = () => {
+  let [ariaExpandedisplayfilepioneer, changeariaExpandedisplayfilepioneer] = useState('none');
+  let [ariaExpandedisplaysearch, changeariaExpandedisplaysearch] = useState('none');
+  let [ariaExpandedisplaycodeblocks, changeariaExpandedisplaycodeblocks] = useState('none');
+  let [ariaExpandedisplaydebug, changeariaExpandedisplaydebug] = useState('none');
+  let [ariaExpandedisplayextensions, changeariaExpandedisplayextensions] = useState('none');
+  let [ariaExpandedisplaygit, changeariaExpandedisplaygit] = useState('none');
+  let [ariaExpandedisplaygithub, changeariaExpandedisplaygithub] = useState('none');
+  let [ariaExpandedisplayterminal, changeariaExpandedisplayterminal] = useState('none');
+  const toggleAriaExpandedfilepioneer = () => {
     console.log("clicked");
-    if (ariaExpandedisplay === "none") {
+    if (ariaExpandedisplayfilepioneer === "none") {
       // console.log("toggled")
-      changeariaExpandedisplay("flex");
+      changeariaExpandedisplayfilepioneer("flex");
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
       seteditorwrapperStyle({
         width: '72vw',
       })
-
-    } else {
-      changeariaExpandedisplay("none");
+    }
+    else {
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedsearch = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaysearch === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("flex");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedcodeblocks = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaycodeblocks === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("flex");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedgithub = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaygithub === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("flex");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedgit = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaygit === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("flex");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedebug = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaydebug === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("flex");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedterminal = () => {
+    console.log("clicked");
+    if (ariaExpandedisplayterminal === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("flex");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedextensions = () => {
+    console.log("clicked");
+    if (ariaExpandedisplayextensions === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("flex");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
       seteditorwrapperStyle({
         width: '92vw',
       })
     }
   };
   const [editorwrapperStyle, seteditorwrapperStyle] = useState({
     width: '92vw',
-    height: '83vh'
+    height: '83vh',
+    display: 'flex'
   })
   return (
     <>
@@ -45,11 +281,16 @@ function App() {
           </div>
         </div>
         <div className="SideBarmainwrper">
-          <div className="SideBarmainwrper" ariaExpanded={ariaExpandedisplay}>
-            <Extensions />
-            <Search />
-            <FilePioneer />
-            <SideBar toggleAriaExpanded={toggleAriaExpanded} />
+          <div className="SideBarmainwrper">
+            <CodeBlocks ariaExpandedisplaycodeblocks={ariaExpandedisplaycodeblocks}/>
+            <Terminal ariaExpandedisplayterminal={ariaExpandedisplayterminal}/>
+            <Git ariaExpandedisplaygit={ariaExpandedisplaygit}/>
+            <Extensions ariaExpandedisplayextensions={ariaExpandedisplayextensions}/>
+            <GitHub ariaExpandedisplaygithub={ariaExpandedisplaygithub}/>
+            <Debug ariaExpandedisplaydebug={ariaExpandedisplaydebug}/>
+            <Search ariaExpandedisplaysearch={ariaExpandedisplaysearch} />
+            <FilePioneer ariaExpandedisplayfilepioneer={ariaExpandedisplayfilepioneer}/>
+            <SideBar toggleAriaExpandedfilepioneer={toggleAriaExpandedfilepioneer} toggleAriaExpandedsearch={toggleAriaExpandedsearch} toggleAriaExpandedextensions={toggleAriaExpandedextensions} toggleAriaExpandedterminal={toggleAriaExpandedterminal} toggleAriaExpandedebug={toggleAriaExpandedebug} toggleAriaExpandedgit={toggleAriaExpandedgit} toggleAriaExpandedgithub={toggleAriaExpandedgithub} toggleAriaExpandedcodeblocks={toggleAriaExpandedcodeblocks} />
           </div>
         </div>
       </div>
@@ -58,4 +299,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/web-app/src/components/MenuBar/MenuBar.jsx b/web-app/src/components/MenuBar/MenuBar.jsx
@@ -43,7 +43,7 @@ function MenuBar(props) {
                       <ul>
                         <li>
                           Recent
-                          <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+                          <i className="fa-solid fa-chevron-right"></i>
                         </li>
                       </ul>
                     </div>

diff --git a/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx b/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const CodeBlocks = () => {
+const CodeBlocks = (props) => {
   return (
-    <div id="codeblocks" className='sidebarscontent'>
-      <h6>CodeBlocks</h6>
+    <div id="codeblocksarea" className={`sidebarscontent d-${props.ariaExpandedisplaycodeblocks}`}>
+      <h6>Code Blocks</h6>
     </div>
   )
 }

diff --git a/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx b/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Debug = () => {
+const Debug = (props) => {
   return (
-    <div id="debug" className='sidebarscontent'>
+    <div id="debugarea" className={`sidebarscontent d-${props.ariaExpandedisplaydebug}`}>
       <h6>Debug</h6>
     </div>
   )

diff --git a/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx b/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Extensions = () => {
+const Extensions = (props) => {
   return (
-    <div id="extensions" className='sidebarscontent'>
+    <div id="extensionsarea" className={`sidebarscontent d-${props.ariaExpandedisplayextensions}`}>
       <h6>Extensions</h6>
     </div>
   )