jobdescription menu html bar

src/app/components/dashboard/dashboard-routing.module.ts

@@ -13,6 +13,7 @@ import { ProjectsComponent } from './projects/projects.component';
 import { StocksComponent } from './stocks/stocks.component';
 import { CourseComponent } from './course/course.component';
 import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
+import { JobDescriptionComponent } from '../job-description/job-description.component';
 const routes: Routes = [
   {
     path: "",
@@ -32,6 +33,7 @@ const routes: Routes = [
 
       // myComponent
       { path: "company-registration", component: CompanyRegistrationComponent },
+      { path: "job-description", component: JobDescriptionComponent },
     ]
   }
 ];

src/app/components/dashboard/dashboard.module.ts

@@ -29,6 +29,7 @@ import { SubDepartmentThreeComponent} from '../company-registration/branch-busin
 import { SubDepartmentTwoComponent } from '../company-registration/branch-business-unit/sub-department-two/sub-department-two.component';
 import { SubDepartmentFourComponent } from '../company-registration/branch-business-unit/sub-department-four/sub-department-four.component';
 import { SectionRegistrationComponent } from '../company-registration/branch-business-unit/section-registration/section-registration.component';
+import { JobDescriptionComponent } from '../job-description/job-description.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -53,7 +54,8 @@ import { SectionRegistrationComponent } from '../company-registration/branch-bus
     SubDepartmentOneComponent,
     SubDepartmentTwoComponent,
     SubDepartmentThreeComponent,
-    SubDepartmentFourComponent
+    SubDepartmentFourComponent,
+    JobDescriptionComponent,
   ],
   imports: [
     CommonModule,

src/app/components/job-description/job-description.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="head-title">
+        ข้อมูลลักษณะงาน
+    </div>
+    <div class="body-content">
+        <ul class="nav-tabs">
+            <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'กลุ่มพนักงาน'},
+            {id:'tab2',text:'ตำเเหน่ง'},
+            {id:'tab3',text:'ลักษณะงาน'},
+            {id:'tab4',text:'ประเภทพนักงาน'},
+            {id:'tab5',text:'ระดับพนักงาน (PL)'}]" (click)="changeTab(item)">
+                <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div *ngIf="activeTab === 'tab1'" class="tab-pane">
+                <p>ทะเบียนบริษัท</p>
+            </div>
+            <div *ngIf="activeTab === 'tab2'" class="tab-pane">
+                <div class="mt-5"></div>
+                <app-branch-business-unit [pathTitle]="pathTitle"
+                    (sendPathTitle)="pathTitle=$event"></app-branch-business-unit>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-description/job-description.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    width: 100%;
+    cursor: pointer;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #569bf5; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}

src/app/components/job-description/job-description.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-description',
+  templateUrl: './job-description.component.html',
+  styleUrls: ['./job-description.component.scss']
+})
+export class JobDescriptionComponent {
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
+  activeTab: string = 'tab1';
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
+    this.activeTab = tab.id
+  }
+}