HorizontalNav could not be aligned to center while using it inside PageHeader

innovaccer / design-system

Masala Design System (MDS) is an open-source design system built at Innovaccer. Figma file : https://www.figma.com/community/file/974368355920553546/masala-design-system-web-guidelines

https://mds.innovaccer.com

MIT License

84 stars 79 forks source link

HorizontalNav could not be aligned to center while using it inside PageHeader #920

Closed satyamyadav closed 2 years ago

satyamyadav commented 2 years ago

Description

HorizontalNav items are not aligned to horizontal center when using in PageHeader component with navigationPosition="center" prop. Screenshot 2021-10-17 at 10 55 20 AM

Steps to reproduce

Open example (story) for the PageHeader https://innovaccer.github.io/design-system/?path=/docs/components-pageheader-level-1-with-navigation--level-1-with-navigation
Inspect the positions of navigation items in central container of the component.

Expected result

Navigation items should be horizontal center aligned.

Actual result

Navigation items aligned to left of its container and hence not on the exact center of the PageHeader width.

reginaalyssa commented 2 years ago

Can I take this on? :)

kits4 commented 2 years ago

I think i have solved the issue raising a PR please have look and let me know.

Thank You!!

reginaalyssa commented 2 years ago

Hi @kits4 @satyamyadav I have already opened a pull request to fix this. Hope you don't mind as I commented earlier that I'll be taking it on, thank you!

kits4 commented 2 years ago

Oh i also opened one pr actually i was working on it but didn't comment out anything.

satyamyadav commented 2 years ago

@reginaalyssa @kits4 Can you please review both of your PRs and see if we align to the changes, also your PRs need to be on develop branch. I will add some mote issues as soon as possible, to work on.

reginaalyssa commented 2 years ago

Hi @satyamyadav I've updated the pull request to have develop as its destination branch. With regards to the changes, it seems that both solutions (from myself and @kits4) seem to have fixed the issue reported here, just in different ways. Hoping to ask for your opinion on which one to go for, as they are alternate solutions to the same problem.