chore: add logout button to mobile

src/components/burgerMenu/BurgerMenu.tsx

@@ -4,6 +4,8 @@ import { burgerColor } from '../../styles/Themes';
 import { NodeInfo } from '../../layouts/navigation/nodeInfo/NodeInfo';
 import { SideSettings } from '../../layouts/navigation/sideSettings/SideSettings';
 import { Navigation } from '../../layouts/navigation/Navigation';
+import { LogoutWrapper } from '../logoutButton';
+import { ColorButton } from '../buttons/colorButton/ColorButton';
 
 type StyledProps = {
   open: boolean;
@@ -31,6 +33,11 @@ export const BurgerMenu = ({ open, setOpen }: BurgerProps) => {
       <NodeInfo isBurger={true} />
       <SideSettings isBurger={true} />
       <Navigation isBurger={true} setOpen={setOpen} />
+      <LogoutWrapper>
+        <ColorButton fullWidth={true} withMargin={'16px 0'}>
+          Logout
+        </ColorButton>
+      </LogoutWrapper>
     </StyledBurger>
   );
 };

src/components/logoutButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import { LogOut } from 'react-feather';
 import { useRouter } from 'next/router';
 import { useLogoutMutation } from 'src/graphql/mutations/__generated__/logout.generated';
@@ -22,6 +22,44 @@ const Logout = styled.button`
   padding: 0;
 `;
 
+const LogoutWrapperStyled = styled(Logout)`
+  width: 100%;
+`;
+
+export const LogoutWrapper: FC = ({ children }) => {
+  const { push } = useRouter();
+  const client = useApolloClient();
+
+  const dispatchChat = useChatDispatch();
+
+  const [logout, { data, loading }] = useLogoutMutation({
+    refetchQueries: ['GetServerAccounts'],
+  });
+
+  useEffect(() => {
+    if (data && data.logout) {
+      dispatchChat({ type: 'disconnected' });
+      client.clearStore();
+
+      logoutUrl ? (window.location.href = logoutUrl) : push('/login');
+    }
+  }, [data, dispatchChat, push, client]);
+
+  if (loading) {
+    return (
+      <LogoutWrapperStyled>
+        <ScaleLoader height={14} width={1} color={themeColors.blue3} />
+      </LogoutWrapperStyled>
+    );
+  }
+
+  return (
+    <LogoutWrapperStyled onClick={() => logout()}>
+      {children}
+    </LogoutWrapperStyled>
+  );
+};
+
 export const LogoutButton = () => {
   const { push } = useRouter();
   const client = useApolloClient();

src/layouts/header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Cpu,
   Menu,
@@ -49,6 +49,11 @@ export const Header = () => {
 
   const showHomeButton = (): boolean => !isRoot && pathname !== HOME;
 
+  useEffect(() => {
+    if (!isRoot || !open) return;
+    setOpen(false);
+  }, [isRoot]);
+
   const renderNavButton = (link: string, NavIcon: Icon) => (
     <Link to={link} noStyling={true}>
       <HeaderNavButton selected={pathname === link}>