Create sidebar

src/App.scss

@@ -0,0 +1,5 @@
+html,
+body,
+#root {
+  height: 100%;
+}

src/App.tsx

@@ -5,11 +5,11 @@ import { IAvailableContainerModel } from './Interfaces/IAvailableContainerModel'
 import { IConfigurationResponseModel } from './Interfaces/IConfigurationResponseModel';
 
 interface IAppProps {
-
 }
 
 interface IAppState {
   componentOptions: IAvailableContainerModel[]
+  isSidebarOpen: boolean
 }
 
 class App extends React.Component<IAppProps> {
@@ -18,6 +18,7 @@ class App extends React.Component<IAppProps> {
   constructor(props: IAppProps) {
     super(props);
     this.state = {
+      isSidebarOpen: true,
       componentOptions: []
     };
   }
@@ -25,15 +26,24 @@ class App extends React.Component<IAppProps> {
   componentDidMount() {
     fetchConfiguration().then((configuration: IConfigurationResponseModel) => {
       this.setState({
+        isSidebarOpen: this.state.isSidebarOpen,
         componentOptions: configuration.AvailableContainers
       });
     });
   }
 
+  public ToggleMenu() {
+    this.setState({
+      isSidebarOpen: !this.state.isSidebarOpen,
+      componentOptions: this.state.componentOptions
+    });
+  }
+
   render() {
     return (
-      <div className="App">
+      <div className="App font-sans h-full">
-        <Sidebar componentOptions={this.state.componentOptions} />
+        <Sidebar componentOptions={this.state.componentOptions} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleMenu()} />
+        <button className='fixed z-0 top-4 left-4 text-lg' onClick={() => this.ToggleMenu()}>&#9776; Menu</button>
       </div>
     );
   }

src/Components/Sidebar/Sidebar.tsx

@@ -3,14 +3,29 @@ import { IAvailableContainerModel } from '../../Interfaces/IAvailableContainerMo
 
 interface ISidebarProps {
   componentOptions: IAvailableContainerModel[]
+  isOpen: boolean;
+  onClick: () => void;
 }
 
-export default class Sidebar extends React.PureComponent<ISidebarProps> {
+export default class Sidebar extends React.Component<ISidebarProps> {
   public render() {
-    return (
+    const listElements = this.props.componentOptions.map(componentOption =>
-      <nav className='bg-blue min-h-full'>
+      <button className='hover:bg-blue-600 transition-all sidebar-row' key='{componentOption.Type}'>
+        {componentOption.Type}
+      </button>
+    );
 
-      </nav>
+    const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
+    return (
+      <div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-10 ${isOpenClasses}`}>
+        <div className='w-full h-auto p-4 flex justify-end' onClick={this.props.onClick}>
+          <button className='text-lg'>&times;</button>
+        </div>
+        <div className='bg-blue-400 sidebar-row'>
+          Composants
+        </div>
+        {listElements}
+      </div>
     );
   }
 }

src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer components {
+  .sidebar-row {
+    @apply p-6 w-full
+  }
+}