feat(): big update

apps/mix-cms/src/app/app.routes.ts

@@ -1,6 +1,6 @@
 import { Route } from '@angular/router';
 import { notLoginPageGuard } from '@mixcore/module/auth';
-import { MixPortalLayoutComponent } from './pages/portal/portal.layout';
+import { MixLayoutComponent } from '@mixcore/module/layout';
 
 export const breadcrumbName = (name: string) => ({ title: name });
 
@@ -127,7 +127,7 @@ export const ROUTES: Route[] = [
   },
   {
     path: CMS_ROUTES.portal.path,
-    component: MixPortalLayoutComponent,
+    component: MixLayoutComponent,
     data: breadcrumbName('Home'),
     canActivate: [notLoginPageGuard],
     loadChildren: () =>

apps/mix-cms/src/app/pages/portal/dashboard/dashboard.component.scss

@@ -2,8 +2,8 @@
   height: 100%;
   padding: var(--container-padding);
   background-color: var(--background-color-primary);
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
+  // border-top-left-radius: 12px; TODO
+  // border-bottom-left-radius: 12px;
   border: 1px solid var(--tui-base-04);
   overflow: hidden;
 }

apps/mix-database/src/app/app.component.scss

@@ -1,9 +1,7 @@
 .main-app {
   width: 100%;
   height: 100%;
-  background: #ece9e6;
-  background: -webkit-linear-gradient(to left, #ffffff, #ece9e6);
-  background: linear-gradient(to left, #ffffff, #ece9e6);
+  background-color: #eaf0f3;
 }
 
 .app-backdrop {

apps/mix-database/src/app/app.routes.ts

@@ -1,6 +1,6 @@
 import { Route } from '@angular/router';
 import { notLoginPageGuard } from '@mixcore/module/auth';
-import { MixPortalLayoutComponent } from './pages/portal/portal.layout';
+import { MixLayoutComponent } from '@mixcore/module/layout';
 
 export const breadcrumbName = (name: string) => ({ title: name });
 
@@ -59,7 +59,7 @@ export const ROUTES: Route[] = [
   },
   {
     path: CMS_ROUTES.portal.path,
-    component: MixPortalLayoutComponent,
+    component: MixLayoutComponent,
     canActivate: [notLoginPageGuard],
     loadChildren: () =>
       import('./pages/portal/portal.routes').then((m) => m.PortalRoutes),

apps/mix-database/src/app/pages/portal/dashboard/dashboard.component.scss

@@ -3,8 +3,8 @@
   padding: var(--container-padding);
   background-color: var(--background-color-primary);
   // border-radius: var(--border-radius-default);
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
+  // border-top-left-radius: 12px;
+  // border-bottom-left-radius: 12px; TODO
   border: 1px solid var(--border-color-default);
   overflow: hidden;
 }

apps/mix-kanban/src/app/pages/portal/dashboard/dashboard.component.scss

@@ -2,8 +2,8 @@
   height: 100%;
   padding: var(--container-padding);
   background-color: var(--background-color-primary);
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
+  // border-top-left-radius: 12px; TODO
+  // border-bottom-left-radius: 12px;
   border: 1px solid var(--border-color-default);
   overflow: hidden;
 }

libs/mix-share/src/components/main-side-menu/collapse-btn.component.scss

@@ -0,0 +1,22 @@
+.collapse-btn {
+  cursor: pointer;
+
+  svg {
+    transform: scale(1.3);
+  }
+
+  .un-active {
+    display: none;
+  }
+
+  &:hover {
+    .active {
+      display: none;
+    }
+
+    .un-active {
+      display: block;
+      color: var(--primary-color);
+    }
+  }
+}

libs/mix-share/src/components/main-side-menu/collapse-btn.component.ts

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-btn',
+  template: `
+    <i class="collapse-btn"
+      ><svg
+        class="active"
+        fill="currentColor"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10.82 10.5h3.68a.5.5 0 0 0 0-1h-3.68l1-.87a.5.5 0 1 0-.66-.76l-2 1.75a.5.5 0 0 0 0 .76l2 1.75a.5.5 0 1 0 .66-.76l-1-.87ZM4 4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4ZM3 6a1 1 0 0 1 1-1h3v10H4a1 1 0 0 1-1-1V6Zm5 9V5h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8Z"
+          fill="currentColor"
+        ></path></svg
+      ><svg
+        class="un-active"
+        fill="currentColor"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10.82 10.5h3.68a.5.5 0 0 0 0-1h-3.68l1-.87a.5.5 0 1 0-.66-.76l-2 1.75a.5.5 0 0 0 0 .76l2 1.75a.5.5 0 1 0 .66-.76l-1-.87ZM4 4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4Zm4 11V5h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8Z"
+          fill="currentColor"
+        ></path></svg
+    ></i>
+  `,
+
+  standalone: true,
+  styleUrls: ['./collapse-btn.component.scss'],
+  imports: [CommonModule],
+})
+export class CollapseBtnComponent {}

libs/mix-share/src/components/main-side-menu/main-side-menu.component.html

@@ -1,13 +1,18 @@
-<div class="side-menu flex">
-  <div class="side-menu__icon-bar"
-       [ngClass]="{ '--active': showDetail }">
-    <div class="side-menu__item --fixed"
-         (click)="showDetail = !showDetail">
-      <div class="side-menu__parent-container">
-        <span class="mix-icon side-menu__icon"> menu </span>
-      </div>
+<div class="side-menu">
+  <div class="side-menu__header p-2">
+    <div class="side-menu__logo"
+         [ngClass]="{ '--active': showDetail }">
     </div>
 
+    <collapse-btn *ngIf="showDetail"
+                  class="side-menu__expand-btn"
+                  (click)="expandChange.emit()"></collapse-btn>
+  </div>
+
+  <div class="devider h-px bg-slate-300 w-full mt-1 mb-1"></div>
+
+  <div class="side-menu__body p-2 grow"
+       [ngClass]="{ '--active': showDetail }">
     @for(item of menu; track item) {
     <tui-hosted-dropdown class="w-full"
                          [class.mt-auto]="item.align === 'bottom'"