fix: add close buttons to mobile sidebars
- RightSidebar: added onCollapse prop and close button in header
- LeftSidebar: wired existing onCollapse prop in App.tsx
- CSS: show .leftbar-toggle and .rightbar-close on mobile
- Both buttons call setMobile{Left,Right}Open(false) to close overlays
This commit is contained in:
@@ -954,6 +954,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
|
|||||||
selectedTemplate={selectedTemplate}
|
selectedTemplate={selectedTemplate}
|
||||||
onTemplateSelect={handleTemplateSelect}
|
onTemplateSelect={handleTemplateSelect}
|
||||||
className={mobileLeftOpen ? 'open' : ''}
|
className={mobileLeftOpen ? 'open' : ''}
|
||||||
|
onCollapse={() => setMobileLeftOpen(false)}
|
||||||
/>
|
/>
|
||||||
<CanvasArea
|
<CanvasArea
|
||||||
cursorPos={cursorPos}
|
cursorPos={cursorPos}
|
||||||
@@ -1017,6 +1018,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
|
|||||||
onKISuggestionClick={handleSuggestionClick}
|
onKISuggestionClick={handleSuggestionClick}
|
||||||
kiLoading={kiLoading}
|
kiLoading={kiLoading}
|
||||||
className={mobileRightOpen ? 'open' : ''}
|
className={mobileRightOpen ? 'open' : ''}
|
||||||
|
onCollapse={() => setMobileRightOpen(false)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<CommandLine
|
<CommandLine
|
||||||
|
|||||||
@@ -23,9 +23,13 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
|
|||||||
onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
|
onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
|
||||||
onBlockCategoryChange, onBlockSearch, onDragBlock,
|
onBlockCategoryChange, onBlockSearch, onDragBlock,
|
||||||
kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
|
kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
|
||||||
|
onCollapse,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
|
<aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
|
||||||
|
<button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
<div className="rightbar-tabs" role="tablist">
|
<div className="rightbar-tabs" role="tablist">
|
||||||
{tabs.map((tab) => (
|
{tabs.map((tab) => (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -1273,6 +1273,23 @@ a:hover { text-decoration: underline; }
|
|||||||
body.drawer-open { overflow: auto !important; }
|
body.drawer-open { overflow: auto !important; }
|
||||||
/* Mobile sidebars: scrollable content, visible labels */
|
/* Mobile sidebars: scrollable content, visible labels */
|
||||||
.leftbar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
|
.leftbar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
|
||||||
|
.leftbar-toggle { display: grid !important; }
|
||||||
|
.rightbar-close { display: grid !important; }
|
||||||
|
.rightbar-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 6px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-text);
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.rightbar-close svg { width: 18px; height: 18px; }
|
||||||
|
.rightbar-close:hover { background: var(--color-surface-3); }
|
||||||
.leftbar-title { display: block; }
|
.leftbar-title { display: block; }
|
||||||
.tool-section-label { display: block; padding: 0 6px 6px; }
|
.tool-section-label { display: block; padding: 0 6px 6px; }
|
||||||
.tool-btn-label { display: block; }
|
.tool-btn-label { display: block; }
|
||||||
|
|||||||
@@ -159,6 +159,7 @@ export interface RightSidebarProps {
|
|||||||
kiLoading?: boolean;
|
kiLoading?: boolean;
|
||||||
onUpdateElement?: (el: CADElement) => void;
|
onUpdateElement?: (el: CADElement) => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
onCollapse?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PropertiesPanelProps {
|
export interface PropertiesPanelProps {
|
||||||
|
|||||||
Reference in New Issue
Block a user