brutalism design

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

@@ -27,18 +27,12 @@ defineOptions({
   &__container {
     margin: auto;
     width: 100%;
-    max-width: 380px;
+    max-width: 440px;
   }
 
   &__logo {
-    text-align: center;
-    margin-bottom: 24px;
-  }
-
-  &__content {
-    padding: 24px;
-    background-color: var(--bg);
-    border-radius: 36px;
+    justify-self: center;
+    margin-bottom: var(--space-6);
   }
 }
 </style>

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

@@ -1,30 +1,42 @@
 <template>
   <div class="default-layout">
-    <header class="app-header">
-      <div class="app-header__sidebar">
-        <AppLogo />
+    <header class="header">
+      <div class="header__left">
+        <p class="header__app-title">
+          Chad
+        </p>
+
+        <p class="header__version">
+          {{ version }}
+        </p>
       </div>
-      <div class="app-header__content">
-        Header
+
+      <div class="header__right">
+        <p class="header__title">
+          Messages
+        </p>
       </div>
     </header>
 
-    <aside class="app-sidebar">
-      Sidebar
+    <aside class="sidebar">
+      <ChannelList class="sidebar__channel-list" />
     </aside>
 
-    <div class="default-layout__content">
+    <div class="content">
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import AppLogo from '@shared/components/AppLogo.vue'
+import { useApp } from '@shared/composables/use-app.js'
+import ChannelList from '@widgets/channel-list/ui/ChannelList.vue'
 
 defineOptions({
   name: 'DefaultLayout',
 })
+
+const { version } = useApp()
 </script>
 
 <style lang="scss">
@@ -37,46 +49,62 @@ defineOptions({
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header header' 'sidebar content';
 
-  &__content {
-    grid-area: content;
-  }
-
-  .app-header {
+  .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;
+    height: 56px;
+    border-bottom: var(--border-w) solid var(--ink);
 
-    &__sidebar {
-      border-right: 1px solid var(--border-muted);
-    }
-
-    &__sidebar,
-    &__content {
+    &__left {
       display: flex;
       align-items: center;
-      padding: 8px;
+      justify-content: space-between;
+      background-color: var(--ink);
+      padding-inline: var(--space-4);
     }
 
-    &__title {
-      font-weight: 700;
+    &__app-title {
+      @include font-display-14;
+
+      color: var(--white);
     }
 
     &__version {
-      margin-left: 4px;
-      color: var(--text-muted);
-      font-size: 0.75rem;
+      @include font-micro;
+
+      color: var(--grey-3);
+    }
+
+    &__right {
+      display: flex;
+      align-items: center;
+      padding-inline: var(--space-4);
+    }
+
+    &__title {
+      @include font-display-14;
     }
   }
 
-  .app-sidebar {
+  .sidebar {
     grid-area: sidebar;
-    background-color: var(--bg);
-    border-right: 1px solid var(--border-muted);
-    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    border-right: var(--border-w) solid var(--ink);
+    overflow-y: auto;
+
+    &__channel-list {
+      flex: 1;
+    }
+  }
+
+  .content {
+    grid-area: content;
+    overflow-y: auto;
   }
 }
 </style>