Add SVG Sidebar
This commit is contained in:
parent
7e74be6d3b
commit
17aa2b0961
3 changed files with 45 additions and 11 deletions
32
src/App.tsx
32
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()}>☰ 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()}>☰ 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()}>☰ Menu</button>
|
||||
<SVG MainContainer={this.state.configuration.MainContainer} />
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue