Login JWT done

frontend/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
+    "jwt-decode": "^4.0.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
     "vuex": "^4.1.0"

frontend/src/App.vue

@@ -1,9 +1,29 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router';
 import Header from "./components/TheHeader.vue";
+import Footer from "./components/TheFooter.vue"
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import AdminSideBar from "@/components/AdminSideBar.vue";
+
+const store = useStore();
+const isAdmin = computed(() => store.getters.isAdmin);
 </script>
 
 <template>
-    <Header />
-    <RouterView />
+    <div class="app-container">
+        <Header />
+        <AdminSideBar v-if="isAdmin" />
+        <main class="content">
+            <RouterView />
+        </main>
+        <Footer />
+    </div>
+
 </template>
+
+<style scoped>
+.content {
+    min-height: 100vh;
+}
+</style>

frontend/src/assets/css/main.css

@@ -2,7 +2,6 @@
 
 #app {
   max-width: 1280px;
-  min-height: 100vh;
   margin: 0 auto;
   font-weight: normal;
   background-color: #FFFFFF;
@@ -13,4 +12,9 @@ body {
   background-color: #D9D9D9;
 }
 
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
 

frontend/src/components/AdminSideBar.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <button @click="toggleSidebar" class="toggle-button">
+            <img src="../assets/svg/sidebar/right.svg" alt="no" :class="isOpen ? 'close-sidebar' : 'open-sidebar'"/>
+        </button>
+
+
+        <div class="sidebar" v-if="isOpen" :style="{ transform: isOpen ? 'translateX(0)' : 'translateX(-100%)' }">
+            <router-link to="#">Информационная<br>панель</router-link> <br>
+            <router-link to="#">Каталог</router-link><br>
+            <router-link to="#">Сотрудники</router-link><br>
+            <router-link to="#">Заказы</router-link><br>
+            <router-link to="#">Отзывы</router-link><br>
+            <router-link to="#">Статистика</router-link><br>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AdminSideBar',
+    data() {
+        return {
+            isOpen: false,
+            isCatalogue: false,
+        };
+    },
+    methods: {
+        toggleSidebar() {
+            this.isOpen = !this.isOpen;
+        },
+        openCatalogue() {
+            this.isCatalogue = true
+        }
+    }
+};
+</script>
+
+<style scoped>
+.sidebar {
+    z-index: 5000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 250px; /* Ширина боковой панели */
+    background-color: #FFFFFF;
+    color: white;
+    padding: 10px;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+}
+.toggle-button {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 10000;
+}
+.close-button {
+    color: black;
+    margin-top: 20px;
+}
+
+.open-sidebar {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    width: 64px;
+    height: 64px;
+}
+
+.close-sidebar {
+    position: fixed;
+    top: 50%;
+    left: 218px;
+    width: 64px;
+    height: 64px;
+    transform: rotate(180deg);
+}
+</style>

frontend/src/components/TheFooter.vue

@@ -0,0 +1,44 @@
+<script>
+</script>
+
+<template>
+    <div class="footer">
+        <div class="text">
+            <p>© 2024</p>
+            <p>Все права защищены</p>
+            <p>ООО «Аренда инструментов»</p>
+            <p>[email protected]</p>
+            <p>+7 912 345 67 89</p>
+        </div>
+        <div class="links">
+            <router-link to="/"><p>Условия аренды</p></router-link>
+            <router-link to="/"><p>Контакты</p></router-link>
+            <router-link to="/"><p>Оплата и доставка</p></router-link>
+        </div>
+    </div>
+
+</template>
+
+<style scoped>
+.footer {
+    width: 100%;
+    height: 175px;
+    background-color: #F9F9F9;
+    padding: 32px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text p {
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 8px;
+}
+
+.links p {
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 16px;
+    color: #6A983C;
+}
+</style>