Refactor sidebar layout and button handling in App.tsx
This commit is contained in:
41
src/App.tsx
41
src/App.tsx
@@ -1357,8 +1357,9 @@ export default function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
|
<div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
|
||||||
|
<aside className={`sidebar${sidebarCollapsed ? " sidebar--collapsed" : ""}`}>
|
||||||
{!sidebarCollapsed ? (
|
{!sidebarCollapsed ? (
|
||||||
<aside className="sidebar">
|
<>
|
||||||
<div className="sidebar__header">
|
<div className="sidebar__header">
|
||||||
<div className="sidebar__title-row">
|
<div className="sidebar__title-row">
|
||||||
<div className="app-title">TextDB</div>
|
<div className="app-title">TextDB</div>
|
||||||
@@ -1371,9 +1372,7 @@ export default function App() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="prompt-list">
|
<div className="prompt-list">
|
||||||
<div
|
<div className="prompt-list__inner">
|
||||||
className="prompt-list__inner"
|
|
||||||
>
|
|
||||||
{loadingTexts || loadingFolders ? (
|
{loadingTexts || loadingFolders ? (
|
||||||
<div className="empty">Loading…</div>
|
<div className="empty">Loading…</div>
|
||||||
) : hasSearch && texts.length === 0 ? (
|
) : hasSearch && texts.length === 0 ? (
|
||||||
@@ -1391,7 +1390,21 @@ export default function App() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="sidebar__footer">
|
</>
|
||||||
|
) : null}
|
||||||
|
<div className={`sidebar__footer${sidebarCollapsed ? " sidebar__footer--collapsed" : ""}`}>
|
||||||
|
{sidebarCollapsed ? (
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
onClick={() => setSidebarCollapsed(false)}
|
||||||
|
aria-label="Expand sidebar"
|
||||||
|
title="Expand sidebar"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span className="icon-button__glyph" aria-hidden="true">▶</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<button
|
<button
|
||||||
className="icon-button"
|
className="icon-button"
|
||||||
onClick={handleNewFolder}
|
onClick={handleNewFolder}
|
||||||
@@ -1437,9 +1450,10 @@ export default function App() {
|
|||||||
>
|
>
|
||||||
<span className="icon-button__glyph" aria-hidden="true">◀</span>
|
<span className="icon-button__glyph" aria-hidden="true">◀</span>
|
||||||
</button>
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
) : null}
|
|
||||||
|
|
||||||
<main className="workspace">
|
<main className="workspace">
|
||||||
<div className="workspace__body">
|
<div className="workspace__body">
|
||||||
@@ -1665,21 +1679,6 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{sidebarCollapsed ? (
|
|
||||||
<div className="workspace__footer">
|
|
||||||
<div className="sidebar__footer sidebar__footer--collapsed">
|
|
||||||
<button
|
|
||||||
className="icon-button"
|
|
||||||
onClick={() => setSidebarCollapsed(false)}
|
|
||||||
aria-label="Expand sidebar"
|
|
||||||
title="Expand sidebar"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span className="icon-button__glyph" aria-hidden="true">▶</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{settingsOpen ? (
|
{settingsOpen ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user