Add a “fixed” div in responsive footer menu

In the following w3schools code that implements a responsive menu at the bottom of a webpage, I have added a div with a copyright claim for the domain. I would like to make the copyright div centered in the bottom of the screen as long as it is not covered by the menu items, as the browser window gets smaller, and then move again at the bottom of the page bellow the menu items when it gets covered by them or when the menu is opened by the relative button when it previously has minimized.

move image vertically from top to bottom by percentage of scroll

I’m trying to make a certain image move from top of the document to it’s bottom depending on the scroll percentage, for example, when you load the site, the image will be on top of the page and as the user scrolls down it’ll go down little by little depending on the overall document percentage, until at 100% it’s at the bottom.
I’ve went through lots of similar solutions on stackoverflow and other sites, but only two seemed close to being what I need.
The first works but only on one resolution which is manually adjusted in the code:

How do I use responsive svgs in this context?

.contained { width: 80%; max-width: 2500px; margin: 0 auto; } @media all and (max-width: 780px) { .icon-text-size { display: inline } } .svg-align { vertical-align: middle; } .icon-fix { display: none; } <div class=”contained”> <h2 class=”title”><span>Contact</span> Us</h2> <h1 class=”icon-text-size”> <svg class=”svg-align” width=”144″ height=”144″ viewBox=”0 0 144 144″ fill=”none” xmlns=”http://www.w3.org/2000/svg”> <path d=”M91.4849 96.6599L101.565 86.5799C102.923 85.2391 104.64 … Read more

React toggle responsive sidebar based on browser width &/or user clicks

React noob here. I am creating a dashboard with three parts. Sidebar | Navbar & content below navbar.
Sidebar behavior should be: open initially; auto-hide when browser-width < 498px; auto-open when browser width is increased beyond 498px; open/close when navbar toggle is hit, regardless of browser window width (ie., mobile or desktop).
I know how to do this in jQuery but want to learn React way. Searching the forums and Google, I created a working model. However, I sense that the code can be simplified or at least audited for issues. Hoping for some senior enlightenment, all help is welcomed. Worried about dependency warnings and calling of 2 handlers. Did not use addEventListener as I read Safari may have issues.
Notes, I avoided using css media query for auto-hide, as I could not figure out how to override css file media query of display:none from React when click component is used. Using react 17.0.2; bootstrap 5.1.3;