All the links and buttons are configured

src/app/components/pages/dashboard/dashboard-data.ts

@@ -1,4 +1,6 @@
-export const service_links =[
+import { navLink } from "../../../shared/model/nav-link.model"
+
+export const service_links: navLink[] =[
     {
       "name": "Client Association Portal (CA)",
       "url": "https://ca.brilliant.com.bd/"
@@ -61,3 +63,33 @@ export const service_links =[
     },
   ]
   
+  export const monitoring_tools_links: navLink[] = [
+    {
+        "name" : "Nagios",
+        "url" : "http://nagios.brilliant.com.bd/nagios/"
+    },
+    {
+        "name" : "Grafana",
+        "url" : "http://grafana.brilliant.com.bd/login"
+    },
+    {
+        "name" : "FortiAnalyzer",
+        "url" : "https://118.67.209.115/p/login/"
+    }
+  ]
+
+  export const tools_links: navLink[] = [
+    {
+        "name" : "MX ToolBox",
+        "url" : "https://mxtoolbox.com"
+    },
+    {
+        "name" : "Telia Looking Glass",
+        "url" : "https://lg.telia.net"
+    },
+    {
+        "name" : "Shodan Engine",
+        "url" : "https://www.shodan.io"
+    }
+  ]
+

src/app/components/pages/dashboard/dashboard.component.html

@@ -1,21 +1,34 @@
 <div class="container">
     <nav>
         <div class="navbar">
-            <div class="services-dropdown">
-                <button class="dropbtn">Services</button>
-                <div class="dropdown-content">
-                    <ng-container *ngFor="let link of service_link">
-                        <a href={{link.url}} target="_blank">{{ link.name }}</a>
-                    </ng-container>
-                    <!-- <a href="https://ca.brilliant.com.bd/" target="_blank">Client Association Portal (CA)</a>
-                    <a href="http://118.67.215.11/dashboard/auth/login/?next=/dashboard/project/volumes/" target="_blank">OpenStack Dashboard 1</a>
-                    <a href="http://118.67.215.12/dashboard/auth/login/?next=/dashboard/project/volumes/" target="_blank">OpenStack Dashboard 2</a>
-                    <a href="http://118.67.215.13/dashboard/auth/login/?next=/dashboard/project/volumes/" target="_blank">OpenStack Dashboard 3</a>
-                    <a href="http://storage.brilliant.com.bd/" target="_blank">OwnCloud Storage</a>
-                    <a href="https://mail.brilliant.com.bd:9071/zimbraAdmin/" target="_blank">Zimbra Admin</a>
-                    <a href="https://cpanel.brilliant.com.bd:2087" target="_blank">cPanel</a>
-                    <a href="https://master.intercloud.com.bd/index-login.php" target="_blank">MailBorder</a>
-                    <a href="https://118.67.210.46/" target="_blank">MailBorder</a> -->
+            <div class="services">
+                <div class="dropdown">
+                    <button class="dropbtn">Services</button>
+                    <div class="dropdown-content">
+                        <ng-container *ngFor="let link of service_link">
+                            <a href={{link.url}} target="_blank">{{ link.name }}</a>
+                        </ng-container>
+                    </div>
+            </div>
+            </div>
+            <div class="monitoring">
+                <div class="dropdown">
+                    <button class="dropbtn">Monitoring</button>
+                    <div class="dropdown-content">
+                        <ng-container *ngFor="let link of monitoring_links">
+                            <a href={{link.url}} target="_blank">{{ link.name }}</a>
+                        </ng-container>
+                    </div>
+                </div>
+            </div>
+            <div class="tools">
+                <div class="dropdown">
+                    <button class="dropbtn">Tools</button>
+                    <div class="dropdown-content">
+                        <ng-container *ngFor="let link of tools_links">
+                            <a href={{link.url}} target="_blank">{{ link.name }}</a>
+                        </ng-container>
+                    </div>
                 </div>
             </div>
         </div>

src/app/components/pages/dashboard/dashboard.component.scss

@@ -8,6 +8,7 @@
     background-color: $navcolor;
     width: 100%;
     height: 80px;
+    display: flex;
 }
 
 .dropbtn {
@@ -19,7 +20,7 @@
     height: 100%;
 }
 
-.services-dropdown {
+@mixin dropdown {
     position: relative;
     display: inline-block;
     height: 100%;
@@ -44,11 +45,19 @@
 
 }
 
-.dropdown-content a:hover {background-color: rgba($nav-text-color,0.5);}
-.services-dropdown:hover .dropdown-content {
+.dropdown{
+    @include dropdown;
+}
+
+.dropdown-content a:hover {
+    background-color: rgba($nav-text-color,0.5);
+}
+
+.dropdown:hover .dropdown-content,.portal-dropdown:hover .dropdown-content  {
     display: block;
 }
 
-.services-dropdown:hover .dropbtn {
+.dropdown:hover .dropbtn {
     background-color: rgba($nav-text-color,0.1);
 }
+

src/app/components/pages/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { service_links } from './dashboard-data';
+import { monitoring_tools_links, service_links, tools_links } from './dashboard-data';
 import { navLink } from '../../../shared/model/nav-link.model';
 import { CommonModule } from '@angular/common';
 
@@ -12,8 +12,12 @@ import { CommonModule } from '@angular/common';
 })
 export class DashboardComponent implements OnInit {
   service_link!: navLink[];
+  monitoring_links!: navLink[];
+  tools_links!: navLink[];
 
   ngOnInit(): void {
-    this.service_link = service_links
+    this.service_link = service_links;
+    this.monitoring_links = monitoring_tools_links;
+    this.tools_links = tools_links;
   }
 }