работаем бля работаем

new-client/src/shared/layouts/Auth.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="auth-layout">
+    <div class="auth-layout__container">
+      <AppLogo class="auth-layout__logo" />
+
+      <div class="auth-layout__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppLogo from '@shared/components/AppLogo.vue'
+
+defineOptions({
+  name: 'AuthLayout',
+})
+</script>
+
+<style lang="scss">
+.auth-layout {
+  display: flex;
+
+  height: 100%;
+
+  &__container {
+    margin: auto;
+    width: 100%;
+    max-width: 380px;
+  }
+
+  &__logo {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+
+  &__content {
+    padding: 24px;
+    background-color: var(--bg);
+    border-radius: 36px;
+  }
+}
+</style>

new-client/src/shared/layouts/Default.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="default-layout">
+    <header class="app-header">
+      <div class="app-header__sidebar">
+        <AppLogo />
+      </div>
+      <div class="app-header__content">
+        Header
+      </div>
+    </header>
+
+    <aside class="app-sidebar">
+      Sidebar
+    </aside>
+
+    <div class="default-layout__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppLogo from '@shared/components/AppLogo.vue'
+
+defineOptions({
+  name: 'DefaultLayout',
+})
+</script>
+
+<style lang="scss">
+.default-layout {
+  --sidebar-width: 320px;
+
+  height: 100%;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: 'header header' 'sidebar content';
+
+  &__content {
+    grid-area: content;
+  }
+
+  .app-header {
+    grid-area: header;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    align-items: stretch;
+    background-color: var(--bg);
+    border-bottom: 1px solid var(--border-muted);
+    height: 52px;
+
+    &__sidebar {
+      border-right: 1px solid var(--border-muted);
+    }
+
+    &__sidebar,
+    &__content {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+    }
+
+    &__title {
+      font-weight: 700;
+    }
+
+    &__version {
+      margin-left: 4px;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+  }
+
+  .app-sidebar {
+    grid-area: sidebar;
+    background-color: var(--bg);
+    border-right: 1px solid var(--border-muted);
+    padding: 8px;
+  }
+}
+</style>