Skip to content

Commit 7e549b4

Browse files
jansigijansigi
authored
fix: make messages button look the same as others and rename to chats (#59)
1 parent 1342b26 commit 7e549b4

1 file changed

Lines changed: 52 additions & 29 deletions

File tree

‎src/frontend/src/layout/navbar-component.vue‎

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const handleLogout = async () => {
9999
class="btn btn-outline-secondary btn-sm d-flex align-items-center"
100100
>
101101
<i class="fas fa-comments"></i>
102-
<span class="d-none d-xl-inline ms-1">Messages</span>
102+
<span class="d-none d-xl-inline ms-1">Chats</span>
103103
</RouterLink>
104104
<span class="unreadMessages" :class="['badge', 'bg-primary', 'text-white', 'px-2', 'py-1', { 'd-none': !props.totalUnreadMessages }]">
105105
{{ props.totalUnreadMessages }}
@@ -186,62 +186,60 @@ const handleLogout = async () => {
186186
</div>
187187
<button
188188
@click="goToPosts(); closeMobileMenu()"
189-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
189+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item"
190190
>
191-
<i class="fas fa-newspaper fs-5"></i>
192-
<span>Posts</span>
191+
<i class="fas fa-newspaper fs-5 mobile-menu-icon"></i>
192+
<span class="mobile-menu-text">Posts</span>
193193
</button>
194-
<div class="messages">
195-
<RouterLink
196-
to="/chats"
197-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
198-
@click="closeMobileMenu"
199-
>
200-
<i class="fas fa-comments fs-5"></i>
201-
<span>Messages</span>
202-
</RouterLink>
194+
<RouterLink
195+
to="/chats"
196+
class="list-group-item list-group-item-action d-flex align-items-center messages-mobile mobile-menu-item"
197+
@click="closeMobileMenu"
198+
>
199+
<i class="fas fa-comments fs-5 mobile-menu-icon"></i>
200+
<span class="mobile-menu-text">Chats</span>
203201
<span class="unreadMessages" :class="['badge', 'bg-primary', 'text-white', 'px-2', 'py-1', { 'd-none': !props.totalUnreadMessages }]">
204202
{{ props.totalUnreadMessages }}
205203
</span>
206-
</div>
204+
</RouterLink>
207205
<button
208206
@click="viewUser(); closeMobileMenu()"
209-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
207+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item"
210208
>
211-
<i class="fas fa-user fs-5"></i>
212-
<span>Profile</span>
209+
<i class="fas fa-user fs-5 mobile-menu-icon"></i>
210+
<span class="mobile-menu-text">Profile</span>
213211
</button>
214212
<button
215213
@click="handleLogout"
216-
class="list-group-item list-group-item-action d-flex align-items-center gap-3 text-danger"
214+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item text-danger"
217215
>
218-
<i class="fas fa-sign-out-alt fs-5"></i>
219-
<span>Logout</span>
216+
<i class="fas fa-sign-out-alt fs-5 mobile-menu-icon"></i>
217+
<span class="mobile-menu-text">Logout</span>
220218
</button>
221219
</template>
222220
<template v-else>
223221
<button
224222
@click="goToPosts(); closeMobileMenu()"
225-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
223+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item"
226224
>
227-
<i class="fas fa-newspaper fs-5"></i>
228-
<span>Posts</span>
225+
<i class="fas fa-newspaper fs-5 mobile-menu-icon"></i>
226+
<span class="mobile-menu-text">Posts</span>
229227
</button>
230228
<RouterLink
231229
to="/login"
232-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
230+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item"
233231
@click="closeMobileMenu"
234232
>
235-
<i class="fas fa-sign-in-alt fs-5"></i>
236-
<span>Login</span>
233+
<i class="fas fa-sign-in-alt fs-5 mobile-menu-icon"></i>
234+
<span class="mobile-menu-text">Login</span>
237235
</RouterLink>
238236
<RouterLink
239237
to="/register"
240-
class="list-group-item list-group-item-action d-flex align-items-center gap-3"
238+
class="list-group-item list-group-item-action d-flex align-items-center mobile-menu-item"
241239
@click="closeMobileMenu"
242240
>
243-
<i class="fas fa-user-plus fs-5"></i>
244-
<span>Register</span>
241+
<i class="fas fa-user-plus fs-5 mobile-menu-icon"></i>
242+
<span class="mobile-menu-text">Register</span>
245243
</RouterLink>
246244
</template>
247245
</div>
@@ -266,4 +264,29 @@ const handleLogout = async () => {
266264
text-decoration: none;
267265
}
268266
}
267+
268+
.messages-mobile {
269+
position: relative;
270+
.unreadMessages {
271+
position: absolute;
272+
top: -10px;
273+
right: -10px;
274+
border-radius: 50px;
275+
text-decoration: none;
276+
}
277+
}
278+
279+
.mobile-menu-item {
280+
gap: 1rem;
281+
282+
.mobile-menu-icon {
283+
width: 1.25rem;
284+
text-align: center;
285+
flex-shrink: 0;
286+
}
287+
288+
.mobile-menu-text {
289+
flex-grow: 1;
290+
}
291+
}
269292
</style>

0 commit comments

Comments
 (0)