fix: routes

src/components/Components/ComponentsNotification.vue

@@ -10,17 +10,17 @@ enum NotifyType {
 
 const { notify } = useQuasar()
 
-function notifyHandler(type: NotifyType, progress = false) {
+function notifyHandler(notifyType: NotifyType, progress = false) {
   notify({
-    type,
+    type: notifyType,
     progress,
-    color: type,
-    message: notifyLabel(type),
+    color: notifyType,
+    message: notifyLabel(notifyType),
   })
 }
 
-function notifyLabel(type: NotifyType) {
-  switch (type) {
+function notifyLabel(notifyType: NotifyType) {
+  switch (notifyType) {
     case NotifyType.Positive: return 'Trigger \'positive\''
     case NotifyType.Negative: return 'Trigger \'negative\''
     case NotifyType.Warning: return 'Trigger \'warning\''

src/components/Home/HomeMain.vue

@@ -6,7 +6,7 @@ enum Tabs {
   Routes = 'Routes',
 }
 
-const tab = ref(Tabs.Components)
+const tab = useStorage('active-tab', Tabs.Components)
 </script>
 
 <template>

src/components/Home/RoutesTab.vue

@@ -1,28 +1,134 @@
 <script setup lang="ts">
+import routesWithPropsImg from '~/assets/img/routes-with-props.png'
+
 const selected = ref(null)
 
-const props = [
+const simpleRoute = [
   {
-    label: '[page_name]',
+    label: 'pages',
+    children: [
+      { label: '[page_name].vue' },
+    ],
+  },
+]
+
+const paramsRoute = [
+  {
+    label: 'pages',
     children: [
       {
-        label: 'index.vue',
-      },
-      {
-        label: '[props]',
+        label: '[page_name].vue',
+        children: [
+          {
+            label: 'index.vue',
+          },
+          {
+            label: '[props].vue',
+          },
+        ],
       },
     ],
   },
+
 ]
 </script>
 
 <template>
-  <div class="q-pa-md q-gutter-sm">
-    <q-tree
-      v-model:selected="selected"
-      :nodes="props"
-      default-expand-all
-      node-key="label"
-    />
+  <div class="routes">
+    <div class="routes-example">
+      <div class="routes-example__title">
+        <h6>
+          Simple route
+        </h6>
+        <span data-name="tooltip">i
+          <q-tooltip anchor="top middle" :offset="[0, 60]" max-width="300px">
+            If you have only one page, you can use a simple architecture by creating a file where the file name will
+            serve as the route for your page.
+          </q-tooltip>
+        </span>
+      </div>
+      <q-tree v-model:selected="selected" :nodes="simpleRoute" default-expand-all node-key="label" />
+
+      <img :src="routesWithPropsImg" alt="example">
+
+      <div class="links">
+        <router-link to="/test">
+          Simple route
+        </router-link>
+      </div>
+    </div>
+    <div class="routes-example">
+      <div class="routes-example__title">
+        <h6>
+          Route with params
+        </h6>
+        <span data-name="tooltip">i
+          <q-tooltip anchor="top middle" :offset="[0, 60]" max-width="300px">
+            For more complex routes, a different architecture is used where the main route is not a file but a folder.
+            Inside this folder, you can place the components that correspond to the route.
+          </q-tooltip>
+        </span>
+      </div>
+
+      <q-tree v-model:selected="selected" :nodes="paramsRoute" default-expand-all node-key="label" />
+
+      <img :src="routesWithPropsImg" alt="example">
+      <div class="links">
+        <div>
+          <router-link to="/hi">
+            Simple route
+          </router-link>
+        </div>
+        <div>
+          <router-link to="/hi/user">
+            Props route
+          </router-link>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style lang="scss">
+.routes {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+
+  &-example__title {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .links {
+    font-size: 14px;
+
+    a {
+      color: $primary;
+      font-weight: 600;
+    }
+  }
+
+  h6 {
+    margin: 0;
+  }
+
+  span[data-name='tooltip'] {
+    background-color: $primary;
+    color: #fff;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: help;
+  }
+
+  .q-tree {
+    height: 134px;
+  }
+}
+</style>

src/pages/hi/index.vue

@@ -3,18 +3,20 @@ const router = useRouter()
 const input = ref()
 
 function onSubmit() {
-  console.log(11)
   router.push(`/hi/${input.value}`)
 }
 </script>
 
 <template>
   <div class="container hi-page">
+    <q-btn @click="router.back()">
+      Back
+    </q-btn>
     <q-form
       class="q-gutter-md"
       @submit="onSubmit"
     >
-      <q-input v-model="input" placeholder="Enter name" :rules="[val => val && val.length > 0 || 'Please type something']" />
+      <q-input v-model="input" placeholder="Enter name" :rules="[(val: string) => val && val.length > 0 || 'Please type something']" />
 
       <q-btn type="submit">
         GO

src/pages/test.vue

@@ -1,6 +1,18 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
 <template>
   <div class="container">
-    test
+    <div class="q-pt-lg">
+      <q-btn @click="router.back()">
+        Back
+      </q-btn>
+
+      <div class="row justify-center">
+        <h6>Test</h6>
+      </div>
+    </div>
   </div>
 </template>