draft market

src/App.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { Reprocess } from './reprocess';
+import { RouterView } from 'vue-router';
+import { Sidebar } from './sidebar';
 </script>
 
 <template>
-    <Reprocess />
+    <Sidebar />
+    <div class=" px-4 sm:ml-64">
+        <RouterView />
+    </div>
 </template>

src/Index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div></div>
+</template>

src/main.ts

@@ -1,5 +1,20 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './style.css'
+import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import App from './App.vue';
+import './style.css';
 
-createApp(App).mount('#app')
+const routes = [
+    { path: '/', component: () => import('@/Index.vue') },
+    { path: '/reprocess', component: () => import('@/reprocess/Reprocess.vue') },
+    { path: '/market', component: () => import('@/market/Market.vue') },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+const app = createApp(App);
+
+app.use(router);
+app.mount('#app');

src/market/Market.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// 10000002
+</script>
+
+<template>
+    <div>
+        
+    </div>
+</template>

src/reprocess/Reprocess.vue

@@ -16,22 +16,22 @@ const send = async () => result.value = await reprocess(items.value, minerals.va
 </script>
 
 <template>
-    <div class="grid mb-2 mt-4 px-4">
+    <div class="grid mb-2 mt-4">
         <div class="justify-self-end">
             <span>Reprocess efficiency: </span>
             <input type="number" min="0" max="1" step="0.05" v-model="efficiency" />
         </div>
     </div>
-    <div class="flex items-stretch px-4">
+    <div class="flex items-stretch">
         <ReprocessInput name="Item JSON" v-model="items" />
         <ReprocessInput name="Mineral JSON" v-model="minerals" />
     </div>
-    <div class="grid my-2 px-4">
+    <div class="grid my-2">
         <button class="justify-self-end" @click="send">Send</button>
     </div>
     <template v-if="result.length > 0">
         <hr />
-        <div class="grid mt-2 px-4">
+        <div class="grid mt-2">
             <ReprocessResultTable :result="result" />
         </div>
     </template>

src/service.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 
 const evealApiUrl = process.env.EVEAL_API_URL;
 const evepraisalUrl = process.env.EVEPRAISAL_URL;
+const esiUrl = process.env.ESI_URL;
 
 export const apiAxiosInstance = axios.create({
     baseURL: evealApiUrl,
@@ -17,4 +18,12 @@ export const evepraisalAxiosInstance = axios.create({
         'accept': 'application/json',
         "Content-Type": "application/json"
     },
-})
+})
+
+export const esiAxiosInstance = axios.create({
+    baseURL: esiUrl,
+    headers: {
+        'accept': 'application/json',
+        "Content-Type": "application/json"
+    },
+})

src/sidebar/Sidebar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+</script>
+
+<template>
+    <aside class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
+        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700">
+            <ul class="space-y-2 font-medium">
+                <li>
+                    <RouterLink to="/reprocess" class="flex items-center p-2 rounded-md">
+                        <span>Reprocess</span>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink to="/market" class="flex items-center p-2 rounded-md">
+                        <span>Market</span>
+                    </RouterLink>
+                </li>
+            </ul>
+        </div>
+    </aside>
+</template>
+
+<style scoped>
+.router-link-active {
+    @apply bg-emerald-500;
+}
+</style>

src/sidebar/index.ts

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.vue';