CBE header and footer

[t-kramer]

Recreate the CBE header and footer using Dash components.

Reminder: The header and footer design can be found on Miro and another CBE repo.

[t-kramer]

@Xuhui-Wang-9988 @Marcusxixi @Ruixin126 @ZhouTongworking You can start working on this.

[Xuhui-Wang-9988]

shall we keep the current design of model selection drop down or move it to the more CBE Tools humburger button at the top-right corner?

[FedericoTartarini]

Please keep it as in the video that I shared the other day. If possible in the future also provide a screenshot with an example so it is easier to provide an answer.

[t-kramer]

@Xuhui-Wang-9988 For consistency, please also ask these questions on separate issue next time. This one is about the header and footer, your questions refer to the main tool container (between header and footer). Asking questions in the correct spots will make it easier to follow later on.

[Marcusxixi]

@t-kramer I still can not access the repo link show above, could you please fix this issues?

[t-kramer]

@Marcusxixi I just made the repo public. You should be able to access it now.

[Marcusxixi]

@t-kramer Here is the modified header, Is that ok?

[t-kramer]

@Marcusxixi Looks good. The title would be CBE Thermal Comfort Tool.

Did you look into a mobile version as well? For that, you ideally stack (and maybe resize) the containers vertically (logo on top, then title, then navbar). The navlinks in the navbar container should also be stacked vertically. Also, it's fine to use the CBE logo as a placeholder in the header for now. But we will exchange that later.

Please also work on the footer (incl. mobile). Thank you!

[Marcusxixi]

@t-kramer Here is the mobile version of the header

[FedericoTartarini]

In my computer it does not look like in your screenshot. it looks like this. I lefted several comments in the code.

[t-kramer]

@Marcusxixi I just pushed some updates to the repository containing the template layout for the header and footer. I added some basic mobile responsiveness using flexbox and breakpoints for tablets and smartphones. You can fork the repo and check the behaviour for reference. It should be simple to recreate a similar behaviour using Dash components. Feel free to make improvements if you have ideas. I'm not 100% happy myself, but at least it's clean and readable and should be a good starting point for us to narrow down the final layout.

I also changed the placeholder for the logo in the top left corner to a rectangular one (since the new logos will be rectangular). Please take this into account.

[FedericoTartarini]

Please all note that when possible always use dash mantine components never CSS. It should be a simple job since basically we can achieve that with grids and simple grids