Improve top navigation #15617
Assignees
Labels
design ready
design is approved and ready for implementation
Comments
|
I’m missing the design for the drawer. How should it look? |
It uses the same style as the drop-down component. See the screenshot below. Do you need a mockup for the other drop-downs as well? Or for mobile? @BrunoQuaresma Note: you can ignore the content changes inside the drop-down for now. They will be addressed as part of coder/internal#177 |
|
Hm... maybe we’re talking about different things. I realize I wasn’t very clear—sorry about that 🙏. I was referring to the burger button. 
|
|
Ah you mean the mobile drop-down. Do you think this will work @BrunoQuaresma? See Figma |
|
@chrifro exactly! It looks awesome. |
BrunoQuaresma
added a commit
that referenced
this issue
Dec 20, 2024
BrunoQuaresma
added a commit
that referenced
this issue
Dec 26, 2024
This component is needed to complete the mobile menu for the [navbar refactoring task](#15617). You can check out the Figma design [here](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=jm6tERwCzB1TBeds-0).
BrunoQuaresma
added a commit
that referenced
this issue
Dec 30, 2024
Update the navbar to match the designs in [this Figma file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0). Related to #15617. **Desktop preview:** https://github.com/user-attachments/assets/01ce7cd2-baaa-49c4-9e9a-bf6e675151da **Mobile preview:** https://github.com/user-attachments/assets/155e2521-7293-4368-a5f5-425179d76326 For a closer look, you can check Chromatic snapshots or test the changes locally. **A few considerations:** - I made some adjustments to improve the design, such as removing the chevron from the profile menu and reducing the size of the chevrons in the dropdowns. I’ve documented these changes in the [Figma file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0) so @chrifro can review them after returning from vacation. - Some of the design questions involve how the proxy and account dropdown menus should look on desktop and mobile. For desktop, I decided to retain the current styles, and for mobile, I tried to infer how they should look based on the existing design. - There is some duplicated logic between the regular/desktop navbar menus and the mobile menus, which could lead to inconsistencies and make maintenance harder in the future. I plan to address this in a follow-up PR to keep this review manageable. - I’ve added tests to minimize inconsistencies and potential bugs while working on this refactor.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Status quo:
For smaller window sizes it scales weirdly
New solution:
See Figma
Changes:
The text was updated successfully, but these errors were encountered: