From 8b779fa573ee07eb2276997d26be976656d607cc Mon Sep 17 00:00:00 2001
From: Armin <arminmow@gmail.com>
Date: Sat, 24 Aug 2024 09:34:18 +0330
Subject: [PATCH] fix sidebar

---
 .../users-table/users-table.component.html    |  2 +-
 .../users-table/users-table.component.scss    | 24 ++++++++++++-------
 .../users-table/users-table.component.spec.ts |  4 ++--
 .../components/sidebar/sidebar.component.scss |  1 +
 .../page/dashboard/dashboard.component.html   | 21 +++++++++-------
 .../page/dashboard/dashboard.component.scss   | 20 +++++++++++-----
 src/app/page/dashboard/dashboard.component.ts |  4 +++-
 7 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/app/components/manage-users-components/users-table/users-table.component.html b/src/app/components/manage-users-components/users-table/users-table.component.html
index 54f6fd3..e6d9e74 100644
--- a/src/app/components/manage-users-components/users-table/users-table.component.html
+++ b/src/app/components/manage-users-components/users-table/users-table.component.html
@@ -7,7 +7,7 @@ <h1 class="container__description__title">Manage Users</h1>
   </div>
   <div class="container__content-container">
     <div class="container__content-container__title-container">
-      <h1 class="container__content-container__title-container__title">Users</h1>
+      <h1 class="container__content-container__title-container__title"><span nz-icon nzType="team" nzTheme="outline"></span> Users</h1>
       <button class="container__content-container__title-container__button" (click)="showModal()">
         <p>Add</p>
         <span nz-icon nzType="user-add" nzTheme="outline"></span>
diff --git a/src/app/components/manage-users-components/users-table/users-table.component.scss b/src/app/components/manage-users-components/users-table/users-table.component.scss
index 34bb3e8..5346987 100644
--- a/src/app/components/manage-users-components/users-table/users-table.component.scss
+++ b/src/app/components/manage-users-components/users-table/users-table.component.scss
@@ -6,7 +6,7 @@
   .ant-tag {
     border-radius: 0.5rem;
   }
-  
+
   &__description {
     inline-size: 100%;
     background-color: #fff;
@@ -36,7 +36,7 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
     border-radius: 2rem;
     overflow: hidden;
-  
+
     &__description {
       inline-size: 100%;
       padding-block: 2rem;
@@ -45,7 +45,7 @@
       align-items: center;
       justify-content: center;
     }
-  
+
     &__title-container {
       font-size: 2rem;
       font-weight: bold;
@@ -54,11 +54,17 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-  
+
       &__title {
         color: #fff;
+        font-size: 1.8rem;
+        font-weight: 600;
+        
+        span{
+          font-size: 2.4rem;
+        }
       }
-  
+
       &__button {
         border: none;
         background-color: #ffffff;
@@ -73,17 +79,17 @@
         align-items: center;
         flex-wrap: nowrap;
         gap: 1rem;
-  
-        span{
+
+        span {
           font-size: 2rem;
         }
-  
+
         &:hover {
           transform: scale(1.15);
         }
       }
     }
-  
+
     &__table-container {
       padding: 2rem 3rem 2rem;
     }
diff --git a/src/app/components/manage-users-components/users-table/users-table.component.spec.ts b/src/app/components/manage-users-components/users-table/users-table.component.spec.ts
index 661fd4b..38e0e95 100644
--- a/src/app/components/manage-users-components/users-table/users-table.component.spec.ts
+++ b/src/app/components/manage-users-components/users-table/users-table.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UsersTableComponent } from './users-table.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
-import { UserAddOutline } from '@ant-design/icons-angular/icons';
+import { TeamOutline, UserAddOutline } from '@ant-design/icons-angular/icons';
 import { provideHttpClient } from '@angular/common/http';
 
 describe('UsersTableComponent', () => {
@@ -17,7 +17,7 @@ describe('UsersTableComponent', () => {
         provideHttpClient(),
         {
           provide: NZ_ICONS,
-          useValue: [UserAddOutline]
+          useValue: [UserAddOutline, TeamOutline]
         }
       ]
     })
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss
index d50b94d..ffb2a40 100644
--- a/src/app/components/sidebar/sidebar.component.scss
+++ b/src/app/components/sidebar/sidebar.component.scss
@@ -13,6 +13,7 @@
   user-select: none;
 
   &[ng-reflect-is-collapsed='true'] {
+    inline-size: 0;
     nz-sider {
       min-inline-size: 0 !important;
       max-inline-size: 0 !important;
diff --git a/src/app/page/dashboard/dashboard.component.html b/src/app/page/dashboard/dashboard.component.html
index 8d77829..7f84ba5 100644
--- a/src/app/page/dashboard/dashboard.component.html
+++ b/src/app/page/dashboard/dashboard.component.html
@@ -1,9 +1,14 @@
 <nz-layout class="app-layout">
-  <app-sidebar [isCollapsed]="isCollapsed"></app-sidebar>
-  <nz-content>
-    <app-dashboard-navbar (toggle)="toggleSidebar()"></app-dashboard-navbar>
-    <div class="inner-content">
-      <router-outlet></router-outlet>
-    </div>
-  </nz-content>
-</nz-layout>
+  <app-sidebar
+    (toggleSidebar)="toggleSidebar()"
+    [isCollapsed]="isCollapsed"
+  ></app-sidebar>
+  <nz-layout class="app-layout__content">
+    <nz-content>
+      <app-dashboard-navbar (toggle)="toggleSidebar()"></app-dashboard-navbar>
+      <div class="inner-content">
+        <router-outlet></router-outlet>
+      </div>
+    </nz-content>
+  </nz-layout>
+</nz-layout>
\ No newline at end of file
diff --git a/src/app/page/dashboard/dashboard.component.scss b/src/app/page/dashboard/dashboard.component.scss
index 79a9034..859147f 100644
--- a/src/app/page/dashboard/dashboard.component.scss
+++ b/src/app/page/dashboard/dashboard.component.scss
@@ -6,12 +6,16 @@
 }
 
 .app-layout {
-  min-block-size: 100vh;
-  padding-inline: 5rem;
+  min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-grow: 1;
+  flex-direction: row;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+  }
 }
 
 nz-content {
@@ -23,5 +27,9 @@ nz-content {
 
   .inner-content {
     flex-grow: 1;
-  }
+  } 
 }
+
+.app-layout__content {
+  padding-inline: 5rem;
+}
\ No newline at end of file
diff --git a/src/app/page/dashboard/dashboard.component.ts b/src/app/page/dashboard/dashboard.component.ts
index 490144e..4e55d14 100644
--- a/src/app/page/dashboard/dashboard.component.ts
+++ b/src/app/page/dashboard/dashboard.component.ts
@@ -9,6 +9,7 @@ import { SignInComponent } from "../../components/sign-in/sign-in.component";
 import { AuthComponent } from "../auth/auth.component";
 import { UsersTableComponent } from "../../components/manage-users-components/users-table/users-table.component";
 import { DashboardNavbarComponent } from "../../components/dashboard-navbar/dashboard-navbar.component";
+import { NavbarComponent } from "../../components/landing-components/navbar/navbar.component";
 
 @Component({
   selector: 'app-dashboard',
@@ -24,7 +25,8 @@ import { DashboardNavbarComponent } from "../../components/dashboard-navbar/dash
     SignInComponent,
     AuthComponent,
     UsersTableComponent,
-    DashboardNavbarComponent
+    DashboardNavbarComponent,
+    NavbarComponent
 ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',