Merged PR 203: Improve responsive design and refactor layout

src/Components/SymbolsSidebar/SymbolsSidebar.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { FixedSizeList as List } from 'react-window';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
-
-interface ISymbolsSidebarProps {
-  selectedSymbolId: string
-  symbols: Map<string, ISymbolModel>
-  isOpen: boolean
-  isHistoryOpen: boolean
-  onPropertyChange: (key: string, value: string | number | boolean) => void
-  selectSymbol: (symbolId: string) => void
-}
-
-export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
-  // Render
-  let isOpenClasses = '-right-64';
-  if (props.isOpen) {
-    isOpenClasses = props.isHistoryOpen
-      ? 'right-64'
-      : 'right-0';
-  }
-
-  const containers = [...props.symbols.values()];
-  function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
-    const container = containers[index];
-    const key = container.id.toString();
-    const text = key;
-    const selectedClass: string = props.selectedSymbolId !== '' &&
-      props.selectedSymbolId === container.id
-      ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
-      : 'bg-slate-300/60 hover:bg-slate-300';
-
-    return (
-      <button type="button"
-        className={`w-full border-blue-500 symbols-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${selectedClass}`}
-        id={key}
-        key={key}
-        style={style}
-        onClick={() => props.selectSymbol(key)}
-      >
-        {text}
-      </button>
-    );
-  }
-
-  return (
-    <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
-      <div className='bg-slate-100 font-bold sidebar-title'>
-        Elements
-      </div>
-      <div className='h-96 text-gray-800'>
-        <List
-          className='List divide-y divide-black'
-          itemCount={containers.length}
-          itemSize={35}
-          height={384}
-          width={256}
-        >
-          {Row}
-        </List>
-      </div>
-      <SymbolProperties
-        symbol={props.symbols.get(props.selectedSymbolId)}
-        symbols={props.symbols}
-        onChange={props.onPropertyChange} />
-    </div>
-  );
-}