Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix mobile view left single sidebar + Fix Bar wrong icon toggled

Browse source
This commit is contained in:
Eric NGUYEN 2022-10-03 14:24:26 +02:00
parent 701989649c
commit fa3246b725
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/Bar/Bar.tsx
View file

@ -79,7 +79,7 @@ export function Bar(props: IBarProps): JSX.Element {
title='Settings' title='Settings'
onClick={() => props.toggleSettings()}> onClick={() => props.toggleSettings()}>
{ {
props.isMessagesOpen props.isSettingsOpen
? <Cog8ToothIconS className='heroicon' /> ? <Cog8ToothIconS className='heroicon' />
: <Cog8ToothIcon className='heroicon' /> : <Cog8ToothIcon className='heroicon' />
} }

18
src/Components/UI/UI.tsx
View file

@ -135,15 +135,27 @@ export function UI(props: IUIProps): JSX.Element {
const isLeftSidebarOpen = selectedSidebar !== SidebarType.None; const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols; const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
let isLeftSidebarOpenClasses = 'left-16 -bottom-full md:-left-64 md:bottom-0'; let isLeftSidebarOpenClasses = new Set<string>([
'left-sidebar',
'left-16',
'-bottom-full',
'md:-left-64',
'md:bottom-0'
]);
let isRightSidebarOpenClasses = 'right-0 -bottom-full md:-right-80 md:bottom-0'; let isRightSidebarOpenClasses = 'right-0 -bottom-full md:-right-80 md:bottom-0';
if (isLeftSidebarOpen) { if (isLeftSidebarOpen) {
isLeftSidebarOpenClasses = 'left-16'; isLeftSidebarOpenClasses.delete('-bottom-full');
isLeftSidebarOpenClasses.delete('md:-left-64');
isLeftSidebarOpenClasses.delete('md:bottom-0');
} }
if (isRightSidebarOpen) { if (isRightSidebarOpen) {
isRightSidebarOpenClasses = 'right-0'; isRightSidebarOpenClasses = 'right-0';
} else {
isLeftSidebarOpenClasses.delete('left-sidebar');
isLeftSidebarOpenClasses.add('left-sidebar-single');
} }
return ( return (
@ -171,7 +183,7 @@ export function UI(props: IUIProps): JSX.Element {
} } } }
/> />
<Sidebar <Sidebar
className={`left-sidebar ${isLeftSidebarOpenClasses}`} className={`${[...isLeftSidebarOpenClasses.values()].join(' ')}`}
title={leftSidebarTitle} title={leftSidebarTitle}
> >
{ leftChildren } { leftChildren }