#19: add model details management component

src/app/shared/components/model-management/model-management.component.html

+<mat-sidenav-container>
+  <mat-sidenav mode="side" opened>
+    <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
+      <a mat-tab-link routerLink="modelDescription" routerLinkActive="is-active"
+        ><mat-icon fontIcon="description"></mat-icon
+        ><span class="tab-box">Description</span></a
+      >
+      <a mat-tab-link routerLink="licenseProfile" routerLinkActive="is-active">
+        <span class="tab_license"></span
+        ><span class="tab-box"> License profile</span></a
+      >
+      <a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
+        ><mat-icon fontIcon="sync_alt"></mat-icon
+        ><span class="tab-box">Signature</span></a
+      >
+      <a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
+        ><mat-icon fontIcon="content_copy"></mat-icon
+        ><span class="tab-box">Documents</span></a
+      >
+      <a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
+        ><mat-icon fontIcon="history"></mat-icon
+        ><span class="tab-box">Model artifacts</span></a
+      >
+      <a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
+        <span class="tab-icon"> </span>
+        <span class="tab-box" style="font-size: 14.5px">
+          <span>Author</span>
+          <span>/</span>
+          <span>Publisher details</span>
+        </span>
+      </a>
+    </nav>
+    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+  </mat-sidenav>
+  <mat-sidenav-content> </mat-sidenav-content
+></mat-sidenav-container>

src/app/shared/components/model-management/model-management.component.scss

+.content {
+  padding: 24px;
+}
+
+mat-sidenav-container {
+  height: calc(100% - 64px);
+  overflow: hidden !important;
+}
+
+mat-sidenav {
+  background: #f1f1f1;
+  width: 250px !important;
+  overflow: hidden !important;
+}
+.mat-drawer-container {
+  position: absolute;
+}
+
+::ng-deep .mat-drawer-inner-container {
+  overflow: hidden !important;
+  padding: 20px 0 20px 0;
+}

src/app/shared/components/model-management/model-management.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelManagementComponent } from './model-management.component';
+
+describe('ModelManagementComponent', () => {
+  let component: ModelManagementComponent;
+  let fixture: ComponentFixture<ModelManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModelManagementComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ModelManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/model-management/model-management.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'gp-model-management',
+  standalone: true,
+  imports: [CommonModule, MatSidenavModule, MatTabsModule, MatIconModule],
+  templateUrl: './model-management.component.html',
+  styleUrl: './model-management.component.scss',
+})
+export class ModelManagementComponent {}