Admin Navigation Sidebar - Copy this Angular, Css Component to your project

<div class="admin sidebar"> <! <div class="profile section"> <h2 class="profile name">Admin</h2> </div> > <ul class="menu list"> <li (click)="onClick1()" class="menu item"><a routerLink="/dashboard"><i class="pi pi home"></i> Dashboard</a></li> <li (click)="onClick()" class="menu item"><a routerLink="/about"><i class="pi pi info circle"></i> Tickets</a></li> </ul> </div> body { margin: 0; padding top: 60px; /* Adjust this value to match the height of the admin navbar */ } .admin sidebar { width: 200px; background color: #343a40; /* Set the background color to match your theme */ color: #fff; margin: 0; padding: 0; height: 100vh; /* Set the height to cover the full viewport */ position: fixed; /* Keep the sidebar fixed on the left side */ top: 0; left: 0; overflow: hidden; transition: width 0.3s ease; /* Smooth transition for width changes */ } .admin sidebar.collapsed { width: 60px; /* Width when the sidebar is collapsed */ } .admin sidebar:: webkit scrollbar { display: none; /* Hide the scrollbar */ } .profile section { text align: center; padding: 20px 0; background color: #495057; /* Set a background color for the profile section */ } .profile name { font size: 1.2rem; font weight: bold; color: #fff; margin: 0; } .menu list { list style: none; padding: 0; margin: 0; text align: center; } .menu item { margin: 10px 0; } .menu item a { color: #fff; text decoration: none; display: flex; align items: center; justify content: center; /* Center the icon and text */ padding: 15px; font size: 1rem; /* Adjust the font size */ border radius: 5px; transition: background color 0.3s ease; /* Smooth background color transition */ } .menu item a:hover { background color: #495057; /* Set the hover background color */ } .menu item i { margin right: 10px; font size: 1.4rem; } .admin sidebar.collapsed .menu item i { margin right: 0; } .admin sidebar.collapsed .menu item a { justify content: center; } .admin sidebar.collapsed .menu item a span { display: none; /* Hide the text when the sidebar is collapsed */ } this is side bar update it accordingly