.sidebar { width: 16rem; height: 100%; display: flex; flex-direction: column; } .header { padding: 1.25rem; border-bottom: 1px solid #a57d52; } .header h1 { font-size: 1.25rem; font-weight: bold; /*color: #a57d52;*/ } .subtitle { font-size: 0.875rem; /*color: #a57d52;*/ } .section-title { padding: 0.5rem 1rem; font-size: 0.75rem; /*color: #a57d52;*/ text-transform: uppercase; letter-spacing: 0.05em; } .nav-item { display: flex; align-items: center; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 0.5rem; margin: 0 0.5rem; } .nav-item:hover { border: 1px solid #a57d52; background-color: transparent; } .nav-item.active { background-color: rgba(165, 125, 82, 0.1); } .nav-menu { flex: 1 1 auto; /* Changed from flex-grow: 1 */ padding: 1rem 0; } .icon { height: 1.25rem; width: 1.25rem; margin-right: 0.75rem; stroke: currentColor; } .user-profile { margin-top: auto; /* Added this line */ padding: 1rem; border-top: 1px solid #a57d52; display: flex; align-items: center; } .avatar { width: 2.5rem; height: 2.5rem; background-color: #a57d52; color: #ead9cb; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: bold; } .user-info { margin-left: 0.75rem; } .username { font-size: 0.875rem; font-weight: 500; /*color: #a57d52;*/ } .company { font-size: 0.75rem; /*color: #a57d52;*/ } .logout { margin-left: auto; color: #a57d52; padding: 0.5rem; border-radius: 0.5rem; } .link-no-style { text-decoration: none; color: inherit; border: none; } .link-no-style:hover { border: 1px solid #a57d52; } .logout:hover { border: 1px solid #a57d52; } a.nav-item, a.nav-item:visited, a.nav-item:hover, a.nav-item:active { color: inherit; /* or specify your desired color */ text-decoration: none; }