Fix sidebar not rendering when position set to 'top' #8

Merged

Copilot merged 2 commits from copilot/fix-sidebar-navigation-issue into main

2025-11-04 14:42:13 -06:00

Copilot commented

2025-11-04 12:57:37 -06:00

(Migrated from github.com)

Sidebar navigation was invisible when users had sidebarPosition set to 'top' in localStorage or settings. The component was never rendered despite having correct styling and backend support.

Changes

frontend/src/App.jsx: Added missing conditional render for top position

<div className="app" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
  <Header />
  {sidebarPosition === 'top' && showSidebar && <Sidebar />}  // Added
  <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
    {sidebarPosition === 'left' && showSidebar && <Sidebar />}
    <main>...</main>
    {sidebarPosition === 'right' && showSidebar && <Sidebar />}
  </div>
</div>

The Sidebar component already handles top positioning correctly (full width, bottom border, auto height). Only the render logic was missing.

Screenshots

Before: Sidebar invisible when position = 'top'

After: Sidebar renders above main content

Left position (unchanged):

All PR #6 features (category sorting, drag reorder, multi-mode navigation) now accessible in all three positions.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

backend

Triggering command: node /home/REDACTED/work/noodlenook/noodlenook/frontend/node_modules/.bin/vite (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled

Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

This section details on the original issue you should resolve

<issue_title>Problem with displaying pages and organization</issue_title>
<issue_description>The changes made in SluberskiHomeLab/noodlenook#6 don't seem to actually be present or working. I am unable to see pages on the sidebar navigation

Also looks like the options aren't even there.

Please investigate this issue.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes SluberskiHomeLab/noodlenook#7

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Sidebar navigation was invisible when users had `sidebarPosition` set to `'top'` in localStorage or settings. The component was never rendered despite having correct styling and backend support. ## Changes - **`frontend/src/App.jsx`**: Added missing conditional render for top position ```jsx <div className="app" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}> <Header /> {sidebarPosition === 'top' && showSidebar && <Sidebar />} // Added <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}> {sidebarPosition === 'left' && showSidebar && <Sidebar />} <main>...</main> {sidebarPosition === 'right' && showSidebar && <Sidebar />} </div> </div> ``` The Sidebar component already handles top positioning correctly (full width, bottom border, auto height). Only the render logic was missing. ## Screenshots **Before**: Sidebar invisible when position = 'top' ![Before](https://github.com/user-attachments/assets/6bc2ea3e-bfba-4292-a750-f35e6ebe4f9b) **After**: Sidebar renders above main content ![After](https://github.com/user-attachments/assets/138fdfc0-78f0-40e7-875e-e8fe7148d244) **Left position (unchanged)**: ![Left](https://github.com/user-attachments/assets/07469f3d-5068-472b-9998-b25bbf74101b) All PR #6 features (category sorting, drag reorder, multi-mode navigation) now accessible in all three positions. > [!WARNING] > > <details> > <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary> > > #### I tried to connect to the following addresses, but was blocked by firewall rules: > > - `backend` > - Triggering command: `node /home/REDACTED/work/noodlenook/noodlenook/frontend/node_modules/.bin/vite` (dns block) > > If you need me to access, download, or install something from one of these locations, you can either: > > - Configure [Actions setup steps](https://gh.io/copilot/actions-setup-steps) to set up my environment, which run before the firewall is enabled > - Add the appropriate URLs or hosts to the custom allowlist in this repository's [Copilot coding agent settings](https://github.com/SluberskiHomeLab/noodlenook/settings/copilot/coding_agent) (admins only) > > </details>  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>Problem with displaying pages and organization</issue_title> > <issue_description>The changes made in SluberskiHomeLab/noodlenook#6 don't seem to actually be present or working. I am unable to see pages on the sidebar navigation > > Also looks like the options aren't even there. > > Please investigate this issue.</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> - Fixes SluberskiHomeLab/noodlenook#7  --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey).

SluberskiHomeLab (Migrated from github.com) reviewed

2025-11-04 12:57:37 -06:00