Turn panel into top bar

frontend/index.html

@@ -112,16 +112,16 @@
                                     </mdui-list-item>
                                 </mdui-list>
                             </mdui-tab-panel>
-                            <mdui-tab-panel slot="panel" value="channels">ertgergert</mdui-tab-panel>
-                            <mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</mdui-tab-panel>
+                            <mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
+                            <mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
                         </mdui-tabs>
                     </div>
-                    <div class="ponel">
-                        <a href="#">+чат</a> 
-                        <a href="#">+канал</a> 
-                        <a href="#">Выйти</a>
-                    </div>
-                    <footer></footer>
+                    <mdui-bottom-app-bar>
+                        <mdui-button-icon icon="settings--filled"></mdui-button-icon>
+                        <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
+                        <div style="flex-grow: 1"></div>
+                        <mdui-fab icon="edit--filled"></mdui-fab>
+                    </mdui-bottom-app-bar>
                 </div>
                 <div class="chat-container">          
                     <div class="chat-main" id="conteinerchat">

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';