Side Nav implementation

[michaelbukachi]

What is the Purpose?

Adds the HSideNav component

What was the approach?

Briefly describe the approach used to address the issue

Are there any concerns to addressed further before or after merging this PR?

Bottom section implementation is pending.

Mentions?

@andrewtpham @ninetteadhikari

Issue(s) affected?

List of issues addressed by this PR.

243

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hikaya/vue-ui-components/EYEcRinnjWM9N3AoN1HbwXzoPHKN
✅ Preview: https://vue-ui-components-git-sidenavva1-hikaya.vercel.app

[ninetteadhikari]

this is a great first pass @michaelbukachi!!

Two things:

1. Is it possible to center the button on the line? Currently it is a little off to the right

   

2. Is possible to make the transition a bit slower?

[michaelbukachi]

@ninetteadhikari

2. Are you referring to the collapsing effect?

[ninetteadhikari]

@ninetteadhikari

2. Are you referring to the collapsing effect?

yes that's the one. it feels a bit too fast the closing and opening of the navbar.

[michaelbukachi]

@ninetteadhikari

2. Are you referring to the collapsing effect?

yes that's the one. it feels a bit too fast the closing and opening of the navbar.

Alright.

[michaelbukachi]

@ninetteadhikari Done. I think we might have to enforce a min-width. Changing the size of the viewport affects the side nav size.

[ninetteadhikari]

@ninetteadhikari Done. I think we might have to enforce a min-width. Changing the size of the viewport affects the side nav size.

Great thanks Michael:) if possible lets make sure the min-width also fits a mobile screen

[michaelbukachi]

@ninetteadhikari This is done.

[ninetteadhikari]

thanks Michael:) Closing the panel looks good but opening it can be tweaked a bit

1. the button can be moved to the right a bit to align with the panel width

   

2. when opening the panel it seems like the button is moving slower than the panel itself.. If possible can they be aligned?

hope these are relatively easy to fix 🤞

[michaelbukachi]

@ninetteadhikari

1. What's the screen size?
2. I've made adjustments but there's still a slight lag.

[ninetteadhikari]

It seems good for laptop and phone screens. But for Tablet (810 * 1080) the buttons a little off..

Thanks for the transition work it looks great:)

[michaelbukachi]

@ninetteadhikari Fixed.

[andrewtpham]

Hey @michaelbukachi its looking good. I'm playing around with the transition speed and alignment with the line but I can only seem to get the collapse action right where the toggle button and line are in sync. I'd like to do the same for when you toggle to expand the side bar. See the GIF below how its really smooth on the collapse while on the expand action, the line appears too quickly and the toogle button seems to bump the line more to the right at the end of the animation.

FYI, I'm on 1200px screen size

[michaelbukachi]

Hey @michaelbukachi its looking good. I'm playing around with the transition speed and alignment with the line but I can only seem to get the collapse action right where the toggle button and line are in sync. I'd like to do the same for when you toggle to expand the side bar. See the GIF below how its really smooth on the collapse while on the expand action, the line appears too quickly and the toogle button seems to bump the line more to the right at the end of the animation.

FYI, I'm on 1200px screen size

@andrewtpham At the moment, I'm unable to figure out why the transition speed is different for the reverse direction. Still looking into it.

[michaelbukachi]

@andrewtpham I've fixed the jumping animation of the border

[andrewtpham]

@michaelbukachi @ninetteadhikari the Sidebar Nav looks good! Can you give it another review and then it should be ready to merge.

Changes I made

I made a change in the transition speed to align them and upgraded the package version, and added HSideNav component to the export default { } in the index.js file as we had done with previous components.

[michaelbukachi]

@andrewtpham Looks good :ok_hand: