Подключен React

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material/web": "^2.0.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "PORT=8088 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/src/BottomNavBar.css

@@ -0,0 +1,26 @@
+nav {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--md-sys-color-surface-container);
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 0;
+    padding: .5rem;
+    list-style: none;
+}
+
+nav li {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    color: var(--md-sys-color-on-surface);
+    text-align: center;
+}
+
+nav md-icon-button {
+    width: 100%;
+}

frontend/src/BottomNavBar.js

@@ -0,0 +1,39 @@
+import '@material/web/iconbutton/icon-button.js'
+import '@material/web/icon/icon.js'
+
+import './BottomNavBar.css'
+
+function BottomNavBar() {
+    return (
+        <nav className="md-typescale-body-small">
+            <ul>
+                <li>
+                    <md-icon-button href="/">
+                        <md-icon>dashboard</md-icon>
+                    </md-icon-button>
+                    Дашборд
+                </li>
+                <li>
+                    <md-icon-button href="/">
+                        <md-icon>ballot</md-icon>
+                    </md-icon-button>
+                    Опросы
+                </li>
+                <li>
+                    <md-icon-button href="/">
+                        <md-icon>chat</md-icon>
+                    </md-icon-button>
+                    Чаты
+                </li>
+                <li>
+                    <md-icon-button href="/">
+                        <md-icon>group</md-icon>
+                    </md-icon-button>
+                    Пользователи
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default BottomNavBar

nginx/main.conf

@@ -14,7 +14,7 @@ server {
         include                 /opt/cit-is-bot/nginx/secure-headers.conf;
         include                 ./conf.d/http-proxy.conf;
 
-        proxy_pass              http://cit.csasq.ru;
+        proxy_pass              http://frontend.cit.csasq.ru;
     }
 
     location /ws {

templates/main.jinja2

@@ -6,7 +6,7 @@
         <meta name="author" content="Иваницкий Глеб Олегович" />
         <meta name="robots" content="none" />
         <title>Настройки</title>
-        <link rel="icon" href="/static/icons/favicon.svg" type="image/svg+xml" />
+        <link rel="icon" href="/frontend/public/favicon.svg" type="image/svg+xml" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" type="text/css" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" type="text/css" />
         <link rel="stylesheet" href="/static/styles/main.css" type="text/css" />