From e47ad59003d5ac240a3665e9d70d80a768b097b4 Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Sat, 11 Sep 2021 05:43:29 -0400
Subject: [PATCH] Added Settings tray with initial sections as details elements

---
 app/web/src/components/IdeSideBar/IdeSideBar.tsx | 5 +++--
 app/web/src/index.css                            | 4 ----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
index 15e61d8..64a0d90 100644
--- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx
+++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
@@ -5,7 +5,6 @@ import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './
 function TabToggle({ item, className = "", active, onChange, onClick }) {
   return (
   <label
-    key={'tab-'+item.name}
     className={`tabToggle${item.disabled ? ' disabled' : ''}${active ? ' active' : ''} ${className}`}>
     <input name="sidebar-tabs"
       type="radio"
@@ -45,6 +44,7 @@ const IdeSideBar = () => {
               active={ selectedTab === topItem.name }
               onChange={ () => setSelectedTab(topItem.name) }
               onClick={ onTabClick(topItem.name) }
+              key={ 'tab-' + i }
             />
           ))}
         </div>
@@ -55,13 +55,14 @@ const IdeSideBar = () => {
             active={ selectedTab === bottomItem.name }
             onChange={ () => setSelectedTab(bottomItem.name) }
             onClick={ onTabClick(bottomItem.name) }
+            key={ 'tab-' + (sidebarTopConfig.length+i) }
           />
           ))}
         </div>
       </fieldset>
       { sidebarCombinedConfig.find(item => item.name === selectedTab)?.panel && (
         <div className="w-56 bg-ch-gray-800 text-ch-gray-300" style={{ height: 'calc(100% - 6px)', margin: '3px'}}>
-          <h2 className="py-2 px-4 bg-ch-gray-760 mb-2">{ selectedTab }</h2>
+          <h2 className="flex items-center h-9 px-4 bg-ch-gray-760">{ selectedTab }</h2>
           { sidebarCombinedConfig.find(item => item.name === selectedTab).panel }
         </div>
       ) }
diff --git a/app/web/src/index.css b/app/web/src/index.css
index 8a5dee5..0e17ea0 100644
--- a/app/web/src/index.css
+++ b/app/web/src/index.css
@@ -40,10 +40,6 @@
   .tabToggle.disabled {
     @apply text-ch-gray-550 cursor-not-allowed;
   }
-
-  .sidebarContainer {
-    @apply p-2;
-  }
 }