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

feat: added company name after logo image and hover effect in nav-links #767

Merged
merged 8 commits into from
May 29, 2023

Conversation

Iamdivyak
Copy link
Member

feat: added company name after the logo and hover effect in nav-links

Related Issue

Closes: #744

Changes made πŸ‘·πŸ»β€β™‚οΈ

  1. name after logo image
  2. By hovering in any nav-links. we will get a red line appear bottom to the nav-link with a beautiful transition effect

Screenshots πŸ“Έ

Screenshot (24)

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

Hello, @Iamdivyak, thank you for opening a pull request.

Soon the maintainers/owner will review it and provide you with feedback/suggestions.
If you think it's something urgent, feel free to reach out to Tamal on Twitter.


Give us a ⭐ to show some support
Happy OpenSource πŸš€

@github-actions github-actions bot temporarily deployed to Preview May 27, 2023 05:44 Inactive
@github-actions github-actions bot added the deployed This PR has been deployed to Vercel for testing. label May 27, 2023
@Iamdivyak Iamdivyak changed the title added company name after logo image and hover effect in nav-links feat: Added company name after logo image and hover effect in nav-links May 27, 2023
@Iamdivyak Iamdivyak changed the title feat: Added company name after logo image and hover effect in nav-links feat: added company name after logo image and hover effect in nav-links May 27, 2023
Copy link
Member

@tamalCodes tamalCodes left a comment

Choose a reason for hiding this comment

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

Also for the parent anchor tag that includes the Image and span - can we perhaps use Link there ? We might also wanna add a flex based display because the image and the brand-name looks not aligned.

    display: flex;
    align-items: center;

This can be added to the parent div in order to keep the image and brand-name in sync.

src/styles/Navbar.css Outdated Show resolved Hide resolved
src/styles/Navbar.css Outdated Show resolved Hide resolved
@tamalCodes tamalCodes added area/ui This issue is related to frontend/interface fix. 🟩 priority: low πŸ’‘ feature This generally contains addition/changes to features. status: need changes 🚧 Changes have been requested for these PRs status: wip πŸ‘©πŸ»β€πŸ’» This issue/PR is actively being worked on. gssoc23 This issue/PR is part of GSSOC'23. level1 GSSOC 23 -> LEVEL 1 labels May 28, 2023
@Iamdivyak
Copy link
Member Author

made required changes

Copy link
Member

@tamalCodes tamalCodes left a comment

Choose a reason for hiding this comment

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

The reason we are changing the class names is to make sure we stay consistent across the styling and naming part !

The rest of the changes look fantastic.

src/components/Navbar.jsx Outdated Show resolved Hide resolved
<img
src={
solidarity ||
"https://www.shareicon.net/data/512x512/2016/09/15/829452_user_512x512.png"
}
alt="Milan-logo"
className="nav_bramhin_img"
/>
/> <span className="brand-name">MILAN</span>
Copy link
Member

Choose a reason for hiding this comment

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

And for this one, the classname can be nav_brand_name

src/components/Navbar.jsx Outdated Show resolved Hide resolved
@Iamdivyak
Copy link
Member Author

done

@github-actions
Copy link

This pull request has been deployed to Vercel.

Latest commit: 2cc6eaa
βœ… Preview: https://milan-akgefx6uo-iamtamal.vercel.app
πŸ” Inspect: https://vercel.com/iamtamal/milan/5YCK3aj2V6nfbdctPgbCc2Cavjy5

View Workflow Logs

Copy link
Member

@tamalCodes tamalCodes left a comment

Choose a reason for hiding this comment

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

Amazing work,
This looks good to me, will be merged soon πŸŽ‰.

@tamalCodes tamalCodes added status: ready βœ… This PR has passed all the checks and is now ready to be merged. and removed status: need changes 🚧 Changes have been requested for these PRs status: wip πŸ‘©πŸ»β€πŸ’» This issue/PR is actively being worked on. labels May 29, 2023
@tamalCodes tamalCodes merged commit 7912aee into ngoworldcommunity:main May 29, 2023
4 checks passed
@Iamdivyak Iamdivyak deleted the navbar branch May 30, 2023 00:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/ui This issue is related to frontend/interface fix. deployed This PR has been deployed to Vercel for testing. πŸ’‘ feature This generally contains addition/changes to features. gssoc23 This issue/PR is part of GSSOC'23. level1 GSSOC 23 -> LEVEL 1 status: ready βœ… This PR has passed all the checks and is now ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] write company name after logo also hover effect in navlinks
2 participants