From 94c9ac26c0ab7049ac24954eb01180fc45f8d45e Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 11:11:07 +0200
Subject: [PATCH] Container: Updated id format + add feedback for the selected
 container

---
 src/App.tsx                              | 3 ++-
 src/Components/SVGSidebar/SVGSidebar.tsx | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c6d5b13..b5c86b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -102,7 +102,7 @@ class App extends React.Component<IAppProps> {
     const depth: number = Container.getDepth(parent) + 1;
     const container = new Container({
       parent,
-      id: `${depth}-${parent.props.children.length.toString()}`,
+      id: `${type}-${depth}-${parent.props.children.length.toString()}`,
       x: 0,
       y: 0,
       width: properties?.Width,
@@ -135,6 +135,7 @@ class App extends React.Component<IAppProps> {
         <button className='fixed z-10 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
           MainContainer={this.state.MainContainer}
+          SelectedContainer={this.state.SelectedContainer}
           isOpen={this.state.isSVGSidebarOpen}
           onClick={() => this.ToggleSVGSidebar()}
           selectContainer={(container: Container) => this.SelectContainer(container)}
diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx
index bac4a5a..6e9d632 100644
--- a/src/Components/SVGSidebar/SVGSidebar.tsx
+++ b/src/Components/SVGSidebar/SVGSidebar.tsx
@@ -4,6 +4,7 @@ import { Container } from '../SVG/Elements/Container';
 interface ISVGSidebarProps {
   MainContainer: Container | null,
   isOpen: boolean,
+  SelectedContainer: Container | null,
   onClick: () => void,
   selectContainer: (container: Container) => void
 }
@@ -46,8 +47,12 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
     this.iterateChilds((container: Container, depth: number) => {
       const key = container.props.id.toString();
       const text = '\t\t'.repeat(depth) + key;
+      const selectedClass: string = this.props.SelectedContainer !== null &&
+        this.props.SelectedContainer.props.id === container.props.id
+        ? 'bg-blue-500 hover:bg-slate-500'
+        : 'bg-slate-400 hover:bg-slate-600';
       containerRows.push(
-        <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key} onClick={() => this.props.selectContainer(container)}>
+        <button className={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
           { text }
         </button>
       );