Subscription Plans - Copy this Angular, Css Component to your project

<div class="admin-navbar"> <a href="/" class="admin-logo"> <img src="images/ReBIT_Logo.jpg" alt="logo" class="h-16"> <!-- New logo added here --> </a> <div class="admin-menu"> <button class="admin-menu-button" (click)="logout()"> <i class="pi pi-sign-out"></i> <span>Logout</span> </button> </div> </div> /* Admin Navbar Styles */ .admin-navbar { display: flex; align-items: center; justify-content: space-between; background-color: #ffffff; /* White background */ padding: 10px 20px; color: #343a40; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */ position: relative; z-index: 100; /* Ensure it stays on top */ } .admin-logo { display: flex; align-items: center; text-decoration: none; color: #343a40; } .admin-logo img { height: 40px; /* Adjust height for consistency */ margin-right: 10px; } .admin-logo span { font-size: 1.5rem; font-weight: bold; } .admin-menu { display: flex; align-items: center; } .admin-menu-button { background: none; border: none; color: #6c757d; /* Grey color for icons */ font-size: 1rem; margin-left: 20px; cursor: pointer; display: flex; align-items: center; padding: 10px; border-radius: 5px; transition: background-color 0.3s ease; } .admin-menu-button i { margin-right: 5px; font-size: 1.2rem; } .admin-menu-button:hover { background-color: #faf8f8; /* Slightly darker grey on hover */ } /* Optional: Admin User Icon */ .admin-user-icon { background: #e9ecef; /* Light grey background for the user icon */ border: none; color: #343a40; font-size: 1.2rem; margin-left: 20px; cursor: pointer; padding: 10px; border-radius: 50%; transition: background-color 0.3s ease; } .admin-user-icon:hover { background-color: #f8f9fa; /* Slightly darker grey on hover */ } <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> /* Sidebar component specific styles */ body{ margin: 0px; } .admin-sidebar { width: 100%; /* Full width of the assigned 20% area */ background-color: inherit; /* Inherit background color */ color: inherit; /* Inherit text color */ margin: 0; padding: 0; /* Remove padding to fit within the container */ height: 100%; /* Full height */ overflow: hidden; /* Remove scrollbar */ } /* Hide scrollbars */ .admin-sidebar { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .admin-sidebar::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .profile-section { text-align: center; margin-bottom: 20px; } .profile-name { font-size: 1.2rem; font-weight: bold; color: #fff; } .menu-list { list-style: none; padding: 0; margin: 0; text-align: center; /* Center the menu items */ } .menu-item { margin: 20px 0; } .menu-item a { color: #fff; text-decoration: none; display: flex; align-items: center; /* justify-content: center; Center content within each menu item */ padding: 15px; /* Increase padding for larger clickable area */ font-size: 1.2rem; /* Increase font size */ font-weight: bold; /* Make text bold */ border-radius: 5px; transition: background-color 0.3s ease; } .menu-item a:hover { background-color: #495057; /* Darker grey on hover */ } .menu-item i { margin-right: 10px; font-size: 1.4rem; /* Increase icon size */ } make this according to this ui add some functionality make in proper theme