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

nav bar codes #26

Merged

Conversation

rachelsitoh
Copy link
Contributor

Pull Request

Description

Nav bar for desktop and mobile

Related Issues

[Reference any related issues that this pull request addresses or resolves.]

Checklist

Please review and check the following before submitting your pull request:

  • I have read the CONTRIBUTING.md document.
  • My code follows the code style of this project.
  • I have written tests for my changes (if applicable).
  • All new and existing tests passed.
  • I have updated the documentation accordingly (if applicable).
  • I have added comments to my code, particularly in areas that may be confusing.

Desktop

Screenshot 2024-02-13 at 9 37 45 PM

Mobile

Screenshot 2024-02-13 at 9 40 14 PM
Screenshot 2024-02-13 at 9 40 07 PM

Additional Information

I assumed clicking on the profile logo will make the 'box' containing profile and sign out appear, and clicking it again will remove the 'box'. (For desktop, clicking on the white areas outside the header will make the 'box' disappear). lmk if any changes are needed. Also, I assume that clicking on the fintech logo will route to /

@rachelsitoh rachelsitoh requested a review from gnimnix February 14, 2024 15:42
@gnimnix gnimnix assigned gnimnix and rachelsitoh and unassigned gnimnix Feb 18, 2024
Copy link
Contributor

@gnimnix gnimnix left a comment

Choose a reason for hiding this comment

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

image

@gnimnix
Copy link
Contributor

gnimnix commented Feb 18, 2024

hi @rachelsitoh , when importing the navbars to index page, i get these errors, can you help to fix them? thx!

@rachelsitoh rachelsitoh requested a review from gnimnix March 14, 2024 11:58
src/components/NavBar.tsx Outdated Show resolved Hide resolved
@gnimnix
Copy link
Contributor

gnimnix commented Mar 14, 2024

  1. Use the useHooks library and useWindowSize function to get the window size.
  2. Dynamically render the mobile vs desktop when the user alter the window size.

@gnimnix
Copy link
Contributor

gnimnix commented Mar 22, 2024

Use the useClickAway hook for click away behaviour

rachelsitoh and others added 5 commits March 25, 2024 10:55
…TAS-12-nav-bar

# Conflicts:
#	package.json
#	public/fintech_logo.png
#	public/material-symbols_close.png
#	public/person_logo.png
#	src/assets/css/App.css
#	src/routes/shared/TestPage.tsx
#	yarn.lock
const profileOptionsRef = useClickAway(() => {
setShowProfileOptions(false);
});

Copy link
Contributor

Choose a reason for hiding this comment

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

@rachelsitoh , I think the click behaviour feels kinda weird, could u change to dropdown on hover? so remove this clickaway hook and make it display on hover, should only need css, thx!

Copy link
Contributor

@gnimnix gnimnix left a comment

Choose a reason for hiding this comment

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

image

could u also fix this? the profile icon sizing and dropdown on desktop thx!

@gnimnix gnimnix merged commit 2a04a85 into epic/DEV-4-shared-components-and-layouts May 19, 2024
1 check passed
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.

2 participants