Topbar (independent of login data) PR

[Bence021]

Features for Issue #6

Most of the comments help learning tailwind css styling.

handleLogout & handleSettings functions will be developt later on.
handleSidebarOpen will be developt with sidebar feature.

There was a false warning, so my solution was to turn of the Unknown at-rule.

I run into this also:
Error: Failed to load plugin 'next/hooks'

My solution was to:
npm install next@latest eslint-config-next@latest

To this solution I didn't upload the diff files, maybe it's just a local error. Idk

Some pictures of the implementation:

[balog-b]

absolute should be used to place elements freely on another existing element, that would otherwise not be possible. Here, I don't think you should use it. The reason is if you would want to add a new element to the topbar in the future, you would need to place it absolutely aswell, which may not be that easy.

I advise that you place 2 flexboxes on the topbar. One uses justify-start (default, so it can be ommited) and the other one uses justify-end. Put padding and spacing on it and you can achieve the same look, and can add new elements to the topbar easily, without having to worry about the exact place of the elements.

Alternatively, you can also create just 1 flexbox for the items on the left, and add a div with flex-1 to it. This will cause the box to fill out the whole space available, and push the user button to the side, so it stays on the right.