Skip to content

Commit c2b4ec6

Browse files
author
iitzIrFan
committed
implement collapsible sidebar functionality with toggle button
1 parent c7ebac7 commit c2b4ec6

File tree

2 files changed

+152
-8
lines changed

2 files changed

+152
-8
lines changed

‎src/pages/dashboard/dashboard.css‎

Lines changed: 126 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,39 @@
33
display: flex;
44
min-height: 100vh;
55
background-color: var(--ifm-background-color);
6+
position: relative;
67
}
78

89
/* Sidebar Styles */
910
.dashboard-sidebar {
10-
width: 250px;
11+
width: 200px;
1112
background: var(--ifm-card-background-color);
1213
border-right: 1px solid var(--ifm-toc-border-color);
1314
padding: 1.5rem 0;
1415
position: fixed;
1516
height: 100vh;
1617
overflow-y: auto;
17-
z-index: 100;
18+
transition: width 0.3s ease, transform 0.3s ease;
19+
/* z-index: 100; */
20+
display: flex;
21+
flex-direction: column;
22+
}
23+
24+
.sidebar-header {
25+
padding: 0 1.5rem;
26+
margin-bottom: 1.5rem;
27+
position: relative;
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
1831
}
1932

2033
.sidebar-logo {
21-
padding: 0 1.5rem 1.5rem;
34+
padding: 0 0 1.5rem 0;
2235
border-bottom: 1px solid var(--ifm-toc-border-color);
23-
margin-bottom: 1.5rem;
36+
margin-bottom: 0;
37+
flex-grow: 1;
38+
transition: opacity 0.2s ease;
2439
}
2540

2641
.sidebar-logo h2 {
@@ -32,6 +47,15 @@
3247
list-style: none;
3348
padding: 0;
3449
margin: 0;
50+
flex-grow: 1;
51+
}
52+
53+
.sidebar-footer {
54+
padding: 1rem 1.5rem 0;
55+
margin-top: auto;
56+
border-top: 1px solid var(--ifm-toc-border-color);
57+
padding-top: 1.5rem;
58+
transition: opacity 0.2s ease;
3559
}
3660

3761
.nav-item {
@@ -41,6 +65,7 @@
4165
cursor: pointer;
4266
transition: all 0.2s ease;
4367
color: var(--ifm-font-color-base);
68+
white-space: nowrap;
4469
}
4570

4671
.nav-item:hover {
@@ -60,18 +85,95 @@
6085
font-size: 1.25rem;
6186
}
6287

88+
/* Toggle Button */
89+
.sidebar-toggle {
90+
background: var(--ifm-color-primary);
91+
color: white;
92+
border: none;
93+
border-radius: 50%;
94+
width: 30px;
95+
height: 30px;
96+
display: flex;
97+
align-items: center;
98+
justify-content: center;
99+
cursor: pointer;
100+
margin-left: 1rem;
101+
flex-shrink: 0;
102+
transition: background-color 0.2s ease;
103+
}
104+
105+
.sidebar-toggle:hover {
106+
background: var(--ifm-color-primary-dark);
107+
}
108+
109+
.sidebar-toggle.bottom-toggle {
110+
margin: 1.5rem auto 0;
111+
display: block;
112+
}
113+
114+
/* Collapsed Sidebar */
115+
.dashboard-sidebar.collapsed {
116+
width: 70px;
117+
overflow: hidden;
118+
}
119+
120+
.dashboard-sidebar.collapsed .sidebar-logo h2,
121+
.dashboard-sidebar.collapsed .nav-text,
122+
.dashboard-sidebar.collapsed .sidebar-footer {
123+
opacity: 0;
124+
pointer-events: none;
125+
white-space: nowrap;
126+
}
127+
128+
.dashboard-sidebar.collapsed .sidebar-header {
129+
justify-content: center;
130+
padding: 0 1rem;
131+
}
132+
133+
.dashboard-sidebar.collapsed .sidebar-toggle {
134+
position: absolute;
135+
right: 5px;
136+
top: 10px;
137+
}
138+
139+
.dashboard-sidebar.collapsed .sidebar-toggle.bottom-toggle {
140+
position: static;
141+
margin: 1rem auto 0;
142+
}
143+
144+
.dashboard-sidebar.collapsed .nav-item {
145+
padding: 0.75rem 1rem;
146+
justify-content: center;
147+
}
148+
149+
.dashboard-sidebar.collapsed .nav-icon {
150+
margin-right: 0;
151+
font-size: 1.5rem;
152+
}
153+
63154
/* Main Content */
64155
.dashboard-main {
65156
flex: 1;
66157
margin-left: 250px; /* Match sidebar width */
67158
padding: 2rem;
68159
max-width: calc(100% - 250px);
160+
transition: margin-left 0.3s ease, max-width 0.3s ease;
161+
}
162+
163+
.dashboard-main.sidebar-collapsed {
164+
margin-left: 70px;
165+
max-width: calc(100% - 70px);
69166
}
70167

71168
.dashboard-main.discuss-view {
72169
max-width: 100%;
73170
}
74171

172+
.dashboard-main.sidebar-collapsed.discuss-view {
173+
margin-left: 0;
174+
max-width: 100%;
175+
}
176+
75177
/* Discussion Section */
76178
.discussion-container {
77179
max-width: 800px;
@@ -271,6 +373,26 @@
271373
align-items: center;
272374
}
273375

376+
/* Center images in leaderboard when sidebar is collapsed */
377+
.dashboard-main.sidebar-collapsed .leaderboard-card {
378+
grid-template-columns: 1fr;
379+
text-align: center;
380+
padding: 1.5rem;
381+
}
382+
383+
.dashboard-main.sidebar-collapsed .leaderboard-avatar {
384+
margin: 0 auto;
385+
}
386+
387+
.dashboard-main.sidebar-collapsed .leaderboard-info {
388+
grid-column: 1 / -1;
389+
}
390+
391+
.dashboard-main.sidebar-collapsed .leaderboard-actions {
392+
grid-column: 1 / -1;
393+
justify-self: center;
394+
}
395+
274396
.leaderboard-card:hover {
275397
transform: translateY(-2px);
276398
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

‎src/pages/dashboard/index.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const DashboardContent: React.FC = () => {
3030
const location = useLocation();
3131
const history = useHistory();
3232
const [activeTab, setActiveTab] = useState<'home' | 'discuss'>('home');
33+
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
3334

3435
useEffect(() => {
3536
// Set active tab based on URL hash
@@ -223,9 +224,18 @@ const DashboardContent: React.FC = () => {
223224
</Head>
224225
<div className="dashboard-layout">
225226
{/* Side Navigation */}
226-
<nav className="dashboard-sidebar">
227-
<div className="sidebar-logo">
228-
<h2>RecodeHive</h2>
227+
<nav className={`dashboard-sidebar ${isSidebarCollapsed ? 'collapsed' : ''}`}>
228+
<div className="sidebar-header">
229+
<div className="sidebar-logo">
230+
<h2>RecodeHive</h2>
231+
</div>
232+
<button
233+
className="sidebar-toggle"
234+
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
235+
aria-label={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
236+
>
237+
{isSidebarCollapsed ? '→' : '←'}
238+
</button>
229239
</div>
230240
<ul className="sidebar-nav">
231241
<li
@@ -243,9 +253,21 @@ const DashboardContent: React.FC = () => {
243253
<span className="nav-text">Discuss</span>
244254
</li>
245255
</ul>
256+
<div className="sidebar-footer">
257+
<button
258+
className="sidebar-toggle bottom-toggle"
259+
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
260+
aria-label={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
261+
>
262+
{isSidebarCollapsed ? '→' : '←'}
263+
</button>
264+
</div>
246265
</nav>
247266

248-
<main className={`dashboard-main ${activeTab === 'discuss' ? 'discuss-view' : ''}`}>
267+
<main
268+
className={`dashboard-main ${activeTab === 'discuss' ? 'discuss-view' : ''} ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}
269+
onClick={() => isSidebarCollapsed && setIsSidebarCollapsed(false)}
270+
>
249271
{activeTab === 'home' ? (
250272
<div>
251273
{/* Hero Section */}

0 commit comments

Comments
 (0)