Remove existing app and replace with new layout

apps/web/src/composables/router.ts

@@ -1,80 +1,22 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createWebHistory, createRouter } from 'vue-router'
 
-// @ts-ignore
-import Landing from '@/pages/landing/Landing.vue'
-// @ts-ignore
-import Staking from '@/pages/staking/Staking.vue'
-// @ts-ignore
-import ETHStaking from '@/pages/staking/components/ETHStaking.vue'
-// @ts-ignore
-import ETHWalletSelect from '@/pages/staking/components/ETHWalletSelect.vue'
-// @ts-ignore
-import ETHConfirmStake from '@/pages/staking/components/ETHConfirmStake.vue'
-// @ts-ignore
-import Assets from '@/pages/assets/Assets.vue'
-// @ts-ignore
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import Dashboard from '@/pages/dashboard/Dashboard.vue'
 import Test from '@/pages/test/Test.vue'
-// @ts-ignore
-import ChartTest from '@/pages/chart-test/ChartTest.vue'
-// @ts-ignore
-import FrontPage from '@/pages/landing/views/FrontPage.vue'
-// @ts-ignore
-import UserDashboard from '@/pages/user-dash/UserDashboard.vue'
-// import NotFound from '@/pages/not-found/NotFound.vue'
-
 
 const routes = [
-{ 
-    path: '/', 
-    name: Landing, 
-    component: Landing,
-    meta: { authorize: [] },
-},
-{ 
-    path: '/user-dashboard:id', 
-    name: UserDashboard, 
-    component: UserDashboard,
-    meta: { authorize: [] },
-},
-{ 
-    path: '/stake', 
-    name: Staking, 
-    component: Staking,
-    meta: { authorize: [] },
-    children: [
-        {
-            path: 'eth', 
-            component: ETHStaking,
-        },
-        {
-            path: 'eth/select-wallet', 
-            component: ETHWalletSelect,
-        },
-        {
-            path: 'eth/confirm-stake', 
-            component: ETHConfirmStake,
-        }
-    ]
-},
-// { 
-//     path: '/assets', 
-//     name: Assets, 
-//     component: Assets,
-//     meta: { authorize: [] }
-// },
-{ 
-    path: '/test', 
-    name: Test, 
-    component: Test,
-    meta: { authorize: [] }
-},
-// { 
-//     path: '/:catchAll(.*)', 
-//     name: NotFound, 
-//     component: NotFound,
-//     meta: { authorize: [] }
-// }
+    { 
+        path: '/', 
+        name: Dashboard, 
+        component: Dashboard,
+        meta: { authorize: [] },
+    },
+    { 
+        path: '/test', 
+        name: Test, 
+        component: Test,
+        meta: { authorize: [] },
+    },
 ]
 
 

apps/web/src/layouts/default-layout.vue

@@ -1,54 +1,40 @@
 <script lang="ts" setup>
-import TopNav from '@/components/navigation/TopNav.vue'
-// import useUsers from '@/composables/users'
-// import { onMounted, ref } from 'vue'
+import useUsers from '@/composables/users'
 
-// const { user } = useUsers()
-
-// const showNoUserWarning = ref(false)
-// const loadingWidthMeasurement = ref(0)
-// onMounted(() => {
-  // if(user.value.id.length === 0){
-  //   showNoUserWarning.value = true
-  //   const loadingInterval = setInterval(()=>{
-  //     if(loadingWidthMeasurement.value >= 100 || user.value.id.length > 0){
-  //       showNoUserWarning.value = false
-  //       clearInterval(loadingInterval)
-  //     }
-  //     loadingWidthMeasurement.value = loadingWidthMeasurement.value + 0.1
-  //   }, 10)
-  // }
-// })
+const { user } = useUsers()
 </script>
 
 <template>
-  <div class="h-[100vh] overflow-hidden">
-    <div class="h-full flex flex-col">
-      <div class="min-w-[360px] w-full">
-        <TopNav />
-      </div>
-      <div class="h-full bg-white flex justify-center w-full overflow-y-auto">
-        <div class="w-full h-full flex justify-center ">
-          <div class="max-w-[1280px] min-w-[360px] w-full px-25">
-            <div class="py-25">
-              <slot />
-            </div>
+  <div 
+    class="min-w-[360px] min-h-[100vh] h-[100vh] 
+    w-[100vw] flex justify-center items-start py-45 overflow-y-auto"
+  >
+    <div class="max-w-[1448px] w-full px-[140px]">
+      <div
+        v-if="!user"
+        class="flex justify-between items-center gap-45 w-full pb-[60px]"
+      >
+        <div class="flex items-center gap-50">
+          <div>
+            <a href="https://www.casimir.co/">
+              <img
+                src="/casimir.svg"
+                alt="Casimir Logo"
+                class="w-[30px]"
+              >
+            </a>
+          </div>
+          <div>
+            <h6 class="text-grey_6 font-medium">
+              Dashboard
+            </h6>
           </div>
         </div>
+        <div class="text-grey_3">
+          Connect Wallet
+        </div>
       </div>
-
-      <div class="visible absolute noscreen:invisible top-0 left-0 h-full w-full bg-white flex flex-col justify-center items-center text-center px-20">
-        <i
-          class="iconoir-enlarge-round-arrow text-[36px] text-grey_4 mb-10"
-        />
-        <h6 class="text-grey_4 font-bold mb-20">
-          Casimir does not support this size of screen
-        </h6>
-
-        <h6 class="text-grey_3">
-          Please rotate to a landscape version or use a different device
-        </h6>
-      </div>
+      <slot />
     </div>
   </div>
 </template>

apps/web/src/pages/dashboard/Dashboard.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+// 
+</script>
+
+<template>
+  <div class="grid grid-cols-8  gap-[24px] h-full w-full">
+    <div class="col-span-4 border h-[450px]">
+      <div>
+        <h6 class="font-bold text-[#727476]">
+          Analytics
+        </h6>
+      </div>
+    </div> <div class="col-span-1 h-[450px]" />
+    <div class="col-span-3 border h-[450px]">
+      <div>
+        <h6 class="font-bold text-[#727476]">
+          Stake
+        </h6>
+      </div>
+    </div>
+    <div class="col-span-8 border h-[300px]">
+      <div>
+        <h6 class="font-bold text-[#727476]">
+          Table
+        </h6>
+      </div>
+    </div>
+  </div>
+</template>