starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-12 05:20:31 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Sidenav toggle issues #8873

New Issue
Closed
opened 2025-12-29 20:42:23 +01:00 by adam · 3 comments
adam commented 2025-12-29 20:42:23 +01:00
Owner
Copy Link

Originally created by @alryaz on GitHub (Nov 22, 2023).

NetBox version

v3.6.5

Python version

3.11

Steps to Reproduce

Pre-requisites on desktop

  1. Open Netbox instance web page
  2. Authenticate with Netbox
  3. Open developer tools (Shift + Ctrl + I or F12 on WebKit-based browsers)
  4. Enable device toolbar (Shift + Ctrl + M on WebKit-based browsers)
  5. Set Dimensions option to Responsive

Pre-requisites on mobile

  1. Open Netbox instance web page
  2. Authenticate with Netbox

Issue reproduction preparation

  1. Open sidebar menu (by tapping/clicking the triple-dash button in the top right corner)
  2. Tap/click on any category but the last one in the list (ex. "Organizations")
  3. Tap/click on any subcategory (ex. "Sites" under "Organizations")
  4. (If sidebar is displayed) Close sidebar and refresh web page
  5. Open sidebar menu once again

Issue 1

  1. Tap/click the "expand" (chevron facing right) icon of the category used in the preparation steps

Issue 2

  1. Tap/click the category directly below the one used in the preparation steps (for easiest reproduction, attempt to tap the leftmost letter of the title)

Expected Behavior

Issue 1

Category expands OR Category is already expanded (as it is on desktop)

Issue 2

Category directly below the category used in preparation steps expands

Observed Behavior

Issue 1

The category collapses immediately instead of expanding, causing a FOUC

Issue 2

Phantom menu causes redirection to a subcategory of the category used in the preparation steps (=follows some URL that hadn't been displayed before)

Additional information

I have managed to circumvent this issue by enforcing collapsible category expansion (by overriding the initLinks() method)

private initLinks(): void {
    for (const link of this.getActiveLinks()) {
      this.activateLink(link, 'expand');
    }
  }

This is definitely not a valid solution. An alternative I suggest is looking into the following lines of code:

  1. d52a6d3b10/netbox/project-static/src/sidenav.ts (L96) - this binds mouse (and likely tapping) events for sidebar category expansion/collapsing;
  2. d52a6d3b10/netbox/project-static/src/sidenav.ts (L249) - this handles resolution of the above scenario for desktops (and, possibly, incorrectly handled on mobile);
  3. d52a6d3b10/netbox/project-static/src/sidenav.ts (L116) - this is a handler for sidebar showing scenario.

I am not handy at all with typescript compilation, hence I cannot really test this myself. I will, however, attempt to make a pull request in the following days to fix this annoying issue.

Originally created by @alryaz on GitHub (Nov 22, 2023). ### NetBox version v3.6.5 ### Python version 3.11 ### Steps to Reproduce #### Pre-requisites on desktop 1. Open Netbox instance web page 2. Authenticate with Netbox 3. Open developer tools (<kbd>Shift + Ctrl + I</kbd> or <kbd>F12</kbd> on WebKit-based browsers) 4. Enable device toolbar (<kbd>Shift + Ctrl + M</kbd> on WebKit-based browsers) 5. Set _Dimensions_ option to _Responsive_ #### Pre-requisites on mobile 1. Open Netbox instance web page 2. Authenticate with Netbox #### Issue reproduction preparation 1. Open sidebar menu (by tapping/clicking the triple-dash button in the top right corner) 2. Tap/click on any category **but the last one in the list** (ex. "Organizations") 3. Tap/click on any subcategory (ex. "Sites" under "Organizations") 4. _(If sidebar is displayed)_ Close sidebar and refresh web page 5. Open sidebar menu once again #### Issue 1 1. Tap/click the "expand" (chevron facing right) icon of the category used in the preparation steps #### Issue 2 1. Tap/click the category directly below the one used in the preparation steps _(for easiest reproduction, attempt to tap the leftmost letter of the title)_ ### Expected Behavior #### Issue 1 Category expands **OR** Category is already expanded (as it is on desktop) #### Issue 2 Category directly below the category used in preparation steps expands ### Observed Behavior #### Issue 1 The category collapses immediately instead of expanding, causing a FOUC #### Issue 2 Phantom menu causes redirection to a subcategory of the category used in the preparation steps (=follows some URL that hadn't been displayed before) ### Additional information I have managed to circumvent this issue by enforcing collapsible category expansion (by overriding the `initLinks()` [method](https://github.com/netbox-community/netbox/blob/d52a6d3b1090f408882e0875e04fb739fb492b75/netbox/project-static/src/sidenav.ts#L103)) ```js private initLinks(): void { for (const link of this.getActiveLinks()) { this.activateLink(link, 'expand'); } } ``` This is definitely not a valid solution. An alternative I suggest is looking into the following lines of code: 1. https://github.com/netbox-community/netbox/blob/d52a6d3b1090f408882e0875e04fb739fb492b75/netbox/project-static/src/sidenav.ts#L96 - this binds mouse (and likely tapping) events for sidebar category expansion/collapsing; 2. https://github.com/netbox-community/netbox/blob/d52a6d3b1090f408882e0875e04fb739fb492b75/netbox/project-static/src/sidenav.ts#L249 - this handles resolution of the above scenario for desktops (and, possibly, incorrectly handled on mobile); 3. https://github.com/netbox-community/netbox/blob/d52a6d3b1090f408882e0875e04fb739fb492b75/netbox/project-static/src/sidenav.ts#L116 - this is a handler for sidebar showing scenario. I am not handy at all with typescript compilation, hence I cannot really test this myself. I will, however, attempt to make a pull request in the following days to fix this annoying issue.
adam added the type: bugseverity: low labels 2025-12-29 20:42:24 +01:00
adam closed this issue 2025-12-29 20:42:24 +01:00
adam commented 2025-12-29 20:42:24 +01:00
Author
Owner
Copy Link

@alryaz commented on GitHub (Nov 23, 2023):

I have proposed several changes in my forked branch: https://github.com/alryaz/netbox/tree/refactor-sidenav.

I am aiming for a more complete rework of the sidenav (to clean up some code that seems to interfere).

The changes are aimed to mitigate the issues mentioned (1 and 2) as well as some additional hypothetical bugs relevant to resizing. Additional changes will also be aimed to reduce complexity of the code in question.

@alryaz commented on GitHub (Nov 23, 2023): I have proposed several changes in my forked branch: https://github.com/alryaz/netbox/tree/refactor-sidenav. I am aiming for a more complete rework of the sidenav (to clean up some code that seems to interfere). The changes are aimed to mitigate the issues mentioned (1 and 2) as well as some additional hypothetical bugs relevant to resizing. Additional changes will also be aimed to reduce complexity of the code in question.
adam commented 2025-12-29 20:42:24 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 5, 2023):

@alryaz I'll assign this to you so you can submit a PR from your fork. However, please be aware that we're planning to overhaul the navigation menu in v4.0 as part of #12325 and won't be able to allocate a ton of effort to support intermittent improvements to the existing menu.

@jeremystretch commented on GitHub (Dec 5, 2023): @alryaz I'll assign this to you so you can submit a PR from your fork. However, please be aware that we're planning to overhaul the navigation menu in v4.0 as part of #12325 and won't be able to allocate a ton of effort to support intermittent improvements to the existing menu.
adam commented 2025-12-29 20:42:25 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 22, 2023):

I haven't seen any work associated with this issue to date. Given that we're looking to start working on the UI overhaul next month as I mentioned above, it just doesn't seem prudent to commit any time to improving the existing navigation menu, so I'm going to close it out.

@jeremystretch commented on GitHub (Dec 22, 2023): I haven't seen any work associated with this issue to date. Given that we're looking to start working on the UI overhaul next month as I mentioned above, it just doesn't seem prudent to commit any time to improving the existing navigation menu, so I'm going to close it out.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label severity: low type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#8873
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?