feat(code-review): file explorer adaptivity

Author: DenysSkobalo

.lintstagedrc

@@ -1,13 +1,11 @@
 {
-    "**/*.html": ["npx prettier **/*.html --write", "git add"],
+    "**/*.html": ["npx prettier **/*.html --write"],
     "**/*.scss": [
         "npx prettier **/*.scss --write",
-        "stylelint --fix",
-        "git add"
+        "stylelint --fix"
     ],
     "**/*.ts": [
         "npx prettier **/*.ts --write",
-        "eslint **/*.ts --fix",
-        "git add"
+        "eslint **/*.ts --fix"
     ]
 }

apps/code-review/src/app/pages/overview/components/header/header.component.html

@@ -1,4 +1,4 @@
-<button mat-icon-button class="btn-menu">
+<button mat-icon-button class="btn-menu" (click)="toggleFileExplorer.emit()">
     <mat-icon class="btn-menu-icon">menu</mat-icon>
 </button>
 

apps/code-review/src/app/pages/overview/components/header/header.component.scss

@@ -30,7 +30,7 @@
     .block-request {
         width: 300px;
         height: 53px;
-        z-index: 1;
+        z-index: 10;
 
         .panel-request {
             background-color: #212121;

apps/code-review/src/app/pages/overview/components/header/header.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Output,
+    EventEmitter
+} from '@angular/core';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MatDialog } from '@angular/material/dialog';
 import { ReviewRequestDetailsWindowComponent } from './review-request-details-window';
@@ -12,6 +17,8 @@ import { ReviewRequestDetailsWindowComponent } from './review-request-details-wi
 export class HeaderComponent {
     public readonly isMobile = this.deviceService.isMobile();
 
+    @Output() public toggleFileExplorer = new EventEmitter<boolean>();
+
     constructor(
         private readonly deviceService: DeviceDetectorService,
         private readonly dialog: MatDialog

apps/code-review/src/app/pages/overview/overview.component.html

@@ -1,11 +1,38 @@
-<acua-header class="header"></acua-header>
+<acua-header
+    class="header"
+    (toggleFileExplorer)="toggleFileExplorer()"
+></acua-header>
 
-<div class="container">
-    <acua-file-explorer
-        [tree]="tree"
-        class="file-explorer"
-        (fileSelected)="onFileSelected($event)"
-    ></acua-file-explorer>
+<mat-drawer-container class="container">
+    <mat-drawer
+        mode="side"
+        class="mat-drawer-desktop"
+        *ngIf="!isMobile"
+        [opened]="isFileExplorerOpenDesktop"
+    >
+        <acua-file-explorer
+            [tree]="tree"
+            class="file-explorer"
+            (fileSelected)="onFileSelected($event)"
+        ></acua-file-explorer>
+    </mat-drawer>
+    <mat-drawer-content>
+        <acua-code-editor class="code-editor"></acua-code-editor>
+    </mat-drawer-content>
 
-    <acua-code-editor class="code-editor"></acua-code-editor>
-</div>
+    <mat-drawer
+        mode="over"
+        class="mat-drawer-mobile"
+        *ngIf="isMobile"
+        [opened]="isFileExplorerOpenMobile"
+    >
+        <acua-file-explorer
+            [tree]="tree"
+            class="file-explorer"
+            (fileSelected)="onFileSelected($event)"
+        ></acua-file-explorer>
+    </mat-drawer>
+    <mat-drawer-content>
+        <acua-code-editor class="code-editor"></acua-code-editor>
+    </mat-drawer-content>
+</mat-drawer-container>

apps/code-review/src/app/pages/overview/overview.component.scss

@@ -11,7 +11,20 @@
 }
 
 .container {
-    display: flex;
     flex: 1;
     overflow: hidden;
+
+    mat-drawer {
+        background-color: #202327;
+        border: 0;
+    }
+
+    .mat-drawer-desktop {
+        min-width: 15%;
+        resize: horizontal;
+    }
+
+    .mat-drawer-mobile {
+        width: 75%;
+    }
 }

apps/code-review/src/app/pages/overview/overview.component.ts

@@ -8,6 +8,7 @@ import { MonacoTreeFileNode } from '@code-review/shared';
 import { CodeEditorComponent } from './components';
 import { SOURCE_CODE_PROVIDER } from './providers';
 import { SOURCE_CODE } from './tokens';
+import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
     selector: 'acua-overview',
@@ -18,11 +19,21 @@ import { SOURCE_CODE } from './tokens';
 })
 export class OverviewComponent {
     public tree = inject(SOURCE_CODE);
+    public readonly isMobile = this.deviceService.isMobile();
+    public isFileExplorerOpenMobile = false;
+    public isFileExplorerOpenDesktop = true;
 
     @ViewChild(CodeEditorComponent)
     private readonly codeEditor!: CodeEditorComponent;
 
+    constructor(private readonly deviceService: DeviceDetectorService) {}
+
     public onFileSelected(node: MonacoTreeFileNode): void {
         this.codeEditor.openFile(node.fullPath, node.content);
     }
+
+    public toggleFileExplorer(): void {
+        this.isFileExplorerOpenMobile = !this.isFileExplorerOpenMobile;
+        this.isFileExplorerOpenDesktop = !this.isFileExplorerOpenDesktop;
+    }
 }

apps/code-review/src/app/pages/overview/overview.module.ts

@@ -6,6 +6,7 @@ import {
     FileExplorerModule,
     HeaderModule
 } from './components';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { OverviewComponent } from './overview.component';
 import { OVERVIEW_ROUTES } from './overview.routes';
 import {
@@ -22,6 +23,7 @@ import { ReviewRequestCommentsState } from './states';
         FileExplorerModule,
         HeaderModule,
         CodeEditorModule,
+        MatSidenavModule,
         RouterModule.forChild(OVERVIEW_ROUTES)
     ],
     providers: [