Been working on and off on the website for the past week. I have:
The last two were honestly pretty easy.
Modal state is stored in the Parent Element (the subpage component) and that state is passed to the child component and can be updated from the child, for instance when the modal is closed. The OpenModal function are passed the the NavBar as a prop, which ultimately passes to the contact logo button. One little thing I learned is that props should be wrapped in {} the function signature for destructuring in the child. If not, everything must be accessed through props.Example.
The hardest part was actually of all the stuff I just mentioned was actually the footer, which suprised me. I wanted my Footer to not be sticky, meaning it is just visible when you scroll to the bottom of the page. Making the Footer design was easy, but positioning it correctly at the bottom was a hassle, and I’m still using a hacky method that I’m not really happy with.
Essentially the issue was the the SimpleGrid component in Chakra was actually shorter than the culmination of its grid items (not sure how this is possible?). Because of this, the footer was being placed on top of the bottom grid items. To fix this I simply added some offset before the Footer, but it feels like there is something else wrong and now I am worried spacing will be inconsitent on other pages between the bottom of content and the footer.
