feat: add plug for devices, fix: styles

src/app/providers/router/index.ts

@@ -104,9 +104,9 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  // if (to.meta.requiresAuth === true) {
-  //   return router.push({ name: RouteNames.login });
-  // }
+  if (to.meta.requiresAuth === true) {
+    return router.push({ name: RouteNames.login });
+  }
 });
 
 router.beforeEach(layoutResolverMiddleware);

src/app/styles/primary/typography.scss

@@ -55,56 +55,111 @@
 @media screen and (max-width: 1440px) {
   .heading-1 {
     font-size: 32px;
-    line-height: 44px;
+    line-height: 40px;
     font-weight: 600;
   }
 
   .heading-2 {
     font-size: 30px;
-    line-height: 40px;
+    line-height: 36px;
     font-weight: 600;
   }
 
   .heading-3 {
     font-size: 26px;
-    line-height: 32px;
+    line-height: 30px;
     font-weight: 600;
   }
 
   .heading-4 {
     font-size: 22px;
-    line-height: 32px;
+    line-height: 28px;
     font-weight: 500;
   }
 
   .text-xl {
     font-size: 20px;
-    line-height: 28px;
+    line-height: 24px;
     font-weight: 500;
   }
 
   .text-lg {
     font-size: 18px;
-    line-height: 28px;
+    line-height: 26px;
     font-weight: 400;
   }
 
   .text-base {
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
     font-weight: 400;
   }
 
   .text-sm {
     font-size: 13px;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 400;
   }
 
   .text-xs {
     font-size: 11px;
-    line-height: 16px;
+    line-height: 14px;
     font-weight: 400;
   }
-
 }
+
+@media screen and (max-width: 1280px) {
+  .heading-1 {
+    font-size: 30px;
+    line-height: 38px;
+    font-weight: 600;
+  }
+
+  .heading-2 {
+    font-size: 28px;
+    line-height: 34px;
+    font-weight: 600;
+  }
+
+  .heading-3 {
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 600;
+  }
+
+  .heading-4 {
+    font-size: 20px;
+    line-height: 26px;
+    font-weight: 500;
+  }
+
+  .text-xl {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+
+  .text-lg {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 400;
+  }
+
+  .text-base {
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: 400;
+  }
+
+  .text-sm {
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 400;
+  }
+
+  .text-xs {
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: 400;
+  }
+}

src/layouts/ui/AppLayout.vue

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import { defineAsyncComponent } from 'vue';
+
+const { width } = useWindowSize();
+
+const NotAvailable = defineAsyncComponent(() => {
+  return import('@/widgets/device/ui/NotAvailable.vue');
+});
+</script>
+
 <template>
-  <component :is="$route.meta.layoutComponent">
-    <slot />
-  </component>
+  <div v-if="width >= 1100">
+    <component :is="$route.meta.layoutComponent">
+      <slot />
+    </component>
+  </div>
+  <NotAvailable v-else />
 </template>

src/layouts/ui/DefaultLayout.vue

@@ -14,7 +14,7 @@ const isExpanded = useLocalStorage('isExpanded', true);
 const transitionFl = ref(false);
 
 const widthSidebar = computed(() => {
-  return isExpanded.value ? (width.value >= 1380 ? '22%' : '24%') : width.value >= 1380 ? '4%' : '5%';
+  return isExpanded.value ? (width.value >= 1380 ? '22%' : '26%') : width.value >= 1380 ? '4%' : '5%';
 });
 const widthMainContainer = computed(() => {
   return `calc(100% - ${widthSidebar.value})`;

src/widgets/device/ui/NotAvailable.vue

@@ -1,13 +1,104 @@
 <script setup lang="ts">
+import { useDark } from '@vueuse/core';
+import { UiBadge, UiButton } from '@/shared/ui';
+import { redirect } from '@/shared/lib/helpers';
+import { TriangleAlert } from 'lucide-vue-next';
 
+const isDark = useDark();
 </script>
 
 <template>
-  <div>
-    hello
+  <div class="container">
+    <div :class="$style.items">
+      <div :class="$style.name">
+        <TriangleAlert
+          :class="$style.icon"
+          :color="!isDark ? 'rgb(39 39 42)' : 'rgb(212 212 216)'"
+          :stroke-width="1"
+        />
+        <UiBadge variant="secondary" :class="$style.badge">dev 🔧</UiBadge>
+      </div>
+      <h2 class="heading-2">Jenda is not available for your device type :/</h2>
+
+      <p class="text-sm">
+        Please use our application on devices such as laptops or computers. For more information contact with
+        us.
+      </p>
+      <div :class="$style.btns">
+        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://github.com/mnenie/jenda')">
+          <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
+          GitHub
+        </UiButton>
+        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://t.me/youngjuicycashrussia')">
+          <img src="/icons/telegram.webp" />
+          Telegram
+        </UiButton>
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style module lang="scss">
+.items {
+  position: relative;
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+
+  .icon {
+    position: relative;
+    margin-bottom: -4px;
+    height: 180px;
+    width: 180px;
+    margin-top: -32px;
+  }
+
+  & > img {
+    width: 200px;
+  }
+
+  .name {
+    position: relative;
+  }
+
+  & >  h2{
+    margin-bottom: 4px;
+  }
+
+  & > p {
+    margin-bottom: 16px;
+    color: var(--zinc-500);
+  }
+
+  .btns {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .btn {
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+  }
+
+  .badge {
+    position: absolute;
+    bottom: 40px;
+    right: 0;
+  }
+}
 
-</style>
+:global(html.dark){
+  .items {
+    & > p {
+      color: var(--zinc-300);
+    }
+  }
+}
+</style>

src/widgets/welcome/ui/AboutSection.vue

@@ -96,9 +96,6 @@ const { t } = useI18n();
     & > p {
       color: var(--zinc-300);
     }
-    // & > h1{
-    //   color: var(--zinc-200);
-    // }
   }
 }
 </style>