Skip to content

refactor: relocate logout to navbar with confirmation dialog & fix profile appreciations row #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trtajim merged 4 commits into from
Aug 27, 2026
+145 −119
Merged

refactor: relocate logout to navbar with confirmation dialog & fix profile appreciations row #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f506e9
style(profile): ensure appreciations pills stay in single horizontal …
trtajim Aug 27, 2026
8a5f64b
feat(auth): move logout button from profile page to navbar user previ…
trtajim Aug 27, 2026
8336de3
feat(mobile): add quick logout button to mobile drawer user card
trtajim Aug 27, 2026
c019dd8
feat(auth): add sign out confirmation dialog to navbar for desktop & …
trtajim Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 137 additions & 42 deletions resources/js/components/NavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Sun,
Monitor,
User,
LogOut,
Menu,
X,
BookOpen,
Expand Down Expand Up @@ -64,6 +65,13 @@ const isHomeOrSsc = computed(

const showAuthModal = ref(false);
const authModalMessage = ref('অনুগ্রহ করে সার্চ ফিচার ব্যবহার করতে লগইন করুন।');
const showLogoutModal = ref(false);

const openLogoutModal = () => {
dropdownOpen.value = false;
mobileMenuOpen.value = false;
showLogoutModal.value = true;
};

const searchActive = ref(false);
const searchInputRef = ref<HTMLInputElement | null>(null);
Expand Down Expand Up @@ -372,20 +380,32 @@ onBeforeUnmount(() => {
v-if="dropdownOpen"
class="absolute right-0 mt-2 w-56 origin-top-right rounded-2xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
>
<!-- User Identity Card -->
<!-- User Identity Card with Logout on Right -->
<div
class="border-b border-slate-100 p-2.5 dark:border-gray-800"
class="flex items-center justify-between gap-2 border-b border-slate-100 p-2.5 dark:border-gray-800"
>
<p
class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
>
{{ user.name }}
</p>
<p
class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
<div class="min-w-0 flex-1">
<p
class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
>
{{ user.name }}
</p>
<p
class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
>
{{ user.email }}
</p>
</div>

<button
type="button"
@click="openLogoutModal"
class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
title="Sign out"
aria-label="Sign out"
>
{{ user.email }}
</p>
<LogOut class="h-3.5 w-3.5" />
</button>
</div>

<div class="py-1">
Expand Down Expand Up @@ -519,40 +539,55 @@ onBeforeUnmount(() => {
<div class="flex-1 space-y-6 overflow-y-auto px-4 py-4">
<!-- User Card or Guest Login CTA -->
<div v-if="user">
<Link
:href="
user.username
? `/u/${user.username}`
: '/profile'
"
@click="closeMobileMenu"
class="flex items-center gap-3 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:border-slate-300 hover:bg-slate-100 dark:border-gray-800 dark:bg-gray-900/60 dark:hover:border-gray-700 dark:hover:bg-gray-900"
<div
class="flex items-center justify-between gap-2 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900/60 dark:hover:border-gray-700"
>
<img
v-if="user.image_url"
:src="user.image_url"
:alt="user.name"
class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
/>
<div
v-else
class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
<Link
:href="
user.username
? `/u/${user.username}`
: '/profile'
"
@click="closeMobileMenu"
class="flex min-w-0 flex-1 items-center gap-3"
>
{{ user.name.charAt(0).toUpperCase() }}
</div>
<div class="min-w-0 flex-1">
<p
class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
>
{{ user.name }}
</p>
<p
class="truncate text-[11px] text-slate-400 dark:text-gray-500"
<img
v-if="user.image_url"
:src="user.image_url"
:alt="user.name"
class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
/>
<div
v-else
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
>
{{ user.email }}
</p>
</div>
</Link>
{{ user.name.charAt(0).toUpperCase() }}
</div>
<div class="min-w-0 flex-1">
<p
class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
>
{{ user.name }}
</p>
<p
class="truncate text-[11px] text-slate-400 dark:text-gray-500"
>
{{ user.email }}
</p>
</div>
</Link>

<!-- Quick Logout Button on Mobile -->
<button
type="button"
@click="openLogoutModal"
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-xl text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
title="Sign out"
aria-label="Sign out"
>
<LogOut class="h-4 w-4" />
</button>
</div>
</div>

<div v-else>
Expand Down Expand Up @@ -755,5 +790,65 @@ onBeforeUnmount(() => {
</Transition>
</div>
</Teleport>

<!-- Sign Out Confirmation Modal -->
<Teleport to="body">
<div
v-if="showLogoutModal"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
<div
@click="showLogoutModal = false"
class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity dark:bg-black/60"
></div>

<div
class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 text-center shadow-2xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900"
>
<button
@click="showLogoutModal = false"
class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
>
<X class="h-4 w-4" />
</button>

<div
class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
>
<LogOut class="h-6 w-6" />
</div>

<h3
class="mt-3.5 text-base font-bold text-slate-900 dark:text-gray-100"
>
Sign out of your account?
</h3>
<p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
Are you sure you want to log out of HSCStack? You will need
to sign in again to access your account features.
</p>

<div class="mt-5 flex gap-2.5">
<button
type="button"
@click="showLogoutModal = false"
class="flex-1 cursor-pointer rounded-xl border border-slate-200 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Cancel
</button>
<Link
href="/logout"
method="post"
as="button"
@click="showLogoutModal = false"
class="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-rose-600 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-rose-700 active:scale-95 dark:bg-rose-600 dark:hover:bg-rose-500"
>
<LogOut class="h-3.5 w-3.5" />
<span>Sign Out</span>
</Link>
</div>
</div>
</div>
</Teleport>
</nav>
</template>
2 changes: 2 additions & 0 deletions resources/js/pages/Blog/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,12 @@ const hasUserCommented = computed(() => {
if (!currentUser.value?.id) {
return false;
}

const currentId = Number(currentUser.value.id);

return props.comments.some((c: any) => {
const commentUserId = Number(c.user_id ?? c.user?.id);

return commentUserId === currentId;
});
});
Expand Down
Loading
Loading