Added Animated Hamburger Menu #488

sushantgwr87 · 2022-10-02T02:01:20Z

Animated Hamburger Menu Pull Request

What does this PR do?

Fixes #245
Link to the issue

Description

Added styled component with animation for mobile header burger menu. Removed svg icons used for it as well.

PR checklist

Please check if your PR fulfills the following requirements:

Does this PR fix an existing issue?
Have you read the contributing guidelines?
Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!

vercel · 2022-10-02T02:01:24Z

@sushantgwr87 is attempting to deploy a commit to the Meili Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2022-10-05T11:31:40Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
landing	✅ Ready (Inspect)	Visit Preview	Oct 10, 2022 at 3:03PM (UTC)

bidoubiwa · 2022-10-05T11:34:54Z

Hey @sushantgwr87 thanks so much for you contribution 🙏
Could you fix the lining issues ? Its hard to read the code between the errors.

yarn lint

sushantgwr87 · 2022-10-05T11:52:24Z

@bidoubiwa Updated the Code and Removed Errors. Kindly Check Once Again.

bidoubiwa · 2022-10-05T12:07:18Z

I still see linting errors 😔 See https://github.com/meilisearch/landing/pull/488/files

sushantgwr87 · 2022-10-05T12:08:33Z

Yeah, Actually my system shows different lint errors and here bit more. No problem I will fix all (this time both check) and will let you know.

sushantgwr87 · 2022-10-05T12:44:09Z

Sir Kindly run the checks again, this time I guess errors should be gone. Before I was not using prettier extension that's why it linted different errors in VS code.

bidoubiwa

✨

bidoubiwa · 2022-10-05T13:00:11Z

src/blocks/Header/MobileHeader.js

+      <DialogDisclosure {...dialog} style={{ color: 'white', height: '24px' }}>
+        <MenuBtnWrapper clicked={dialog.visible}>
+          <MenuBtnBar />
+          <MenuBtnBar />
+          <MenuBtnBar />
+        </MenuBtnWrapper>


Could you create a Hamburger component out of it and add it in an apart file?

Sure. working on it. I will create file in same folder regarding it.

I prefered you add it in the components folder.

sushantgwr87 · 2022-10-05T13:15:44Z

I made it. Check once if its correct or not.

I created Hamburger Taking whole DialogDisclosure part in it and then importing the hamburger in MobileHeader.js.

bidoubiwa

You can leave DialogDisclosure in MobileHeader.js

sushantgwr87 · 2022-10-05T13:18:09Z

You can leave DialogDisclosure in MobileHeader.js

Okay Updating it.

bidoubiwa

Could you add the Hamburger in the components folder ?

sushantgwr87 · 2022-10-05T13:18:25Z

Could you add the Hamburger in the components folder ?

Yes Updating it

sushantgwr87 · 2022-10-05T13:27:38Z

Updated Sir, Check Once.

bidoubiwa · 2022-10-05T15:17:51Z

Hey @sushantgwr87

Since @mdubus is not present, I can not be sure that everything is as wanted. So unfortunately, we'll have to wait until next week to approve or not your pr.

These are the questions that I'm thinking about:

The stories should be updated
The unused icons should be removed
Should the animation be done with lottie as mentioned in the issue?
In what folder should the component be ? As maybe I'm wrong

sushantgwr87 · 2022-10-05T15:25:27Z

Hey @sushantgwr87

Since @mdubus is not present, I can not be sure that everything is as wanted. So unfortunately, we'll have to wait until next week to approve or not your pr.

These are the questions that I'm thinking about:

The stories should be updated

The unused icons should be removed

Should the animation be done with lottie as mentioned in the issue?

In what folder should the component be ? As maybe I'm wrong

No Problem. Will See it on next Week.

mdubus · 2022-10-10T09:15:51Z

Hello @sushantgwr87 👋

Thanks a lot for your PR and sorry for the inconvenience of me not being there during the first week of Hacktoberfest.

Is there a reason why you chose to create a custom Component for this instead of using Lottie as recommended in the issue?

Thanks a lot and have a good day ✨

sushantgwr87 · 2022-10-10T10:51:01Z

Hello @sushantgwr87 👋

Thanks a lot for your PR and sorry for the inconvenience of me not being there during the first week of Hacktoberfest.

Is there a reason why you chose to create a custom Component for this instead of using Lottie as recommended in the issue?

Thanks a lot and have a good day ✨

@mdubus No Sir. There is no specific reason for not using Lottie file for this. Actually we are already using styled components so I thought this animation can be easily created without much fuss and with little bit of css animation, it will work as needed.

Though If you think I should use Lottie file for it, I can work on that and create it using that.

mdubus · 2022-10-10T12:43:52Z

Though If you think I should use Lottie file for it, I can work on that and create it using that.

Thanks a lot for your answer 🙏 Indeed it would be great if you could use Lottie instead, for multiple reasons:

I see a little CSS problem inside your animation, which would be fixed with Lottie
It will be easier to maintain as every animation will be in the same format and in the same place
It will require less code

Thanks a lot for your time, and I deeply apologize for the inconvenience 🙏

sushantgwr87 · 2022-10-10T12:49:49Z

Though If you think I should use Lottie file for it, I can work on that and create it using that.

Thanks a lot for your answer 🙏 Indeed it would be great if you could use Lottie instead, for multiple reasons:

I see a little CSS problem inside your animation, which would be fixed with Lottie

It will be easier to maintain as every animation will be in the same format and in the same place

It will require less code

Thanks a lot for your time, and I deeply apologize for the inconvenience 🙏

Understood and No Worries. I will ping you once I fix it. Thank you.

sushantgwr87 · 2022-10-11T13:28:37Z

@mdubus Hello Sir,

Need help in fixing Lottie component or code for animation.

I created Hamburger menu animation using Lottie file and already made Lottie component. Problem is whole animation runs on button click from = to x back to =. (Lottie file has same animation too)

I tried using segments but seems they don't work with this package I guess as it does not shows props relating it or such toggle support. I am still researching on this for solution but any insights will help surely.

Lottie File used(White version of this):
https://lottiefiles.com/9789-burger-menu

Lottie Code:

<Lottie
          animation={hamburgerMenuAnimation}
          options={{
            loop: false,
            autoplay: false,
          }}
          ariaLabel="Hamburger Menu"
/>

Video for problem:
https://user-images.githubusercontent.com/47962312/195103587-c5935543-3673-4f10-a6bc-c48be563200d.mp4

mdubus · 2022-10-13T08:20:59Z

Hello @sushantgwr87 👋

Thanks a lot for reporting here your issues with the Lottie file. Indeed, I can see can the Lottie animation I provided in the issue goes from front to back and then back to front, and it's not ideal in our context.
I saw, like you, on Lottie's documentation that they have a segment option that could allow us to select a section to play, but just as you said, it is not yet implemented in the react-lottie library.

Therefore, I adapted the Lottie animation thanks to the Lottie Editor, and I just cropped the end of the animation. Here it is:
hamburger-menu.json.zip

(as GitHub doesn't support json files as attachments, I just compressed it as a zip. You'll have to unzip it 😉).

Then, you can play it from back to front regarding if the modal is opened or not, with the direction option: direction={dialog.visible ? 1 : -1}

Don't hesitate if you have any questions or if you need further help on this.

Have a nice day! ✨

sushantgwr87 · 2022-10-13T08:46:26Z

Hello Ma'am 😃,

Great Thanks for that Lottie animation file and guidance as well.

I updated the Lottie code in MobileHeader File:
Link to file code

<Lottie
          direction={dialog.visible ? 1 : -1}
          animation={hamburgerMenuAnimation}
          options={{
            loop: false,
            autoplay: false,
          }}
          ariaLabel="Hamburger Menu"
 />

I added your given Lottie json file in Lottie folder and imported them as needed.

Kindly check once if everything is correct or any other update/fix is needed.

Thanks for help 😸

src/blocks/Header/MobileHeader.js

mdubus

Almost perfect ✨

Can you please:

Check if the old Hamburger and Cross icon are still used, and delete them if it's not the case (check the svg icon & rerun the yarn icons command if necessary, also check the Icons story of Storybook) 🙏
Rebase your PR on main

Thanks a lot! 🦕

…/sushantgwr87/landing into sushantgwr87-Animated-Burger-fix

sushantgwr87 · 2022-10-13T11:22:55Z

Hello,

Sorry for mess-up and for any inconvenience I caused during rebasing and updating files.

Actually I am still confused what should I do regarding rebasing my PR to main. I have never done this so I am clueless, If you can guide me then it will very helpful.

I have updated both main and this repo, after messing things up badly 🥲 . I used rebasing commands to update branches but still confused what actually I need to do here.

Other Details:

I have removed unused Icons from MobileHeader.js File and checked for any other icons. I have not deleted any icon file though.

Thanks and Sorry for asking too much help 😓

mdubus · 2022-10-13T14:20:29Z

Hello @sushantgwr87

No problem 😀
I can see some conflicts in your PR that weren't quite well resolved and would erase some previous work.
Since you are not comfortable with git, I would suggest starting fresh and creating a brand new PR on a brand new branch 🚀

Here is how you can achieve it:

Go back to your main branch
Pull the changes that were made on the main branch from the Meilisearch repository
Create a new branch
Add the changes you want to the code
Then push the branch and open a new PR

Hope this helps ✨

sushantgwr87 · 2022-10-13T14:45:27Z

Thanks for guide Ma'am.

I updated my main repo and opened a new pull request.

You can check here PR.

mdubus · 2022-10-13T15:12:35Z

Thanks @sushantgwr87 🙏

Closing in favor of #513

vercel bot had a problem deploying to Preview October 5, 2022 11:32 Failure

bidoubiwa self-requested a review October 5, 2022 11:35

bidoubiwa suggested changes Oct 5, 2022

View reviewed changes

bidoubiwa reviewed Oct 5, 2022

View reviewed changes

bidoubiwa suggested changes Oct 5, 2022

View reviewed changes

sushantgwr87 requested a review from bidoubiwa October 5, 2022 15:02

vercel bot deployed to Preview October 10, 2022 15:03 View deployment

mdubus requested changes Oct 13, 2022

View reviewed changes

src/blocks/Header/MobileHeader.js Outdated Show resolved Hide resolved

mdubus requested changes Oct 13, 2022

View reviewed changes

Updated Files

0043593

sushantgwr87 closed this Oct 13, 2022

sushantgwr87 force-pushed the sushantgwr87-Animated-Burger-fix branch from fc56dd5 to efdf161 Compare October 13, 2022 10:08

sushantgwr87 mentioned this pull request Oct 13, 2022

Add animation to the hamburger button #513

Merged

3 tasks

sushantgwr87 added 2 commits October 13, 2022 16:26

Fixed Lint Errors

3d30c42

Updated File

371f457

sushantgwr87 reopened this Oct 13, 2022

sushantgwr87 added 3 commits October 13, 2022 16:33

Merge branch 'sushantgwr87-Animated-Burger-fix' of https://github.com…

7915f0d

…/sushantgwr87/landing into sushantgwr87-Animated-Burger-fix

Updated File

b32e654

Merge branch 'sushantgwr87-Animated-Burger-fix' of https://github.com…

e6d0601

…/sushantgwr87/landing into sushantgwr87-Animated-Burger-fix

mdubus closed this Oct 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Animated Hamburger Menu #488

Added Animated Hamburger Menu #488

sushantgwr87 commented Oct 2, 2022 •

edited

Loading

vercel bot commented Oct 2, 2022

vercel bot commented Oct 5, 2022 •

edited

Loading

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

bidoubiwa Oct 5, 2022

sushantgwr87 Oct 5, 2022

bidoubiwa Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

sushantgwr87 commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

mdubus commented Oct 10, 2022

sushantgwr87 commented Oct 10, 2022

mdubus commented Oct 10, 2022

sushantgwr87 commented Oct 10, 2022

sushantgwr87 commented Oct 11, 2022 •

edited

Loading

mdubus commented Oct 13, 2022 •

edited

Loading

sushantgwr87 commented Oct 13, 2022

mdubus left a comment •

edited

Loading

sushantgwr87 commented Oct 13, 2022

mdubus commented Oct 13, 2022

sushantgwr87 commented Oct 13, 2022 •

edited

Loading

mdubus commented Oct 13, 2022

Added Animated Hamburger Menu #488

Added Animated Hamburger Menu #488

Conversation

sushantgwr87 commented Oct 2, 2022 • edited Loading

Animated Hamburger Menu Pull Request

What does this PR do?

Description

PR checklist

vercel bot commented Oct 2, 2022

vercel bot commented Oct 5, 2022 • edited Loading

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

bidoubiwa Oct 5, 2022

Choose a reason for hiding this comment

sushantgwr87 Oct 5, 2022

Choose a reason for hiding this comment

bidoubiwa Oct 5, 2022

Choose a reason for hiding this comment

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

sushantgwr87 commented Oct 5, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

sushantgwr87 commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

bidoubiwa commented Oct 5, 2022

sushantgwr87 commented Oct 5, 2022

mdubus commented Oct 10, 2022

sushantgwr87 commented Oct 10, 2022

mdubus commented Oct 10, 2022

sushantgwr87 commented Oct 10, 2022

sushantgwr87 commented Oct 11, 2022 • edited Loading

mdubus commented Oct 13, 2022 • edited Loading

sushantgwr87 commented Oct 13, 2022

mdubus left a comment • edited Loading

Choose a reason for hiding this comment

sushantgwr87 commented Oct 13, 2022

Other Details:

mdubus commented Oct 13, 2022

sushantgwr87 commented Oct 13, 2022 • edited Loading

mdubus commented Oct 13, 2022

sushantgwr87 commented Oct 2, 2022 •

edited

Loading

vercel bot commented Oct 5, 2022 •

edited

Loading

sushantgwr87 commented Oct 11, 2022 •

edited

Loading

mdubus commented Oct 13, 2022 •

edited

Loading

mdubus left a comment •

edited

Loading

sushantgwr87 commented Oct 13, 2022 •

edited

Loading