Skip to content

feat(ui): add sidebar collapse toggle button in tasks page #766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dvlpwork wants to merge 10 commits into
base: develop
Choose a base branch
from
+64 −7
Draft

feat(ui): add sidebar collapse toggle button in tasks page #766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ceef1b9
feat(ui): add sidebar collapse toggle button in tasks page
dvlpwork Mar 28, 2026
43c9dae
feat: hide sidebar content when collapsed to prevent layout overflow
dvlpwork Mar 29, 2026
d40ba5e
style(ui): redesign tasks sidebar fold button to match nav sidebar pa…
dvlpwork Mar 29, 2026
9278969
style(ui): revert unnecessary duration and comment changes
dvlpwork Mar 29, 2026
8d27683
fix(ui): persist tasks sidebar state to localStorage and add aria-hidden
dvlpwork Mar 29, 2026
501e785
refactor(ui): extract localStorage key into constant
dvlpwork Mar 29, 2026
f668dd0
fix(ui): close tasks sidebar by default on page load
dvlpwork Mar 29, 2026
e9be2d1
style(ui): close tasks sidebar by default on mobile devices
dvlpwork Mar 29, 2026
11cc399
Merge branch 'develop' of https://github.com/oqtopus-team/qdash into …
dvlpwork Apr 2, 2026
f248cc7
style(ui): add sidebar toggle buttons to files page and fix mobile ex…
dvlpwork Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions ui/src/components/features/files/FilesPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
ArrowDown,
Check,
ChevronLeft,
ChevronRight,
Database,
ExternalLink,
File,
FileJson,
Folder,
FolderOpen,
GitPullRequestArrow,
PanelLeft,
Pencil,
Plus,
Save,
Expand Down Expand Up @@ -396,6 +399,13 @@ export function FilesPageContent() {
<div className="h-screen flex flex-col bg-base-300">
<div className="flex flex-col sm:flex-row sm:items-center justify-between px-2 sm:px-4 py-2 bg-base-200 border-b border-base-300 gap-2">
<div className="flex items-center gap-2 sm:gap-4 min-w-0">
<button
onClick={() => setIsSidebarVisible(!isSidebarVisible)}
className="btn btn-sm btn-ghost hidden sm:flex"
title={isSidebarVisible ? "Hide sidebar" : "Show sidebar"}
>
<PanelLeft size={16} />
</button>
<div className="flex items-center gap-1 sm:gap-2 min-w-0 overflow-hidden">
<span className="text-sm font-medium flex-shrink-0 hidden sm:inline">
Config Files
Expand Down Expand Up @@ -573,20 +583,42 @@ export function FilesPageContent() {

<div className="flex-1 flex overflow-hidden">
<div
className={`${isSidebarVisible ? "w-48 sm:w-64" : "w-0"} bg-base-100 border-r border-base-300 overflow-y-auto transition-all duration-200 overflow-hidden flex-shrink-0`}
className={`${isSidebarVisible ? "w-48 sm:w-64 border-r border-base-300" : "w-0"} bg-base-100 flex flex-col flex-shrink-0 transition-all duration-300 overflow-hidden`}
aria-hidden={!isSidebarVisible}
>
<div className="py-2">
<h2 className="text-xs font-bold text-base-content/60 mb-1 px-3 tracking-wider">
{/* Sidebar header with mobile close button */}
<div className="flex items-center border-b border-base-300 flex-shrink-0">
<span className="flex-1 text-xs font-bold text-base-content/60 px-3 tracking-wider py-2">
EXPLORER
</h2>
</span>
<button
onClick={() => setIsSidebarVisible(false)}
className="btn btn-ghost btn-sm btn-square sm:hidden"
aria-label="Collapse sidebar"
>
<ChevronLeft size={16} />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto py-2">
<div className="text-xs text-base-content/50 px-3 mb-2 uppercase tracking-wide">
Config Files
</div>
{fileTreeData && renderFileTree(fileTreeData)}
</div>
</div>

<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col relative">
{/* Expand sidebar button (shown when sidebar is collapsed, mobile only) */}
{!isSidebarVisible && (
<button
onClick={() => setIsSidebarVisible(true)}
className="absolute left-0 top-0 z-10 btn btn-sm btn-square bg-white hover:bg-base-200 border border-base-300 rounded-l-none sm:hidden"
aria-label="Expand sidebar"
>
<ChevronRight size={16} />
</button>
)}
{selectedFile ? (
<>
{isContentLoading ? (
Expand Down
29 changes: 27 additions & 2 deletions ui/src/components/features/tasks/TasksPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { useState, useEffect, useMemo } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
Braces,
ChevronLeft,
ChevronRight,
Copy,
File,
FileCode2,
Expand Down Expand Up @@ -60,6 +62,11 @@ export function TasksPageContent() {
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const [isEditorLocked, setIsEditorLocked] = useState(true);
const [isSidebarVisible, setIsSidebarVisible] = useState(true);
useEffect(() => {
if (window.innerWidth < 640) {
setIsSidebarVisible(false);
}
}, []);

// Fetch settings (including default backend)
const { data: settingsData } = useQuery({
Expand Down Expand Up @@ -508,7 +515,8 @@ export function TasksPageContent() {
<div className="flex-1 flex overflow-hidden">
{/* Sidebar */}
<div
className={`${isSidebarVisible ? "w-48 sm:w-64" : "w-0"} bg-base-100 border-r border-base-300 flex flex-col flex-shrink-0 transition-all duration-200 overflow-hidden`}
className={`${isSidebarVisible ? "w-48 sm:w-64 border-r border-base-300" : "w-0"} bg-base-100 flex flex-col flex-shrink-0 transition-all duration-200 overflow-hidden`}
aria-hidden={!isSidebarVisible}
>
{/* Tab buttons */}
<div className="flex border-b border-base-300">
Expand All @@ -534,6 +542,13 @@ export function TasksPageContent() {
<Braces size={14} />
Tasks
</button>
<button
onClick={() => setIsSidebarVisible(false)}
className="btn btn-ghost btn-sm btn-square sm:hidden"
aria-label="Collapse sidebar"
>
<ChevronLeft size={16} />
</button>
</div>

{/* Content */}
Expand Down Expand Up @@ -579,7 +594,17 @@ export function TasksPageContent() {
</div>

{/* Editor */}
<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col relative">
{/* Expand sidebar button (shown when sidebar is collapsed, mobile only) */}
{!isSidebarVisible && (
<button
onClick={() => setIsSidebarVisible(true)}
className="absolute left-0 top-0 z-10 btn btn-sm btn-square bg-white hover:bg-base-200 border border-base-300 rounded-l-none sm:hidden"
aria-label="Expand sidebar"
>
<ChevronRight size={16} />
</button>
)}
{selectedFile ? (
<>
{isContentLoading ? (
Expand Down
Loading