feature: routing pomiędzy tabami

package.json

@@ -1,22 +1,22 @@
-{
+{
-  "name": "pojazdownik",
+  "name": "pojazdownik",
-  "version": "1.4.0",
+  "version": "1.4.0",
-  "private": true,
+  "private": true,
-  "scripts": {
+  "scripts": {
-    "dev": "vite",
+    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174"
+    "preview": "yarn build && vite preview --port 4174"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.17",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.1.0",
-    "sass": "^1.59.3",
+    "sass": "^1.59.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
+    "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.14.6",
+    "vite-plugin-pwa": "^0.14.6",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.2.0"
-  }
+  }
-}
+}

src/App.vue

@@ -77,6 +77,18 @@ export default defineComponent({
     ).json();
 
     this.store.stockData = stockData;
+
+    // routing
+    switch (window.location.pathname) {
+      case '/numgnr':
+        this.store.stockSectionMode = 'number-generator';
+        break;
+      case '/stockgnr':
+        this.store.stockSectionMode = 'stock-generator';
+        break;
+      default:
+        break;
+    }
   },
 });
 </script>

src/components/sections/LogoSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="logo-section">
+  <section class="logo-section" @click="navigate">
     <img src="/images/logo.svg" alt="logo pojazdownik" />
   </section>
 </template>
@@ -9,6 +9,12 @@ export default {
   setup() {
     return {};
   },
+
+  methods: {
+    navigate() {
+      window.location.pathname = '';
+    },
+  },
 };
 </script>
 
@@ -21,11 +27,13 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  cursor: pointer;
 }
 
 img {
   max-width: 25em;
-  width: 100%;    
+  width: 100%;
 }
 </style>