Fixed the responsiveness of the header, footer, and card.

[Tusharjamdade]

Resolves #212

Added a hamburger icon for mobile devices to open menu options, implemented a dropdown in the footer for better responsiveness, and fixed the responsiveness of the leaders' avatars. Additionally, made the header sticky at the top and fixed the alignment of the summary and labels, which were aligned to the right in mobile view

[Tusharjamdade]

@arkid15r @kasya, please verify the changes.

Thank you!

[Tusharjamdade]

@arkid15r, Please review the changes!

[kasya]

Nice work!
Couple of things I noticed.
There's this huge gap now above the search component. It's noticeable even on regular page, but on the mobile - it's just crazy big. Can we decrease that to be as it was before?

Some other things:

[Tusharjamdade]

Nice work! Couple of things I noticed. There's this huge gap now above the search component. It's noticeable even on regular page, but on the mobile - it's just crazy big. Can we decrease that to be as it was before?

Some other things:

@kasya, if possible, could you please share a screenshot of it? I am not seeing this on my localhost.

[Tusharjamdade]

@kasya, do we need to keep the button next to the labels? It might not look good when there are many labels in the mobile view.

Similarly to the Projects page:

Alternatively, we could arrange it like this:

[kasya]

Nice work! Couple of things I noticed. There's this huge gap now above the search component. It's noticeable even on regular page, but on the mobile - it's just crazy big. Can we decrease that to be as it was before?
Some other things:

@kasya, if possible, could you please share a screenshot of it? I am not seeing this on my localhost.

of course!! I was talking about this gap between header and the search component. It's there both on mobile and desctop view now and it wasn't there before:

[kasya]

@kasya, do we need to keep the button next to the labels? It might not look good when there are many labels in the mobile view.

Alternatively, we could arrange it like this:

I do like this second option more, but only if we are able to keep desktop card as is, where the button is always at the bottom of the card.
Another option - we could also decrease a little bit the number of shown labels for mobile view to make it look better with the button next to it. So there are a couple of ways to address this.. What do you think?

[Tusharjamdade]

@kasya, do we need to keep the button next to the labels? It might not look good when there are many labels in the mobile view.

Alternatively, we could arrange it like this:

I do like this second option more, but only if we are able to keep desktop card as is, where the button is always at the bottom of the card. Another option - we could also decrease a little bit the number of shown labels for mobile view to make it look better with the button next to it. So there are a couple of ways to address this.. What do you think?

@kasya, we can reduce the number of labels for mobile, but when we expand it (by clicking on the 'Show More' option), the problem still exists, in my opinion. So, which design should we choose? Additionally, I have fixed the header as per the suggestion. The only remaining part is the cards.

[harsh3dev]

@Tusharjamdade I have implemented the Responsive header #219 with additional functionality.
I had discussed with @kasya
We can take that header and Footer and Card from your PR as your implemented designs are amazing for the Footer.
Have you worked on the changes requested on this PR? So that we can continue.

[Tusharjamdade]

@Tusharjamdade I have implemented the Responsive header #219 with additional functionality. I had discussed with @kasya We can take that header and Footer and Card from your PR as your implemented designs are amazing for the Footer. Have you worked on the changes requested on this PR? So that we can continue.

@harsh3dev, I have completed the header and footer. The only remaining part is the card. Since you are working on the responsive header as well, as suggested by @kasya, we can take the header from your PR and the footer and card from my PR.

[kasya]

@Tusharjamdade I don't think you've updated the PR regarding my last comments yet 🤔 I can still see that big gap on the page above the search component.
As fore the card labels layout - I think it makes sense if the button get's pushed down when the user clicks "show more" link. That's kind of expected.
Also, there are some conflicts you need to address!

[kasya]

Nice updates! Left some comments and also pushed small changes to help address some of those!
Also, since we merged in the Responsive header PR there are conflicts now that need to be resolved! 👌🏼

[Tusharjamdade]

@kasya, I have found a way to reduce the delay, but the overall approach of reducing the number of labels for mobile (i.e., 4 for mobile) remains the same. Should this be fine, or do I need to change the approach?

[kasya]

@kasya, I have found a way to reduce the delay, but the overall approach of reducing the number of labels for mobile (i.e., 4 for mobile) remains the same. Should this be fine, or do I need to change the approach?

@Tusharjamdade I don't see any pushed changes regarding that 🤔 . Only that you've updated your branch with main changes. However, right now, when I check out your branch I can not run it locally due to a incorrect resolved conflicts. The Header component file now has duplicate lines for exporting default component. Could you please fix that? As well as address my previous comments. Thanks!

[Tusharjamdade]

@

@kasya, I have found a way to reduce the delay, but the overall approach of reducing the number of labels for mobile (i.e., 4 for mobile) remains the same. Should this be fine, or do I need to change the approach?

@Tusharjamdade I don't see any pushed changes regarding that 🤔 . Only that you've updated your branch with main changes. However, right now, when I check out your branch I can not run it locally due to a incorrect resolved conflicts. The Header component file now has duplicate lines for exporting default component. Could you please fix that? As well as address my previous comments. Thanks!

@kasya, apologies for that. I have now committed the changes to fix the label delay when the page refreshes, and also addressed the double border issue on desktop.
Please review the changes and let me know if any further improvements are needed.
Thank You!!

[kasya]

Hey @Tusharjamdade, thanks for the updates! I reviewed the card and found a few more issues.
One was with classes for mobile devices. With tailwind, the classes without the prefix applied to all screen sizes and classes with prefixes (like sm:) will only apply to the class mentioned and above. So those were not applying properly on meta data borders.

Where this approach surprises people most often is that to style something for mobile, 
you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of 
sm: as meaning “on small screens”,  think of it as “at the small breakpoint“.

I pushed changes to address that. Also, there were a conflict with the Footer that needed to be resolved. Also did that.

And lastly, there were many small updates throughout the files, like extra semi-colons etc. Whenever you do that, could you please run make check before pushing your changes? This is something we have mentioned in our "DOs and DON'Ts". This way our linter will update anything that needs to be updated. With your last push CI\CD was failing due to pre-commit fail.

I updated everything and this looks good to merge now! Thank you!