Skip to content

Commit 5fc1b75

Browse files
PraneethKulukuri26PraneethKulukuri26
committed
feat(sidebar): widen project selector and improve navigation layout
- Increased sidebar width to 300px for better readability. - Widened the project selector and dropdown menu by reducing padding. - Added a Home button in the branding header to return to the project selection screen. - Added an explicit Close Project option in the project dropdown menu. - Fixed a bug where the API documentation page remained open when switching projects.
1 parent 9735e1c commit 5fc1b75

2 files changed

Lines changed: 40 additions & 13 deletions

File tree

‎src/renderer/src/components/Sidebar.tsx‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function Sidebar() {
8989

9090
return (
9191
<>
92-
<aside className="fade-in" style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '260px', background: '#0A0A0A', borderRight: '1px solid #1F1F1F' }}>
92+
<aside className="fade-in" style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '300px', background: '#0A0A0A', borderRight: '1px solid #1F1F1F' }}>
9393

9494
{/* ═══ Brand header ═══ */}
9595
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', flexShrink: 0, height: '52px', borderBottom: '1px solid #1A1A1A' }}>
@@ -104,13 +104,24 @@ export function Sidebar() {
104104
</button>
105105
<span style={{ fontSize: 'calc(13px * var(--font-scale))', fontWeight: 600, color: 'white', letterSpacing: '-0.01em' }}>API Documenter</span>
106106
</div>
107+
{currentProjectId && (
108+
<button onClick={() => selectProject(null)} className="rounded-lg group"
109+
style={{ width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#6B7280', transition: '150ms ease' }}
110+
onMouseEnter={e => { e.currentTarget.style.background = '#151515'; e.currentTarget.style.color = '#FFFFFF' }}
111+
onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#6B7280' }}
112+
title="Go to Home">
113+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
114+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
115+
<polyline points="9 22 9 12 15 12 15 22" />
116+
</svg>
117+
</button>
118+
)}
107119
</div>
108120

109121
{/* ═══ PROJECT section ═══ */}
110122
<div style={{ flexShrink: 0, borderBottom: '1px solid #1A1A1A' }}>
111123
<p style={{ padding: '20px 20px 10px 20px', color: '#444', margin: 0, fontSize: 'calc(9px * var(--font-scale))', letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 800 }}>Project Workspace</p>
112-
<div style={{ padding: '0 16px 20px 16px' }}>
113-
<div style={{ padding: '0 16px 20px 16px', position: 'relative' }}>
124+
<div style={{ padding: '0 12px 16px 12px', position: 'relative' }}>
114125
{/* Custom Dropdown Trigger */}
115126
<button
116127
onClick={(e) => { e.stopPropagation(); setProjectDdOpen(!projectDdOpen) }}
@@ -143,13 +154,13 @@ export function Sidebar() {
143154

144155
{/* Floating Menu */}
145156
{projectDdOpen && (
146-
<div className="fade-in scale-in z-[3000]"
147-
style={{
148-
position: 'absolute', top: '100%', left: '16px', right: '16px', marginTop: '8px',
149-
background: '#111111', border: '1px solid #2A2A2A', borderRadius: '12px',
150-
boxShadow: '0 12px 48px rgba(0,0,0,0.6)', padding: '6px',
151-
animation: 'fadeUp 150ms ease'
152-
}}>
157+
<div className="fade-in scale-in z-[3000]"
158+
style={{
159+
position: 'absolute', top: '100%', left: '0', right: '0', marginTop: '8px',
160+
background: '#111111', border: '1px solid #2A2A2A', borderRadius: '12px',
161+
boxShadow: '0 12px 48px rgba(0,0,0,0.6)', padding: '6px',
162+
animation: 'fadeUp 150ms ease'
163+
}}>
153164

154165
{!isTeamWorkspace ? (
155166
<>
@@ -185,6 +196,22 @@ export function Sidebar() {
185196
)
186197
})}
187198
</div>
199+
200+
{currentProjectId && (
201+
<>
202+
<div style={{ height: '1px', background: '#1F1F1F', margin: '6px 4px' }} />
203+
<div onClick={() => { selectProject(null); setProjectDdOpen(false) }}
204+
className="group"
205+
style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '10px', borderRadius: '8px', cursor: 'pointer', transition: '150ms ease' }}
206+
onMouseEnter={e => e.currentTarget.style.background = 'rgba(248, 113, 113, 0.1)'}
207+
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
208+
<div style={{ width: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '6px', background: 'rgba(248, 113, 113, 0.1)', color: '#f87171' }}>
209+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
210+
</div>
211+
<span style={{ fontSize: '13px', fontWeight: 500, color: '#f87171' }}>Close Project</span>
212+
</div>
213+
</>
214+
)}
188215
</>
189216
) : (
190217
<>
@@ -210,7 +237,6 @@ export function Sidebar() {
210237
</div>
211238
)}
212239
</div>
213-
</div>
214240
</div>
215241

216242
{/* ═══ ENVIRONMENTS section ═══ */}

‎src/renderer/src/stores/appStore.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const useAppStore = create<AppState>((set) => ({
9797
environments: [],
9898
currentEnvironmentId: null,
9999

100-
selectProject: (id) => set({ currentProjectId: id, currentFolderId: null, currentApiId: null }),
100+
selectProject: (id) => set({ currentProjectId: id, currentFolderId: null, currentApiId: null, showApiDocumentation: false }),
101101
selectFolder: (id) => set({ currentFolderId: id }),
102102
selectApi: (apiId: string | null, folderId?: string) => set((s) => ({
103103
currentApiId: apiId,
@@ -133,6 +133,7 @@ export const useAppStore = create<AppState>((set) => ({
133133
teamConfig: config || null,
134134
currentProjectId: config?.projectId || null,
135135
currentFolderId: null,
136-
currentApiId: null
136+
currentApiId: null,
137+
showApiDocumentation: false
137138
}),
138139
}))

0 commit comments

Comments
 (0)