SVI/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2026-03-31 06:34:17 -04:00
Code Issues 2.6k Packages Projects Releases 10 Wiki Activity

[PR #7987] Improve mobile ui: added a hamburger navigation to the mobile view. #7362

New Issue
Open
opened 2025-11-20 08:05:29 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 08:05:29 -05:00
Owner
Copy Link

Original Pull Request: https://github.com/community-scripts/ProxmoxVE/pull/7987

State: closed
Merged: Yes

✍️ Description

This pull request introduces a mobile sidebar navigation for the application, improving usability on smaller screens. The sidebar is implemented as a slide-out sheet that displays categories and scripts, and includes a "Last Viewed" section. Several supporting changes were made to the sidebar and accordion components to support this feature, along with minor style and prop improvements.

Mobile Navigation Implementation:

  • Added a new MobileSidebar component that provides a mobile-friendly sidebar using a sheet UI. It loads categories, manages selection state, and displays the last viewed script. (frontend/src/components/navigation/mobile-sidebar.tsx)
  • Integrated MobileSidebar into the Navbar so that it appears on small screens, while the desktop navigation remains unchanged. (frontend/src/components/navbar.tsx) [1] [2]

Sidebar and Accordion Enhancements:

  • Updated the Sidebar component to accept new props (onItemSelect, className) for better customization and interaction, and adjusted its layout to be responsive. (frontend/src/app/scripts/_components/sidebar.tsx) [1] [2] [3]
  • Modified the ScriptAccordion component to support an optional onItemSelect callback, which is now triggered when a script is selected—allowing the mobile sidebar to close automatically after a selection. Also adjusted its scroll and padding styles for better mobile usability. (frontend/src/app/scripts/_components/script-accordion.tsx) [1] [2] [3]

Layout Adjustments:

  • Refactored the layout in RootLayout to ensure the new providers (NuqsAdapter, QueryProvider) wrap the entire content appropriately, supporting the sidebar's state management. (frontend/src/app/layout.tsx)

Other Minor Improvements:

  • Updated UI imports to include dialog headers and titles, preparing for possible future dialog enhancements. (frontend/src/components/ui/command.tsx)
image ## 🔗 Related PR / Issue Link: #

✅ Prerequisites (X in brackets)

  • Self-review completed – Code follows project standards.
  • Tested thoroughly – Changes work as expected.
  • No security risks – No hardcoded secrets, unnecessary privilege escalations, or permission issues.

🛠️ Type of Change (X in brackets)

  • 🐞 Bug fix – Resolves an issue without breaking functionality.
  • ✨ New feature – Adds new, non-breaking functionality.
  • 💥 Breaking change – Alters existing functionality in a way that may require updates.
  • 🆕 New script – A fully functional and tested script or script set.
  • 🌍 Website update – Changes to website-related JSON files or metadata.
  • 🔧 Refactoring / Code Cleanup – Improves readability or maintainability without changing functionality.
  • 📝 Documentation update – Changes to README, AppName.md, CONTRIBUTING.md, or other docs.
**Original Pull Request:** https://github.com/community-scripts/ProxmoxVE/pull/7987 **State:** closed **Merged:** Yes --- <!--🛑 New scripts must be submitted to [ProxmoxVED](https://github.com/community-scripts/ProxmoxVED) for testing. PRs without prior testing will be closed. --> ## ✍️ Description This pull request introduces a mobile sidebar navigation for the application, improving usability on smaller screens. The sidebar is implemented as a slide-out sheet that displays categories and scripts, and includes a "Last Viewed" section. Several supporting changes were made to the sidebar and accordion components to support this feature, along with minor style and prop improvements. **Mobile Navigation Implementation:** * Added a new `MobileSidebar` component that provides a mobile-friendly sidebar using a sheet UI. It loads categories, manages selection state, and displays the last viewed script. (`frontend/src/components/navigation/mobile-sidebar.tsx`) * Integrated `MobileSidebar` into the `Navbar` so that it appears on small screens, while the desktop navigation remains unchanged. (`frontend/src/components/navbar.tsx`) [[1]](diffhunk://#diff-a46e916b69761c2f2f29b0d775c442cbcfb63938fb6aad68121cf4be53039749R11) [[2]](diffhunk://#diff-a46e916b69761c2f2f29b0d775c442cbcfb63938fb6aad68121cf4be53039749L33-R50) **Sidebar and Accordion Enhancements:** * Updated the `Sidebar` component to accept new props (`onItemSelect`, `className`) for better customization and interaction, and adjusted its layout to be responsive. (`frontend/src/app/scripts/_components/sidebar.tsx`) [[1]](diffhunk://#diff-7bc2d01c7be6690f7c030cdc21dbb017fdad1916ccd0528e8cff32ca57bc6d53R5-R27) [[2]](diffhunk://#diff-7bc2d01c7be6690f7c030cdc21dbb017fdad1916ccd0528e8cff32ca57bc6d53L30-R38) [[3]](diffhunk://#diff-7bc2d01c7be6690f7c030cdc21dbb017fdad1916ccd0528e8cff32ca57bc6d53R54) * Modified the `ScriptAccordion` component to support an optional `onItemSelect` callback, which is now triggered when a script is selected—allowing the mobile sidebar to close automatically after a selection. Also adjusted its scroll and padding styles for better mobile usability. (`frontend/src/app/scripts/_components/script-accordion.tsx`) [[1]](diffhunk://#diff-4820708f02a219519a2fbdc343314c387c27d0c2fa903bd788ec92fdb35ff1d8R30-R37) [[2]](diffhunk://#diff-4820708f02a219519a2fbdc343314c387c27d0c2fa903bd788ec92fdb35ff1d8L80-R82) [[3]](diffhunk://#diff-4820708f02a219519a2fbdc343314c387c27d0c2fa903bd788ec92fdb35ff1d8R130) **Layout Adjustments:** * Refactored the layout in `RootLayout` to ensure the new providers (`NuqsAdapter`, `QueryProvider`) wrap the entire content appropriately, supporting the sidebar's state management. (`frontend/src/app/layout.tsx`) **Other Minor Improvements:** * Updated UI imports to include dialog headers and titles, preparing for possible future dialog enhancements. (`frontend/src/components/ui/command.tsx`) <img width="366" height="825" alt="image" src="https://github.com/user-attachments/assets/063b3528-6323-4c56-8a48-a22c3e6bdf10" /> ## 🔗 Related PR / Issue Link: # ## ✅ Prerequisites (**X** in brackets) - [x] **Self-review completed** – Code follows project standards. - [x] **Tested thoroughly** – Changes work as expected. - [x] **No security risks** – No hardcoded secrets, unnecessary privilege escalations, or permission issues. --- ## 🛠️ Type of Change (**X** in brackets) - [ ] 🐞 **Bug fix** – Resolves an issue without breaking functionality. - [x] ✨ **New feature** – Adds new, non-breaking functionality. - [ ] 💥 **Breaking change** – Alters existing functionality in a way that may require updates. - [ ] 🆕 **New script** – A fully functional and tested script or script set. - [ ] 🌍 **Website update** – Changes to website-related JSON files or metadata. - [ ] 🔧 **Refactoring / Code Cleanup** – Improves readability or maintainability without changing functionality. - [ ] 📝 **Documentation update** – Changes to `README`, `AppName.md`, `CONTRIBUTING.md`, or other docs.
saavagebueno added the pull-request label 2025-11-20 08:05:29 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
🛑 Failure to comply with the guidelines
breaking change
bug
bug
bugfix
deferred
delete script
dependencies
enhancement
external
feature
github
help wanted
Implemented in VED waiting push to Main
in project pipeline
invalid
investigation
json
maintenance
new script
new script
nice to have
not a script issue
not planned
organization
pull-request
Mirrored from GitHub Pull Request
 question
refactor
rename script
security
update script
website
wontdo
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE#7362
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?