To make the animation and styling of the Search component as shown in the video above the following steps should be taken:
Instead of replacing the class of the "divSearchMenu", use the classList.add() function to add an additional class, so the base styling isn't lost. This means that all the "c-search-menu" styling will remain to the element and, when pressing on the "search" icon, only the c-search-visible class will be added to modify it's curent style.
Instead of using left: -100%, use bottom: 0px so that the animation starts from the bottom. The position should always be fixed.
Write the "transition" class only to the max-height property because that's the only one that changes in the "c-search-visible" class.
Use "overflow: hidden" so the content doesn't show when the max-height property is set to 0.
The c-search-visible class should only have a max height > than the height of the c-search-menu class (anything bigger than 80vh works).
Please add on your own the dark background when the search sheet is opened using the "before" css tag. You can use "chatgpt" to generate the code and get explanation.
https://github.com/Stellar-Junior-Dev/cocktailMasters-cosmin/assets/36665504/bdefbc19-b33a-4ee5-973e-dddfa2945a15
To make the animation and styling of the Search component as shown in the video above the following steps should be taken:
Instead of replacing the class of the "divSearchMenu", use the classList.add() function to add an additional class, so the base styling isn't lost. This means that all the "c-search-menu" styling will remain to the element and, when pressing on the "search" icon, only the c-search-visible class will be added to modify it's curent style.
Instead of using left: -100%, use bottom: 0px so that the animation starts from the bottom. The position should always be fixed. Write the "transition" class only to the max-height property because that's the only one that changes in the "c-search-visible" class. Use "overflow: hidden" so the content doesn't show when the max-height property is set to 0. The c-search-visible class should only have a max height > than the height of the c-search-menu class (anything bigger than 80vh works).
Please add on your own the dark background when the search sheet is opened using the "before" css tag. You can use "chatgpt" to generate the code and get explanation.
Documentation: