From dbe99df82ced449e7df23e6ae101d17380e4db05 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 10 Apr 2023 16:34:15 +0100
Subject: [PATCH] Handle logout

---
 src/components/Authenticator/authenticator.ts  |  2 +-
 src/components/Navigation/navigation.ts        |  4 +++-
 src/components/TopicOverlay/TopicOverlay.astro | 16 ++++++++--------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts
index c118265a3..183e3dc9f 100644
--- a/src/components/Authenticator/authenticator.ts
+++ b/src/components/Authenticator/authenticator.ts
@@ -45,7 +45,7 @@ function handleAuthenticated() {
   showHideAuthElements('show');
 }
 
-function handleAuthRequired() {
+export function handleAuthRequired() {
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   if (token) {
     handleAuthenticated();
diff --git a/src/components/Navigation/navigation.ts b/src/components/Navigation/navigation.ts
index 516596016..ceab0a675 100644
--- a/src/components/Navigation/navigation.ts
+++ b/src/components/Navigation/navigation.ts
@@ -1,9 +1,11 @@
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import { handleAuthRequired } from '../Authenticator/authenticator';
 
 function logout() {
   Cookies.remove(TOKEN_COOKIE_NAME);
-  window.location.href = '/';
+  handleAuthRequired();
+  window.location.reload();
 }
 
 function bindEvents() {
diff --git a/src/components/TopicOverlay/TopicOverlay.astro b/src/components/TopicOverlay/TopicOverlay.astro
index a1f570c69..0ee43e7a9 100644
--- a/src/components/TopicOverlay/TopicOverlay.astro
+++ b/src/components/TopicOverlay/TopicOverlay.astro
@@ -38,15 +38,15 @@ const { contentContributionLink } = Astro.props;
           <Icon icon='check' />
           <span class='ml-2'>Mark as Done</span>
         </button>
-      </div>
 
-      <button
-        id='mark-topic-pending'
-        class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700'
-      >
-        <Icon icon='reset' />
-        <span class='ml-2'>Mark as Pending</span>
-      </button>
+        <button
+          id='mark-topic-pending'
+          class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700'
+        >
+          <Icon icon='reset' />
+          <span class='ml-2'>Mark as Pending</span>
+        </button>
+      </div>
 
       <button
         type='button'