Add SVG Sidebar

src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
+import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { SVG } from './SVG/SVG';
@@ -10,6 +11,7 @@ interface IAppProps {
 
 interface IAppState {
   isSidebarOpen: boolean,
+  isSVGSidebarOpen: boolean,
   configuration: Configuration
 }
 
@@ -20,6 +22,7 @@ class App extends React.Component<IAppProps> {
     super(props);
     this.state = {
       isSidebarOpen: true,
+      isSVGSidebarOpen: true,
       configuration: {
         AvailableContainers: [],
         AvailableSymbols: [],
@@ -30,25 +33,34 @@ class App extends React.Component<IAppProps> {
 
   componentDidMount() {
     fetchConfiguration().then((configuration: Configuration) => {
-      this.setState({
-        isSidebarOpen: this.state.isSidebarOpen,
+      this.setState(prevState => ({
+        ...prevState,
         configuration
-      });
+      }));
     });
   }
 
-  public ToggleMenu() {
-    this.setState({
-      isSidebarOpen: !this.state.isSidebarOpen,
-      configuration: this.state.configuration
-    });
+  public ToggleSidebar() {
+    this.setState(prevState => ({
+      ...prevState,
+      isSidebarOpen: !this.state.isSidebarOpen
+    } as IAppState));
+  }
+
+  public ToggleSVGSidebar() {
+    this.setState(prevState => ({
+      ...prevState,
+      isSVGSidebarOpen: !this.state.isSVGSidebarOpen
+    } as IAppState));
   }
 
   render() {
     return (
       <div className="App font-sans h-full">
-        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleMenu()} />
-        <button className='fixed z-0 top-4 left-4 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleMenu()}>&#9776; Menu</button>
+        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
+        <button className='fixed z-0 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
+        <SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <button className='fixed z-0 top-4 right-4 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
         <SVG MainContainer={this.state.configuration.MainContainer} />
       </div>
     );

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface ISVGSidebarProps {
+  isOpen: boolean;
+  onClick: () => void;
+}
+
+export class SVGSidebar extends React.Component<ISVGSidebarProps> {
+  public render() {
+    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+    return (
+      <div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-10 ${isOpenClasses}`}>
+        <div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
+          <button className='text-lg'>&times;</button>
+        </div>
+        <div className='bg-slate-500 sidebar-row'>
+          Liste des éléments
+        </div>
+      </div>
+    );
+  }
+}

src/Components/Sidebar/Sidebar.tsx

@@ -10,7 +10,7 @@ interface ISidebarProps {
 export default class Sidebar extends React.Component<ISidebarProps> {
   public render() {
     const listElements = this.props.componentOptions.map(componentOption =>
-      <button className='hover:bg-blue-600 transition-all sidebar-row' key='{componentOption.Type}'>
+      <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type}>
         {componentOption.Type}
       </button>
     );