Turn panel into top bar

frontend/src/css/_panelchat.scss

@@ -20,6 +20,7 @@
     height: 100vh;
     width: 27%;
     background-color: $color-dark-surface-container;
+    position: relative;
 
     .profileheader {
         display: flex;
@@ -105,4 +106,12 @@
             margin-right: 1rem;
         }
     }
+
+    mdui-bottom-app-bar {
+        position: relative;
+        width: 100%;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: auto;
+    }
 }

frontend/src/css/lib/fonts/material-symbols.scss

@@ -1,11 +1,25 @@
-/* fallback */
-@font-face {
-    font-family: 'Material Symbols Outlined';
+@mixin iconsFontStyle() {
     font-style: normal;
     font-weight: 400;
     src: url(material-symbols.woff2) format('woff2');
 }
 
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    @include iconsFontStyle();
+}
+
+@font-face {
+    font-family: 'Material Icons Outlined';
+    @include iconsFontStyle();
+}
+
+@font-face {
+    font-family: 'Material Icons';
+    @include iconsFontStyle();
+}
+
 .material-symbols {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;

frontend/src/material.ts

@@ -3,7 +3,9 @@ import 'mdui/components/tab.js';
 import 'mdui/components/tab-panel.js';
 import 'mdui/components/list.js';
 import 'mdui/components/list-item.js';
-import 'mdui/components/list-subheader.js';
+import 'mdui/components/bottom-app-bar.js';
+import 'mdui/components/button-icon.js';
+import 'mdui/components/fab.js';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';