feat: change layout system

src/app/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useColorMode, useDark } from '@vueuse/core';
 import { computed } from 'vue';
+import { useColorMode, useDark } from '@vueuse/core';
 import { Toaster } from 'vue-sonner';
+import { AppLayout } from '@/layouts';
 
 type ToasterTheme = 'dark' | 'light';
 
@@ -14,12 +15,12 @@ const toasterTheme = computed<ToasterTheme>(() => {
 </script>
 
 <template>
-  <component :is="$route.meta.layout">
+  <AppLayout>
     <RouterView v-slot="{ Component }">
       <KeepAlive :include="['Login', 'Registration']">
         <component :is="Component" />
       </KeepAlive>
     </RouterView>
-  </component>
+  </AppLayout>
   <Toaster :theme="toasterTheme" position="bottom-right" />
 </template>

src/app/providers/router/index.ts

@@ -1,15 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import type { RouterRecord } from './types';
-import { AuthLayout, SidebarLayout } from '@/layouts';
 import { RouteNames } from '@/shared/config/consts';
+import { LayoutsEnum } from '@/layouts/model';
+import { layoutResolverMiddleware } from './middleware';
 
 const routes = [
   {
     name: RouteNames.boards,
     path: '/',
     component: () => import('@/pages/Boards.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -18,7 +18,6 @@ const routes = [
     path: '/templates',
     component: () => import('@/pages/Templates.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -27,7 +26,6 @@ const routes = [
     path: '/settings',
     component: () => import('@/pages/Settings.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -49,7 +47,6 @@ const routes = [
       }
     ],
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -58,7 +55,6 @@ const routes = [
     path: '/board/:id',
     component: () => import('@/pages/Kanban.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -67,7 +63,7 @@ const routes = [
     path: '/user/login',
     component: () => import('@/pages/Login.vue'),
     meta: {
-      layout: AuthLayout,
+      layout: LayoutsEnum.auth,
       requiresAuth: false
     }
   },
@@ -76,7 +72,7 @@ const routes = [
     path: '/user/registration',
     component: () => import('@/pages/Registration.vue'),
     meta: {
-      layout: AuthLayout,
+      layout: LayoutsEnum.auth,
       requiresAuth: false
     }
   }
@@ -90,7 +86,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/providers/router/middleware/index.ts

@@ -0,0 +1 @@
+export * from './layoutResolver';

src/app/providers/router/middleware/layoutResolver.ts

@@ -0,0 +1,10 @@
+import type { RouteLocationNormalized } from 'vue-router';
+import { LayoutsEnum, LayoutToFileMap } from '@/layouts/model';
+
+export async function layoutResolverMiddleware(route: RouteLocationNormalized) {
+  const { layout } = route.meta;
+  const normalizedLayoutName = layout || LayoutsEnum.default;
+  const fileName = LayoutToFileMap[normalizedLayoutName].split('.vue')[0];
+  const component = await import(`@/layouts/ui/${fileName}.vue`);
+  route.meta.layoutComponent = component.default;
+}

src/app/providers/router/types.ts

@@ -1,10 +1,12 @@
 import 'vue-router';
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
+import type { LayoutsEnum } from '@/layouts/model';
 
 declare module 'vue-router' {
   interface RouteMeta {
-    layout: Component;
+    layout?: LayoutsEnum;
+    layoutComponent?: Component;
     requiresAuth?: boolean;
   }
 }

src/layouts/index.ts

@@ -1,5 +1,6 @@
+import AppLayout from './ui/AppLayout.vue';
 import DefaultLayout from './ui/DefaultLayout.vue';
-import SidebarLayout from './ui/SidebarLayout.vue';
+import WelcomeLayout from './ui/WelcomeLayout.vue';
 import AuthLayout from './ui/AuthLayout.vue';
 
-export { DefaultLayout, SidebarLayout, AuthLayout };
+export { AppLayout, DefaultLayout, WelcomeLayout, AuthLayout };

src/layouts/model/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/layouts/model/types.ts

@@ -0,0 +1,11 @@
+export enum LayoutsEnum {
+  default = 'default',
+  auth = 'auth',
+  welcome = 'welcome'
+}
+
+export const LayoutToFileMap: Record<LayoutsEnum, string> = {
+  default: 'DefaultLayout.vue',
+  auth: 'AuthLayout.vue',
+  welcome: 'WelcomeLayout.vue'
+};

src/layouts/ui/AppLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <component :is="$route.meta.layoutComponent">
+    <slot />
+  </component>
+</template>

src/layouts/ui/DefaultLayout.vue

@@ -1,12 +1,87 @@
+<script setup lang="ts">
+// @ts-expect-error missing type
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+import { computed, ref } from 'vue';
+import { Sidebar, HeaderMain } from '@/widgets/layout';
+import { useLocalStorage } from '@vueuse/core';
+import { RouteNames } from '@/shared/config/consts';
+
+const isExpanded = useLocalStorage('isExpanded', true);
+const transitionFl = ref(false);
+
+const widthSidebar = computed(() => {
+  return isExpanded.value ? '22%' : '4%';
+});
+const widthMainContainer = computed(() => {
+  return `calc(100% - ${widthSidebar.value})`;
+});
+const onToggleArea = () => {
+  isExpanded.value = !isExpanded.value;
+  transitionFl.value = true;
+};
+</script>
+
 <template>
-  <div :class="$style.default_layout">
-    <slot />
-  </div>
+  <Splitpanes :class="$style.default_layout">
+    <Pane
+      min-size="4"
+      max-size="22"
+      :size="widthSidebar"
+      :style="{ transition: transitionFl && 'width .2s ease-out' }"
+    >
+      <Sidebar :is-expanded @on-toggle="onToggleArea" />
+    </Pane>
+    <Pane :size="widthMainContainer">
+      <div :class="$style.main_part">
+        <HeaderMain />
+        <div :class="$style.slot" :style="{ padding: $route.name !== RouteNames.board ? '30px 45px' : '0' }">
+          <slot />
+        </div>
+      </div>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <style module lang="scss">
 .default_layout {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0%;
+  width: 100%;
   height: 100dvh;
+
+  .main_part {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .slot {
+      background-color: var(--zinc-50);
+      position: relative;
+      padding: 30px 45px;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.new_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 15px;
   width: 100%;
+  background-color: var(--zinc-50);
+}
+
+:global(.dark) {
+  .default_layout {
+    .main_part {
+      .slot {
+        background-color: var(--zinc-700);
+      }
+    }
+  }
 }
 </style>