Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature - top navigation refactor #83

Merged
merged 42 commits into from
Feb 5, 2024
Merged

feature - top navigation refactor #83

merged 42 commits into from
Feb 5, 2024

Conversation

MattRueter
Copy link
Contributor

Description

Top navigation layout was messy and needed to be redone. Also navbar now has different states based on User authentication.

Issue link

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Sorry, something went wrong.

@MattRueter MattRueter requested a review from Dan-Y-Ko as a code owner January 29, 2024 20:52
Copy link

vercel bot commented Jan 29, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
chingu-dashboard ⬜️ Ignored (Inspect) Visit Preview Feb 5, 2024 10:33pm

@MattRueter
Copy link
Contributor Author

Drop Down menu: ‘Sign out’ is a button while the placeholder ‘Settings' is a link. I’ve tried to make them line up and look the same but on some browsers they may look slightly different.

Storybook:
1.Getting Navbar's children's stories to render wasn't working as per Storybooks's documentation. Did a workaround but can't get "Controls" set up properly. There is an open issue on Github related to this.

Copy link
Contributor

@Dan-Y-Ko Dan-Y-Ko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some changes needed:

  1. You're going to have to change how you look for a current voyage. You will need to look for the existence of an active property in the voyage status. It is in voyageteam.voyage.status.name and you're looking for Active status. Find method should work.
  2. The status should just be text, not a link.
  3. can you make the hover background thing on the nav items the same length as the status container and also add rounded corners. You can see it in the figma.
  4. We're gunna make a change in the designs. Removing the name and keeping the avatar and the arrow icon. In addition to that, can you add cursor pointer over it (should be over both the avatar and the icon).
  5. The avatar should be the user's actual avatar (grab from the redux store).

src/components/Avatar.tsx Show resolved Hide resolved
src/components/navbar/ChinguMenu.tsx Show resolved Hide resolved
src/components/navbar/DropDown.tsx Outdated Show resolved Hide resolved
src/components/navbar/DropDown.tsx Outdated Show resolved Hide resolved
src/components/navbar/DropDown.tsx Outdated Show resolved Hide resolved
@Dan-Y-Ko
Copy link
Contributor

Sorry there's 1 more thing that needs fixing and I guess I didn't notice it before. Clicking inside the dropdown shouldn't close that dropdown menu, only if user clicks outside of it. The user can still click on the avatar/icon to close the menu though. Also keep in mind, you will need to implement this in a way where it can support closing of the dropdown menu automatically if user clicks on the notification bell (which will be implemented later) and any future things we might add in the top nav. You can actually try to just attach a dummy dropdown menu container to the notification bell now if you want to help you with this. Also if you want an example of what I'm talking about you can see the dropdown menus in trello, it's exactly same situation as we want for this app.

@MattRueter
Copy link
Contributor Author

I fixed the clicking inside of the DropDown menu. It now meets the following requirements.

  1. Clicking the avatar or chevron toggles the menu.
  2. Clicking outside of the menu (including the Bell and other navbar items) closes the menu.
  3. Clicking inside of the menu itself does not close it.

Dan-Y-Ko
Dan-Y-Ko previously approved these changes Jan 31, 2024
Copy link
Contributor

@Dan-Y-Ko Dan-Y-Ko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

menu open with voyage story needs to be fixed

@MattRueter
Copy link
Contributor Author

Viewing DropDown in Storybook now shows 1.closed, 2.open (with voyage) & 3.open (without voyage). We can also use controls if we wanted to try out different voyage names (longer, shorter, different format etc..) without the need to add fake data to the app's API.
However, I've achieved this by adding an optional placeholderVoyage prop to the DropDown. The app doesn't require this it is instead a Storybook hack and therefore not following best practices.
But this made me think perhaps Authheader should be passing the voyage name to DropDown anyway. AuthHeader is already reading User state from Redux.

Dan-Y-Ko
Dan-Y-Ko previously approved these changes Feb 5, 2024
Copy link
Contributor

@Dan-Y-Ko Dan-Y-Ko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@Dan-Y-Ko Dan-Y-Ko merged commit 93db23a into dev Feb 5, 2024
3 checks passed
@Dan-Y-Ko Dan-Y-Ko deleted the refactor/top-navigation branch February 5, 2024 22:39
Dan-Y-Ko added a commit that referenced this pull request Jul 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants