From d9a9ecafbba4a90c3fbf1f9b86bec0056735ac9b Mon Sep 17 00:00:00 2001
From: "Navy.gif" <navydotgif@gmail.com>
Date: Sat, 26 Nov 2022 16:00:30 +0200
Subject: [PATCH] redirect to login page on logout

---
 src/components/Sidebar.js      | 4 +++-
 src/components/UserControls.js | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 1520322..8788385 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -29,7 +29,9 @@ const SidebarMenu = ({menuItems = [], children}) => {
             return <NavLink className='sidebar-menu-item sidebar-menu-child-item' activeClassName='active' to={to} key={label}>{label}</NavLink>;
         });
         elements.push(<div key={label} className='parent-menu'>
-            <NavLink className={`sidebar-menu-item ${subElements?.length ? 'has-children' : ''}`} activeClassName='active' {...rest} key={label}>{label}{subElements && <i className="sidebar-menu-item-carrot" onClick={expandMenu}></i>}</NavLink>
+            <NavLink className={`sidebar-menu-item ${subElements?.length ? 'has-children' : ''}`} activeClassName='active' {...rest} key={label}>
+                {label}{subElements && <i className="sidebar-menu-item-carrot" onClick={expandMenu}></i>}
+            </NavLink>
             {subElements && <div className='sidebar-menu-child-wrapper'>
                 {subElements}
             </div>}
diff --git a/src/components/UserControls.js b/src/components/UserControls.js
index 422b109..156c94b 100644
--- a/src/components/UserControls.js
+++ b/src/components/UserControls.js
@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import { useNavigate } from "react-router";
 import '../css/components/UserControls.css';
 import { useLoginContext } from "../structures/UserContext";
 import ClickDetector from "../util/ClickDetector";
@@ -8,6 +9,7 @@ const UserControls = () => {
 
     const [user, updateUser] = useLoginContext();
     const detailsRef = useRef();
+    const navigate = useNavigate();
 
     if (!user) return;
 
@@ -16,6 +18,7 @@ const UserControls = () => {
         if (response.status === 200) {
             clearSession();
             updateUser();
+            navigate('/login');
         }
     };
 
@@ -25,7 +28,7 @@ const UserControls = () => {
         <details ref={detailsRef} className='dropdown user-controls'>
             <summary className="is-vertical-align">
                 Hello {user.displayName || user.username}
-                <img className="profile-picture" src="https://cdn.discordapp.com/avatars/187613017733726210/ee764860975d78bfd52652c6ddaed47b.webp?size=64"></img>
+                <img className="profile-picture" src={`/api/users/${user.id}/avatar`}></img>
             </summary>
         
             <div className="card">