Day-12: Refactoring main Layout design for ShowwcaseXS

Today is May 5, 2023, I mentioned in my previous blog post that I had completed the basic layout for ShowwcaseXS. Today, my focus will be on updating layout A. Currently, the code for the layout is disorganized, and I need to rearrange it and create layout components for each tab on the navigation bar. This means that each tab, such as notifications, feeds, bookmarks, community, shows, etc., will have its own layout component. This way, when the user clicks on a tab on the navigation bar, the screen will directly navigate to that particular layout, and all the corresponding items for that tab will be displayed in that layout.

Combining road maps, shows, and series in a single layout would increase my workload since I need to call different APIs for each of them. Therefore, I decided to extend the length of the sidebar slightly and add tabs specifically for road maps, shows, and series. I added these features permanently. Additionally, I included headers and footers in the layout. Honestly speaking, this is coming out to be better than I've imagined for ShowwcaseXS.

The Layout component contains all the common items, and the only dynamic aspect will be the tab layout which changes based on the user's clicks on the navigation bar. I also included the ShowwcaseXS logo in the header and a footer with a copy. Let me you how pretty it is looking now.

Today, I focused on creating layouts for all eight navigations on ShowwcaseXS's navigation bar. I also implemented the functionality of displaying different navigation options when the user clicks on a particular tab. Initially, I faced some difficulties trying to pass a prop from the Layout component to its children components when I already had children in my Layout component. I explored various ways to pass extra props other than children from the Layout component to its children components, but I did not find any suitable solution. As a result, I decided to use the useContext() hook of React to pass props to different types of layouts when the user clicks on different navigation options on the navigation bar. Tomorrow, I plan to work on integrating APIs for some layouts.