Skip to content

Comments

feat(portal): align navbar and sidebar with figma style, add notifica…#79

Merged
digmunhoz merged 1 commit intomainfrom
feature/layout-improvments
Feb 22, 2026
Merged

feat(portal): align navbar and sidebar with figma style, add notifica…#79
digmunhoz merged 1 commit intomainfrom
feature/layout-improvments

Conversation

@digmunhoz
Copy link
Contributor

Description

Updates the portal navbar and sidebar to match the figma layout: compact logo (Tron cube + "by Grid Labs"), organization selector next to the logo with a vertical separator, notification bell with dropdown (empty state: "No new notifications"), and search bar kept in the sidebar. Adds dashboard icon (LayoutDashboard) and "Dashboard" label, and switches all user-facing portal text to English (notifications, loading, search placeholders, login/clusters/users placeholders, AdminRoute/ProtectedRoute messages).

Related Issue

Closes #

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📚 Documentation update
  • 🔧 Refactoring (no functional changes)
  • 🧪 Tests (adding or updating tests)
  • 🏗️ Infrastructure/CI changes

Component Affected

  • API (backend)
  • Portal (frontend)
  • Documentation
  • CI/CD
  • Other:

Checklist

General

  • I have read the CONTRIBUTING.md guidelines
  • My code follows the project's code style
  • I have performed a self-review of my code
  • I have commented my code in hard-to-understand areas
  • My changes generate no new warnings or errors

Testing

  • I have added tests that prove my fix/feature works
  • New and existing unit tests pass locally with my changes
  • I have tested my changes manually

Documentation

  • I have updated the documentation accordingly
  • I have updated the README if needed

Screenshots (if applicable)

Optional: screenshot of navbar (logo, org selector, bell, user menu) and sidebar (search, Dashboard, menu items).

Test Plan

  1. Run portal locally (npm run dev in portal/), log in, and confirm navbar: compact logo, org selector with vertical bar, bell, user menu.
  2. Click bell and confirm dropdown shows "No new notifications"; click outside and open user menu to confirm dropdowns close correctly.
  3. Confirm sidebar: search at top, "Dashboard" item with LayoutDashboard icon, link styling (active/inactive). Collapse/expand and confirm search and labels.
  4. Navigate through Login, AdminRoute, ProtectedRoute, DataTable, Clusters, Users and confirm all visible text is in English.

Additional Notes

  • No API calls were changed; org selector still uses useOrganization() and user.organizations.
  • Figma style was applied by copy/adaptation in the portal, with no dependency or link to the figma/ directory.
  • Text switched to English: notifications, loading, search placeholders, your@email.com, my-cluster, user@example.com, AdminRoute and ProtectedRoute messages.

…tions dropdown, use english for UI

- Logo: compact style with "by Grid Labs", restore Tron cube icon
- Navbar: org selector next to logo with vertical bar, notification bell with empty-state dropdown
- Sidebar: search bar in menu, dashboard icon and label, figma-style link styling
- All user-facing portal texts in English
@digmunhoz digmunhoz merged commit e7edd38 into main Feb 22, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant