Feature: A new floating header bar

[tamalCodes]

Description

• It must be responsive for mobiles as well as the desktop version
• The design can be found below it will be best to follow the design as accurately as possible
• If needed we can integrate libraries like framework motion to make the animations much smoother else continue with the vanilla css that we are using
  desktop version

Proposed Solution

Check the figma design here and prototype here to see how the animation looks like

Screenshots

🥦 Browser

Brave

Checklist ✅

• I checked and didn't find similar issue
• I have read the Contributing Guidelines
• I am participating in JWOC
• I am participating in IWOC
• I am willing to work on this issue (blank for no)

[github-actions]

Hello @tamalCodes, thank you for raising the issue.

Currently, the issue is marked as https://github.com/MilanCommunity/Milan/labels/status%3A%20todo%20%E2%8F%B3 so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this issue is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀

[riteshshukladev]

Hey @tamalCodes, would love to add this animation, kindly assign.

[tamalCodes]

Hi @riteshshukladev , please go ahead with it !

📑 Checklist in case you missed something

• Local project setup, .env for the frontend.
• Contributing guidelines to be followed.

Please maintain structure, use conventional pull request titles, and avoid spam to avoid closure or bans.

[riteshshukladev]

hey @tamalCodes, need your help ,as i'm facing an weird type of issue like after clonning the codebase and intallling the required dependencies . when i starts the development server and makes some changes in the codebase the changes doesn't get reflected in the UI and in the terminal of my editor.

Rather,it throws an text like this, [BABEL] Note: The code generator has deoptimised the styling of C:\Users\Ritesh\OneDrive\Documents\Milan\src\assets\pictures\Banner\MilanBuild.svg as it exceeds the max of 500KB., (that is actually the build file).

To solve this issue early on i , asked chatGPT why the changes doesn't get reflected in the UI and passed this message as well, it gave me a resposne that , HMR(Hot Module Replacement) that allows developers to see their changes in the browser without needing a full page reload in web development servers, such as Webpack.
The message you're seeing in your command line, regarding Babel deoptimizing the styling of a specific SVG file due to its size exceeding the maximum limit of 500KB, is indeed relevant and could be contributing to the issues you're experiencing. This message indicates that the SVG file is unusually large for a web asset, which might not only affect the build optimization process but could also have implications for hot module replacement (HMR) and the overall performance of your development server.

please help!!

[tamalCodes]

That is not an error, the thing you get from Babel is a warning, everything else should work fine. Can you check the console to see? Also can you give me a screen recording using any free software so that I can see too ?