Make entire user item menu clickable not just text

This commit is contained in:
TEC
2025-09-28 16:00:45 +08:00
parent 220c9c89c5
commit 336c1700bf
6 changed files with 27 additions and 15 deletions
+4 -3
View File
@@ -299,11 +299,12 @@
</a>
</div>
<div class="user-menu-item">
<i class="fas fa-info-circle"></i>
<a href="about.html" style="text-decoration: none; color: inherit;" data-i18n="nav.about">About</a>
<a href="about.html" style="text-decoration: none; color: inherit;">
<i class="fas fa-info-circle"></i> <span data-i18n="nav.about">About</span>
</a>
</div>
<div class="user-menu-item" id="logoutMenuItem">
<i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span>
<span><i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span></span>
</div>
</div>
</div>
+5 -1
View File
@@ -146,13 +146,17 @@ header .container {
}
.user-menu-item {
padding: 8px 15px !important;
cursor: pointer !important;
transition: background-color 0.3s !important;
display: flex !important;
align-items: center !important;
}
.user-menu-item > :first-child {
padding: 8px 15px !important;
width: 100% !important;
}
.user-menu-item:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
+4 -3
View File
@@ -139,11 +139,12 @@
</a>
</div>
<div class="user-menu-item">
<i class="fas fa-info-circle"></i>
<a href="about.html" style="text-decoration: none; color: inherit;" data-i18n="nav.about">About</a>
<a href="about.html" style="text-decoration: none; color: inherit;">
<i class="fas fa-info-circle"></i> <span data-i18n="nav.about">About</span>
</a>
</div>
<div class="user-menu-item" id="logoutMenuItem">
<i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span>
<span><i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span></span>
</div>
</div>
</div>
+6 -2
View File
@@ -197,7 +197,6 @@
}
header .user-menu-item {
padding: 8px 15px !important;
cursor: pointer !important;
transition: background-color 0.3s !important;
display: flex !important;
@@ -205,6 +204,11 @@
color: var(--text-color) !important;
}
header .user-menu-item > :first-child {
padding: 8px 15px !important;
width: 100% !important;
}
header .user-menu-item:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
@@ -1151,4 +1155,4 @@
font-size: 0.75rem !important;
padding: 2px 5px !important;
}
}
}
+4 -3
View File
@@ -131,11 +131,12 @@
</a>
</div>
<div class="user-menu-item">
<i class="fas fa-info-circle"></i>
<a href="about.html" style="text-decoration: none; color: inherit;" data-i18n="nav.about">About</a>
<a href="about.html" style="text-decoration: none; color: inherit;">
<i class="fas fa-info-circle"></i> <span data-i18n="nav.about">About</span>
</a>
</div>
<div class="user-menu-item" id="logoutMenuItem">
<i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span>
<span><i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span></span>
</div>
</div>
</div>
+4 -3
View File
@@ -344,11 +344,12 @@
</a>
</div>
<div class="user-menu-item">
<i class="fas fa-info-circle"></i>
<a href="about.html" style="text-decoration: none; color: inherit;" data-i18n="nav.about">About</a>
<a href="about.html" style="text-decoration: none; color: inherit;">
<i class="fas fa-info-circle"></i> <span data-i18n="nav.about">About</span>
</a>
</div>
<div class="user-menu-item" id="logoutMenuItem">
<i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span>
<span><i class="fas fa-sign-out-alt"></i> <span data-i18n="auth.logout">Logout</span></span>
</div>
</div>
</div>