Skip to content

Commit 3827e75

Browse files
fezcodefezcode
committed
fix: sidebar improvements.
1 parent ac4a80d commit 3827e75

File tree

1 file changed

+39
-48
lines changed

1 file changed

+39
-48
lines changed

‎src/components/Sidebar.js‎

Lines changed: 39 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ import {
2929
TimerIcon,
3030
CaretDoubleDownIcon,
3131
CaretDoubleUpIcon,
32-
PushPin,
33-
Trophy,
32+
PushPinIcon,
33+
TrophyIcon,
3434
MusicNoteIcon,
3535
SkullIcon,
3636
BugBeetleIcon,
@@ -50,7 +50,7 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
5050
isAppsOpen: true,
5151
isExtrasOpen: false,
5252
isGamesOpen: false,
53-
isExternalLinksOpen: false,
53+
isStatusOpen: false,
5454
},
5555
);
5656

@@ -121,11 +121,14 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
121121
location.pathname.startsWith('/blog') ||
122122
location.pathname.startsWith('/projects') ||
123123
location.pathname.startsWith('/logs') ||
124-
location.pathname.startsWith('/news') ||
125-
location.pathname.startsWith('/timeline');
124+
location.pathname.startsWith('/news');
126125
const isAppsActive =
126+
location.pathname.startsWith('/pinned-apps') ||
127127
location.pathname.startsWith('/apps') ||
128128
location.pathname.startsWith('/commands');
129+
const isStatusActive =
130+
location.pathname.startsWith('/timeline') ||
131+
location.pathname.startsWith('/roadmap');
129132

130133
const variants = {
131134
open: { x: 0 },
@@ -196,7 +199,7 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
196199
<span>About</span>
197200
</NavLink>
198201
<NavLink to="/achievements" className={getLinkClass}>
199-
<Trophy size={24} />
202+
<TrophyIcon size={24} />
200203
<span>Trophy Room</span>
201204
</NavLink>
202205
</nav>
@@ -237,14 +240,6 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
237240
<GlobeSimpleIcon size={24} />
238241
<span>News</span>
239242
</NavLink>
240-
<NavLink to="/timeline" className={getLinkClass}>
241-
<TimerIcon size={24} />
242-
<span>Timeline</span>
243-
</NavLink>
244-
<NavLink to="/roadmap" className={getLinkClass}>
245-
<BugBeetleIcon size={24} />
246-
<span>Fezzilla</span>
247-
</NavLink>
248243
</nav>
249244
)}
250245
</div>
@@ -254,9 +249,7 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
254249
onClick={() => toggleSection('isAppsOpen')}
255250
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${isAppsActive ? 'text-sidebar-highlight' : 'text-gray-100'}`}
256251
>
257-
<span
258-
className={`flex items-center gap-2 font-sans ${isAppsActive ? 'text-sidebar-highlight' : 'text-white'}`}
259-
>
252+
<span className={`flex items-center gap-2 font-sans ${isAppsActive ? 'text-sidebar-highlight' : 'text-white'}`}>
260253
<SquaresFourIcon size={16} />
261254
<span>Apps</span>
262255
</span>
@@ -268,7 +261,7 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
268261
{sidebarState.isAppsOpen && (
269262
<nav className={getGroupClass(isAppsActive)}>
270263
<NavLink to="/pinned-apps" className={getLinkClass}>
271-
<PushPin size={24} />
264+
<PushPinIcon size={24} />
272265
<span>Pinned Apps</span>
273266
</NavLink>
274267
<NavLink to="/apps" className={getLinkClass}>
@@ -284,6 +277,34 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
284277
)}
285278
</div>
286279

280+
<div className="mt-8">
281+
<button
282+
onClick={() => toggleSection('isStatusOpen')}
283+
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${isStatusActive ? 'text-sidebar-highlight' : 'text-gray-100'}`}
284+
>
285+
<span className={`flex items-center gap-2 font-sans ${isStatusActive ? 'text-sidebar-highlight' : 'text-white'}`}>
286+
<SkullIcon size={16} />
287+
<span>Status</span>
288+
</span>
289+
<CaretDownIcon
290+
size={20}
291+
className={`transition-transform ${sidebarState.isStatusOpen ? 'transform rotate-180' : ''}`}
292+
/>
293+
</button>
294+
{sidebarState.isStatusOpen && (
295+
<nav className={getGroupClass(isStatusActive)}>
296+
<NavLink to="/timeline" className={getLinkClass}>
297+
<TimerIcon size={24} />
298+
<span>Timeline</span>
299+
</NavLink>
300+
<NavLink to="/roadmap" className={getLinkClass}>
301+
<BugBeetleIcon size={24} />
302+
<span>Fezzilla</span>
303+
</NavLink>
304+
</nav>
305+
)}
306+
</div>
307+
287308
<div className="mt-8">
288309
<button
289310
onClick={() => toggleSection('isExtrasOpen')}
@@ -363,36 +384,6 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
363384
</nav>
364385
)}
365386
</div>
366-
367-
<div className="mt-8">
368-
<button
369-
onClick={() => toggleSection('isExternalLinksOpen')}
370-
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${sidebarState.isExternalLinksOpen ? 'text-gray-100' : 'text-gray-100'}`}
371-
>
372-
<span className="flex items-center gap-2 font-sans text-white">
373-
<AnchorIcon size={16} />
374-
<span>External Links</span>
375-
<ArrowSquareOutIcon size={16} className="text-rose-400" />
376-
</span>
377-
<CaretDownIcon
378-
size={20}
379-
className={`transition-transform ${sidebarState.isExternalLinksOpen ? 'transform rotate-180' : ''}`}
380-
/>
381-
</button>
382-
{sidebarState.isExternalLinksOpen && (
383-
<nav className={getGroupClass(false)}>
384-
<a
385-
href="https://github.com/fezcode"
386-
target="_blank"
387-
rel="noopener noreferrer"
388-
className={`flex items-center space-x-3 px-3 py-1 rounded-md transition-colors text-gray-100 hover:text-white hover:bg-gray-800`}
389-
>
390-
<GithubLogoIcon size={24} />
391-
<span>GitHub</span>
392-
</a>
393-
</nav>
394-
)}
395-
</div>
396387
</div>
397388
{showScrollGradient.bottom && (
398389
<div className="absolute bottom-0 left-0 right-0 h-10 flex items-center justify-center bg-gradient-to-t from-black/90 to-transparent z-10 pointer-events-none">

0 commit comments

Comments
 (0)