topbar | Tiny & beautiful site-wide progress indicator

I've just started learning Vue, and am working on porting my django project to Vue. I started out simple. My objective is to create a component, which on loading, would use Axios to fetch a list of patients from my server.

So in my component, I wrote:

How do I fix the topbar and bottombar doesn't fill up its container. The topbar and bottombar uses the default Elevation respectively

You can see the Top bar doesn't fill max width and it got shadows, while the bottom bar have the text its own compose

I need to create an empty topbar and an empty sidebar as below. I want to stack them neatly so that the top of the sidebar touches the bottom of the topbar. For that, I am using percentage. However, I just can't get them to do that.

I saw some other threads suggesting to set html and body with height: 100%; and width : 100%. But in my app, the layout below is not in the main html document.

I'm using Vaadin and Spring Boot to build webapp used as registration form.

I'm getting an issue when deploying the webapp inside a Tomcat (but never when lauching directly from Intellij IDE).

The Stacktrace is :

I have a Bootstrap 5 webpage that shows at load as expected with the toggle button that moves the navbar and the body section to show/hide the full sidebar.

The only issue is that the body section goes behind the sidebar when I use the toggle button.

html file portion:

For a few days I've been trying to create a footer that is consistent with the style of my site, which is itself in the process of being created but already has a defined style

I have an image to illustrate the footer "of my dreams" :p And I would like to know how I can create it ? I thought of creating divs containing

and the

for the titles and the to contain the different links

Here is an image of what I would like to have on my site: https://prnt.sc/13kr8kt

Would anyone know how to explain me the right way? Because I tried but unfortunately impossible to succeed... I would like to understand my mistakes thanks in advance!

Here is my code :

I have this component "Board", there's other 3 components: TopBar, SandToHide and TreasureBoxes.

I just want that the TopBar component reads the "money" value and the TreasureBoxes executes the increment of money. The TopBar is reading the value that i'm setting in Board, but the TreasureBoxes doesn't seems to be executing the increment of the money.

Thanks in advance!

Board/index.js:

Hello ! I can't manage to center my different links in the center of my navigation bar: I'd like it to be really centered so that I can place things like my social networks or other things to the right of these elements

So I tried flexbox to center my elements, after many attempts and days of thinking about how to do it, I come here in the hope that someone will explain me how to do it, I would like to understand where the problem comes from please

I attach below my code:

Codepen : https://codepen.io/antyss77/pen/yLMPOPj

HTML :

I am looking to reproduce a style of site and I would like to do for the background like them that is to say alternate the design: printed circuit boards, dark gray backgrounds, printed circuit boards, dark gray fonts, but I do not see how to do in my case someone could help me please?

The site : https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc) I attach below my code: