/* CSS */ /* Centering the body */ .centered-body { display: flex; justify-content: center; align-items: center; margin-top: 1rem; } /* Dropdown button */ .dropdown-btn { display: inline-flex; height: 3rem; cursor: pointer; align-items: center; justify-content: center; border-radius: 0.5rem; padding: 0 1rem; font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease-out; background-color: #131415; color: white; border: none; outline: none; } .dropdown-btn:hover { background-color: #1c1c1c; } /* Dropdown icon */ .dropdown-icon { margin-left: 0.5rem; fill: white; } /* Dropdown content */ .dropdown-content { position: absolute; z-index: 10; display: none; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; width: 20rem; background-color: white; } /* Show dropdown on hover */ .dropdown:hover .dropdown-content { display: block; } /* Profile info */ .profile-info { display: flex; align-items: center; padding: 1rem; } .profile-img { width: 4rem; height: 4rem; border-radius: 50%; margin-right: 1rem; } .profile-details { display: flex; flex-direction: column; } .profile-name { font-size: 1rem; color: gray; } .profile-email { font-size: 1rem; color: #6b7280; } .gray-divider { height: 1px; background-color: #e5e7eb; margin: 0.2rem 0; /* Adjust spacing as needed */ } /* Navigation */ .nav-grid { display: grid; gap: 0.25rem; padding: 0.5rem 0; } .nav-item { display: flex; align-items: center; padding: 0.75rem 1rem; font-size: 1.125rem; color: #6b7280; text-decoration: none; border-radius: 0.375rem; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .nav-item:hover { background-color: #8e66c0; color: white; } .nav-icon { width: 1.75rem; height: 1.75rem; margin-right: 0.75rem; } /* Logout button */ .logout-btn { display: flex; align-items: center; padding: 0.75rem 1rem; font-size: 1.125rem; color: #6b7280; background-color: transparent; border: none; cursor: pointer; border-radius: 0.375rem; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .logout-btn:hover { background-color: #8e66c0; color: white; } .logout-icon { width: 1.75rem; height: 1.75rem; margin-right: 0.75rem; }

Components

Diagonal Hover

Gradient to Bottom-Right

Horizontal Hover

Subtle Gradient to Bottom