Updated MenuBar and SideBar

web-app/index.html

@@ -23,5 +23,4 @@
 </body>
 <script type="text/javascript" src="https://unpkg.com/monaco-themes/dist/monaco-themes.js"></script>
 <script src="https://kit.fontawesome.com/f614d99ea8.js" crossorigin="anonymous"></script>
-
 </html>

web-app/src/App.css

@@ -83,11 +83,11 @@ li{
     background-color: var(--content-box-bg-color);
     width: 21vw;
     box-shadow: 0px 8px 16px 0px rgb(53, 53, 53);
-    padding-left: 10px;
-    padding-right: 12px;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-radius: 6px;
+    padding-left: 9px;
+    padding-right: 11px;
+    padding-bottom: 9px;
+    padding-top: 9px;
+    border-radius: 5px;
     z-index: 2;
     position: absolute;
 }
@@ -267,7 +267,6 @@ li{
 }
 
 .sidebarscontent{
-    display: none;
     width: 20vw;
     height: 90vh;
     background-color: var(--main-bg-color);
@@ -279,9 +278,11 @@ li{
 #searcharea{
     display: none;
 }
-#filepioneer{
+
+#filepioneerarea{
     display: none;
 }
+
 #extensions{
     display: none;
 }

web-app/src/App.jsx

@@ -6,9 +6,10 @@ import SideBar from './components/SideBar/SideBar.jsx'
 import ReviewBar from './components/ReviewBar/ReviewBar.jsx'
 import StatusBar from './components/StatusBar/StatusBar.jsx'
 import Tabs from './components/Tabs/Tabs.jsx'
-import FilePioneer from './components/SideBar/Main Components/filePioneer/filePioneer.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'
+
 
 
 function App() {

web-app/src/components/MenuBar/MenuBar.jsx

@@ -4,12 +4,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 
 function MenuBar(props) {
-  const filePicker = () => {
+  function filePicker() {
     let input = document.createElement('input');
     input.type = 'file';
     input.click();
   }
-  const quit = () => {
+  function quit() {
     window.close()
   }
   return (
@@ -101,7 +101,24 @@ function MenuBar(props) {
             <div className="dropdown">
               <span className='dropdown-trigger-btn'>{props.go}</span>
               <div className="dropdown-content">
-                <li>New File</li>
+                <li>Switch Editor</li>
+                <li>Switch Group</li>
+                <hr className='dropdowncontent-hr' />
+                <li>Go to File</li>
+                <li>Go to Symbol in Workspace</li>
+                <hr className='dropdowncontent-hr' />
+                <li>Go to Symbol in Editor</li>
+                <li>Go to Definition</li>
+                <li>Go to Declaration</li>
+                <li>Go to Type Definition</li>
+                <li>Go to Implementations</li>
+                <li>Go to References</li>
+                <hr className='dropdowncontent-hr' />
+                <li>Go to Line/Column</li>
+                <li>Go to Bracket</li>
+                <hr className='dropdowncontent-hr' />
+                <li>Next Problem</li>
+                <li>Previous Problem</li>
               </div>
             </div>
             <div className="dropdown">

web-app/src/components/SideBar/Main Components/Debug/Debug.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 const Debug = () => {
   return (
     <div id="debug" className='sidebarscontent'>
-      <h6>File Pioneer</h6>
+      <h6>Debug</h6>
     </div>
   )
 }

web-app/src/components/SideBar/Main Components/filePioneer/filePioneer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 function FilePioneer() {
     return (
-        <div id="filepioneer" className='sidebarscontent'>
+        <div id="filepioneerarea" className='sidebarscontent'>
             <h6>File Pioneer</h6>
         </div>
     )

web-app/src/components/SideBar/SideBar.jsx

@@ -1,120 +1,40 @@
 import React, { useState } from 'react'
-import ReactDOM from "react-dom";
-
-export default function SideBar(props) {
-  const sidebarscontent = document.getElementsByClassName('sidebarscontent')
-  const MonacoEditor = document.getElementById('editorwrapper')
-  let Search = document.getElementById('searcharea')
-  let Extensions = document.getElementById('extensions')
-  let Debug = document.getElementById('debug')
-  let CodeBlocks = document.getElementById('codeblocks')
-  let Github = document.getElementById('github')
-  let Git = document.getElementById('git')
-  let Terminal = document.getElementById('terminal')
-  let filepioneer = document.getElementById('filepioneer');
-  const toggleSearch = () => {
-    console.log("toggled")
-    if (Search.style.display === "none") {
-      Search.style.display = "flex";
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      filepioneer.style.display = "none";
-      MonacoEditor.style.width = "72vw";
-    } else {
-      Search.style.display = "none"
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      filepioneer.style.display = "none";
-      MonacoEditor.style.width = "92vw";
-    }
-  }
-
-  const toggleExtensions = () => {
-    console.log("toggled")
-    if (Search.style.display === "none") {
-      Search.style.display = "flex";
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      filepioneer.style.display = "none";
-      MonacoEditor.style.width = "72vw";
-    } else {
-      Search.style.display = "none"
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      filepioneer.style.display = "none";
-      MonacoEditor.style.width = "92vw";
-    }
-  }
-  const toggleFilePioneer = () => {
-    console.log("toggled")
-    if (filepioneer.style.display === "none") {
-      filepioneer.style.display = "flex";
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      Search.style.display = "none"
-      MonacoEditor.style.width = "72vw";
-    } else {
-      Extensions.style.display = "none";
-      // Debug.style.display = "none";
-      // CodeBlocks.style.display = "none";
-      // Github.style.display = "none";
-      // Git.style.display = "none";
-      Search.style.display = "none"
-      filepioneer.style.display = "none";
-      MonacoEditor.style.width = "92vw";
-    }
-  }
-
 
+export default function SideBar() {
   return (
     <>
       <div className="sidebar">
         <div className="iconWrapper">
-          <div className="sidebaricons" onClick={toggleFilePioneer}><i className="fa-regular fa-file fa-xl"></i></div>
+          <div id="filepioneer" className="sidebaricons" aria-expanded="false" aria-selected="false"><i className="fa-regular fa-file fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
         <div className="iconWrapper">
-          <div className="search sidebaricons" onClick={toggleSearch}><i className="fa-solid fa-magnifying-glass fa-xl"></i></div>
+          <div className="search sidebaricons" aria-expanded="false"><i className="fa-solid fa-magnifying-glass fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div className="terminal sidebaricons" onClick={toggleExtensions}><i className="fa-solid fa-terminal fa-xl"></i></div>
+          <div className="terminal sidebaricons" aria-expanded="false"><i className="fa-solid fa-terminal fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div className="debug sidebaricons"><i className="fa-solid fa-bug-slash fa-xl"></i></div>
+          <div className="debug sidebaricons" aria-expanded="false"><i className="fa-solid fa-bug-slash fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div className="git sidebaricons"><i className="fa-brands fa-git-alt fa-xl"></i></div>
+          <div className="git sidebaricons" aria-expanded="false"><i className="fa-brands fa-git-alt fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div className="github sidebaricons"><i className="fa-brands fa-github fa-xl"></i></div>
+          <div className="github sidebaricons" aria-expanded="false"><i className="fa-brands fa-github fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div className="extensions sidebaricons"><i className="fa-solid fa-puzzle-piece fa-xl"></i></div>
+          <div className="extensions sidebaricons" aria-expanded="false"><i className="fa-solid fa-puzzle-piece fa-xl"></i></div>
           <span className="sidebarIconBar"></span>
         </div>
       </div>

web-app/vite.config.js

@@ -4,4 +4,4 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+})