Redesign Navbar to use icons instead & shows Latency

[adamseth2]

Context

Currently, the navbar is not dynamic and is too long, causing weird behavior when the width of the window is small. Also, the circle indicators are outdated and could be visually improved with icons.

What to do:

ALREADY DONE
Fix the SCSS to
Currently what it looks like:

Replace these circles with icons instead and shrink the names down to:

• Websocket -> WS:
• Controller connected -> CTRL:
• Camera feed -> CAM:

• (NEW) Lat (shows in ms)

How to implement

Using the vue-material-design-icons, change the color based on the status of the WebSocket, detect controllers plugged in, and show the latency. The current navbar code shows how to change the color based on the states dynamically.

Reference Images:

[adamseth2]

Reopening because PR automatically closes the issue (usually fine but this had 2 parts). Latency needs to be implemented still. Will require recoding heartbeat.