add desktop nav

.eslintrc

@@ -27,6 +27,7 @@
             }
         ],
         "object-shorthand": "warn",
-        "vue/html-self-closing": "warn"
+        "vue/html-self-closing": "warn",
+        "no-console": "warn"
     }
 }

src/App.vue

@@ -1,58 +1,56 @@
 <template>
-    <NavbarTop />
+    <div class="toolbarContainer">
+        <KeepAlive>
+            <Component
+                :is="activeVariant"
+                :options="options"
+                @navigate="navigate"
+            />
+        </KeepAlive>
+    </div>
 </template>
 
 <script>
-import NavbarTop from './components/NavbarTop.vue';
-import { Breakpoints, navbarItems } from './constants';
-import { windowWidthMixin } from './mixins';
-
-//import swipe from "@/events/swipe";
+import { ToolbarBack, ToolbarCalendar, ToolbarPlain } from './components';
 
 export default {
-    components: { NavbarTop },
-    mixins: [windowWidthMixin],
-
-    data() {
-        return { show_appbar: false, navbarItems };
+    components: {
+        ToolbarBack,
+        ToolbarCalendar,
+        ToolbarPlain,
     },
-
+    data: () => ({
+        layoutName: 'plain',
+        text: 'Твой физфак!',
+    }),
     beforeMount() {
-        // вызов функции swipe с предварительными настройками
-        //swipe(document, { maxTime: 800, minTime: 200, maxDist: 150, minDist: 50 });
+        document.addEventListener('change-header-layout', e => {
+            this.layoutName = e.detail.layoutName;
+            this.options = e.detail;
+        });
     },
-
-    methods: {
-        isMobile() {
-            return this.windowWidth < Breakpoints.SM;
-        },
-
-        resizeHandler(event) {
-            console.log(event.target);
-            this.windowWidth = event.target.innerWidth;
-        },
-
-        async captureNavigation(from, to) {
-            if (from === to) return;
-            try {
-                fetch(`${process.env.VUE_APP_API_MARKETING}/action`, {
-                    method: 'POST',
-                    cache: 'no-cache',
-                    redirect: 'follow',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        user_id: localStorage.getItem('marketing-id'),
-                        action: 'route to',
-                        path_from: from,
-                        path_to: to,
-                    }),
-                });
-            } catch {
-                //Failed, skips
+    computed: {
+        activeVariant() {
+            switch (this.layoutName) {
+                case 'calendar':
+                    return ToolbarCalendar;
+                case 'back':
+                    return ToolbarBack;
             }
+            return ToolbarPlain;
         },
     },
 };
 </script>
-
-<style></style>
+<style scoped>
+.toolbarContainer {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
+    padding: 10px 4%;
+    height: 56px;
+    background: var(--bs-primary);
+}
+</style>

src/components/ButtonIcon.vue

@@ -0,0 +1,35 @@
+<template>
+    <button class="material-symbols-sharp">
+        {{ icon }}
+    </button>
+</template>
+
+<script>
+export default {
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+button {
+    color: var(--bs-on-primary);
+    border-radius: 999px;
+    padding: 8px;
+}
+
+button:disabled {
+    opacity: 0.6;
+}
+
+button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+button:active {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+</style>

src/components/DropdownMenu.vue

@@ -1,11 +1,11 @@
 <template>
-    <OptionsButton
+    <ButtonIcon
         icon="more_vert"
         :disabled="disabled"
         @click="showOptions = !showOptions"
     />
     <div
-        v-if="showOptions"
+        v-show="showOptions"
         v-click-outside="closeMenu"
         class="dropdown-menu"
     >
@@ -22,13 +22,13 @@
 
 <script>
 import vClickOutside from 'click-outside-vue3';
-import OptionsButton from './OptionsButton';
+import ButtonIcon from './ButtonIcon';
 
 export default {
     directives: {
         clickOutside: vClickOutside.directive,
     },
-    components: { OptionsButton },
+    components: { ButtonIcon },
     props: {
         menu: { type: Array, default: () => [] },
         disabled: Boolean,
@@ -38,7 +38,6 @@ export default {
     }),
     methods: {
         openMenu() {
-            console.log(this.menu);
             this.showOptions = !this.showOptions;
         },
         closeMenu() {