Skip to content

Commit 997fb77

Browse files
fezcodefezcode
committed
sidebar
1 parent 0cf7d6f commit 997fb77

File tree

3 files changed

+38
-19
lines changed

3 files changed

+38
-19
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
1818
<title>fezcodex</title>
1919
</head>
20-
<body class="bg-gray-950">
20+
<body class="bg-slate-950">
2121
<noscript>You need to enable JavaScript to run this app.</noscript>
2222
<div id="root"></div>
2323
</body>

‎src/components/Sidebar.js‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import React, { useState } from 'react';
2+
import React, { useState, useEffect } from 'react';
33

44
import { NavLink, Link, useLocation } from 'react-router-dom';
55

@@ -15,15 +15,27 @@ import { version } from '../version';
1515

1616
const Sidebar = ({ isOpen, toggleSidebar }) => {
1717

18-
const [isContentOpen, setIsContentOpen] = useState(true);
19-
2018
const [isMainOpen, setIsMainOpen] = useState(true);
21-
22-
const [isGamesOpen, setIsGamesOpen] = useState(true);
23-
24-
const [isExternalLinksOpen, setIsExternalLinksOpen] = useState(true);
25-
26-
const location = useLocation();
19+
const [isContentOpen, setIsContentOpen] = useState(true);
20+
const [isGamesOpen, setIsGamesOpen] = useState(true);
21+
const [isExternalLinksOpen, setIsExternalLinksOpen] = useState(true);
22+
const [allSectionsOpen, setAllSectionsOpen] = useState(true); // New state for collapse all
23+
24+
const location = useLocation();
25+
26+
// Effect to update allSectionsOpen when individual sections change
27+
useEffect(() => {
28+
setAllSectionsOpen(isMainOpen && isContentOpen && isGamesOpen && isExternalLinksOpen);
29+
}, [isMainOpen, isContentOpen, isGamesOpen, isExternalLinksOpen]);
30+
31+
const toggleAllSections = () => {
32+
const newState = !allSectionsOpen;
33+
setAllSectionsOpen(newState);
34+
setIsMainOpen(newState);
35+
setIsContentOpen(newState);
36+
setIsGamesOpen(newState);
37+
setIsExternalLinksOpen(newState);
38+
};
2739

2840

2941

@@ -39,7 +51,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
3951
4052
4153
42-
? 'text-blue-500 bg-gray-800 font-bold'
54+
? 'text-primary-400 bg-gray-800 font-bold'
4355
4456
4557
@@ -99,7 +111,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
99111

100112
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
101113

102-
className={`fixed top-0 left-0 h-screen bg-gray-900/90 backdrop-blur-sm text-white w-64 z-50 flex flex-col border-r border-gray-700/50`}
114+
className={`fixed top-0 left-0 h-screen bg-black/30 backdrop-blur-sm text-white w-64 z-50 flex flex-col border-r border-gray-700/50`}
103115

104116
>
105117

@@ -120,6 +132,13 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
120132
)}
121133

122134
<div className="flex-grow p-4">
135+
<button
136+
onClick={toggleAllSections}
137+
className="flex items-center justify-center w-full text-sm font-medium uppercase tracking-wider mb-4 focus:outline-none bg-gray-700 text-white hover:bg-gray-600 rounded-md p-2"
138+
>
139+
<span>{allSectionsOpen ? 'Collapse All' : 'Expand All'}</span>
140+
<List size={20} className={`transition-transform ${allSectionsOpen ? 'transform rotate-180' : ''}`} />
141+
</button>
123142

124143
<div className="mt-8">
125144

@@ -129,7 +148,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
129148

130149
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${
131150
132-
isMainActive ? 'text-white' : 'text-gray-400'
151+
isMainActive ? 'text-red-400' : 'text-gray-300'
133152
134153
}`}
135154

@@ -175,7 +194,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
175194

176195
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${
177196
178-
isContentActive ? 'text-white' : 'text-gray-400'
197+
isContentActive ? 'text-red-400' : 'text-gray-300'
179198
180199
}`}
181200

@@ -223,11 +242,11 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
223242

224243
<div className="mt-8">
225244

226-
<button
245+
<button
227246

228-
onClick={() => setIsGamesOpen(!isGamesOpen)}
247+
onClick={() => setIsGamesOpen(!isGamesOpen)}
229248

230-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none text-gray-400`}
249+
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${isGamesOpen ? 'text-gray-300' : 'text-gray-300'}`}
231250

232251
>
233252

@@ -261,7 +280,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
261280

262281
onClick={() => setIsExternalLinksOpen(!isExternalLinksOpen)}
263282

264-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none text-gray-400`}
283+
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${isExternalLinksOpen ? 'text-gray-300' : 'text-gray-300'}`}
265284

266285
>
267286

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
body {
66
margin: 0;
7-
background-color: #030712;
7+
background-color: #020617;
88
font-family: 'Space Mono', 'JetBrains Mono', monospace, sans-serif !important;
99
font-weight: 400 !important;
1010
font-style: normal !important;

0 commit comments

Comments
 (0)