UI Planning

The main user interface can be thought of as having two parts:
- a top navbar
- a sidebar with icons that open up drawers
- a main interface that takes up the rest of the screen


### Navbar
The navbar displays the logo and navigation links on the left, and the log in button/user dropdown on the right.

### Sidebar
The sidebar is a vertical stack of icon buttons that show a tooltip title on hover. When clicked, they open a slide drawer from the left that covers about a 1/3 of the screen, without changing the actual page the user is on.

We can put information that isn't very regularly needed in the sidebar so that it's only a click away yet doesn't take up space from the main dashboard.

### Main Dashboard

A DM in combat should see very different things than a player in combat, and likewise for out of combat. Therefore we can think of the main dashboard as always displaying one of 4 different possible layouts:

#### Player Out of Combat

This is the layout players will see when adventuring, roleplaying, traveling, etc.

#### Player In Combat

This is the layout players will see when the DM has turned "combat mode" on, i.e. they are actively in an encounter.

#### DM Out of Combat

This is the layout DM(s) will see when the party is adventuring, roleplaying, traveling, etc.

#### DM In Combat

This is the layout DM(s) will see when they have turned on "combat mode".

## Widgets

Let's call the components that can either be in the Sidebar drawer or Main Dashboard "widgets". These are reusable components that should adapt to the size of the container they are in so that they can be either in the sidebar or main dashboard.

Some widgets can be used for both players and DMs but will have different information/actions available. Some will only make sense for players OR DMs.

Here's a master list of all the widgets we need to develop. They can each have their own issue.

- [ ] #16
- [x] #17
- [ ] #18
- [ ] #19

Review the existing frontend structure and the UI plan in this issue, then inspect child issues #16, #17, #18, and #19. Determine which navbar, sidebar, dashboard, and widget work remains unassigned; the work is done when the planned layouts and reusable widgets are implemented and the related child issues are complete.

Written by the indexing model from the issue text.