Added header, menu, tabs

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/admin_panel.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/admin_panel.iml" filepath="$PROJECT_DIR$/.idea/admin_panel.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/App.vue

@@ -1,13 +1,26 @@
 <template>
   <main
-    class="w-screen h-screen flex flex-col px-32 py-4 bg-black text-zinc-100 font-sans bg-opacity-90"
+    class="w-screen h-screen flex flex-col text-black font-sans"
   >
-    <section><Tabs /></section>
-    <section><Menu /><router-view /></section>
+    <div class="bg-white">
+      <Header />
+    </div>
+    <div class="flex-auto flex bg-black bg-opacity-10">
+      <Transition name="nav" mode="out-in">
+      <Menu v-if="useUi().showNav" />
+    </Transition>
+      <section class="flex-auto flex flex-col gap-5 py-4 px-8">
+        <Tabs />
+        <div class="flex-auto">
+          <router-view />
+        </div>
+      </section></div>
   </main>
 </template>
 
 <script setup lang="ts">
 import Menu from "./layouts/Menu.vue";
 import Tabs from "./layouts/Tabs.vue";
+import Header from "./layouts/Header.vue"
+import { useUi } from "@/stores/useUi";
 </script>

src/layouts/Header.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="w-full h-10">
+w
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/layouts/Menu.vue

@@ -1,5 +1,24 @@
 <template>
-  <div></div>
+  <div class="w-56 h-full bg-black menuBack text-white">
+    <div v-for="item in menu" :key="menu.indexOf(item)" class="text-center cursor-default">
+      {{ item.name }}
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+
+interface menuItem {
+  name: string
+  link: string
+}
+
+const menu: Ref<menuItem[]> = ref([
+  {
+    name: "Статистика",
+    link: "/stats",
+  },
+])
+</script>

src/layouts/Tabs.vue

@@ -1,25 +1,31 @@
 <template>
-  <div class="w-full h-12 flex gap-5 overflow-x-scroll">
+  <div class="w-full h-12 flex gap-5 overflow-y-hidden overflow-x-scroll">
     <TransitionGroup name="tabs" mode="in-out">
       <!-- todo: better animation, when closing tabs -->
       <div
         v-for="tab in tabs"
         :key="tabs.indexOf(tab)"
-        class="w-40 px-5 flex items-center justify-between cursor-default rounded-md bg-blue-800 bg-opacity-50 hover:bg-opacity-40 transition-all"
+        class="w-40"
       >
-        <div>{{ tab.name }}</div>
-        <div
-          class="hover:opacity-70 active:opacity-40 cursor-pointer transition-all"
-          @click="tabs.splice(tabs.indexOf(tab), 1)"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-            <path
-              d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z"
-              fill="#ffffff"
-            />
-          </svg>
-        </div></div
-    ></TransitionGroup>
+        <router-link :to="tab.link">
+          <div class="px-5 py-1 flex items-center justify-between cursor-pointer rounded-md bg-blue-600 select-none text-white bg-opacity-80 hover:bg-opacity-70 transition-all overflow-visible">
+            <div>{{ tab.name }}</div>
+            <div
+                class="hover:opacity-70 active:opacity-40 cursor-pointer transition-all"
+                v-if="tab.removable"
+                @click="tabs.splice(tabs.indexOf(tab), 1)"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
+                <path
+                    d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z"
+                    fill="#ffffff"
+                />
+              </svg>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </TransitionGroup>
   </div>
 </template>
 
@@ -28,29 +34,31 @@ import { ref } from "vue";
 import type { Ref } from "vue";
 
 interface OpenedTabs {
-  name: string;
+  name: string
+  link: string
+  removable: boolean
 }
 
 const tabs: Ref<OpenedTabs[]> = ref([
-  { name: "Tab 1" },
-  { name: "Tab 2" },
-  { name: "Tab 3" },
-  { name: "Tab 4" },
-  { name: "Tab 5" },
-  { name: "Tab 6" },
-  { name: "Tab 7" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 8" },
-  { name: "Tab 9" },
-  { name: "Tab 10" },
-  { name: "Tab 11" },
-  { name: "Tab 12" },
-  { name: "Tab 13" },
+  {
+    name: "Home",
+    link: "/",
+    removable: false,
+  },
+  {
+    name: "Components",
+    link: "/components",
+    removable: true,
+  },
+  {
+    name: "Stats",
+    link: "/stats",
+    removable: true,
+  },
+  {
+    name: "System",
+    link: "/system",
+    removable: true,
+  }
 ]);
 </script>

src/stores/counter.ts

@@ -1,13 +0,0 @@
-import { ref, computed } from "vue";
-import type { Ref } from "vue";
-import { defineStore } from "pinia";
-
-export const useCounterStore = defineStore("counter", () => {
-  const count: Ref<number> = ref(0);
-  const doubleCount = computed(() => count.value * 2);
-  function increment() {
-    count.value++;
-  }
-
-  return { count, doubleCount, increment };
-});

src/stores/useUi.ts

@@ -0,0 +1,9 @@
+import { ref, computed } from "vue";
+import type { Ref } from "vue";
+import { defineStore } from "pinia";
+
+export const useUi = defineStore("ui", () => {
+  const showNav: Ref<boolean> = ref(false)
+
+  return {showNav}
+});

src/style.css

@@ -4,15 +4,37 @@
 
 .tabs-enter-active,
 .tabs-leave-active {
-  transition: all 0.5s ease;
+  transition: all .5s;
+  max-width: 100px;
 }
 
 .tabs-enter-from,
 .tabs-leave-to {
   opacity: 0;
-  transform: translateY(5px);
+  transform: translateX(-20px);
+  max-width: 0px;
 }
 
 *::-webkit-scrollbar {
-  height: 1px;
+  height: 10px;
 }
+
+.nav-enter-active,
+.nav-leave-active {
+  transition: all .4s;
+  max-width: 1000px;
+}
+
+.nav-enter-from,
+.nav-leave-to {
+  max-width: 10px;
+  opacity: 0;
+}
+
+.nav-move {
+  position: relative;
+}
+
+.menuBack {
+  background: linear-gradient(360deg, yellowgreen, green);
+}

src/views/HomeView.vue

@@ -1,7 +1,12 @@
 <template>
-  <div></div>
+  <div>
+    <button @click="useUi().showNav = !useUi().showNav">show</button>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useUi } from "@/stores/useUi";
+
+</script>
 
 <style scoped></style>