refactor(notification): update notification position

src/Ui.tsx

@@ -158,10 +158,11 @@ const init = (serverUrl) => {
     return (
       <AppWrapper>
         <GlobalStyle />
-        <Notifications />
 
         <SocketProvider socket={socket}>
           <Router>
+            <Notifications />
+
             {store.isMinimized && <Redirect to="/minimized" />}
             <Switch>
               <Route exact path="/minimized">

src/components/Notifications.tsx

@@ -1,13 +1,21 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { NotificationParams } from '../shared/interfaces';
 import Notification from './Notification';
 // store
 import { observer } from 'mobx-react';
 import { useStore } from '../store';
+import { autorun, reaction } from 'mobx';
 
 const Notifications: FunctionComponent = () => {
   const store = useStore();
+  const location = useLocation();
+  const [isRoot, setIsRoot] = useState(true);
+
+  useEffect(() => {
+    setIsRoot(location.pathname === '/');
+  }, [location]);
 
   const deleteNotification = (id: string) =>
     store.notifications.splice(
@@ -18,7 +26,7 @@ const Notifications: FunctionComponent = () => {
   if (store.notifications.length === 0) return null;
 
   return (
-    <NotificationsContainer>
+    <NotificationsContainer isRoot={isRoot}>
       {store.notifications.map((data: NotificationParams, key) => (
         <Notification
           key={key}
@@ -34,7 +42,7 @@ const NotificationsContainer = styled.div`
   display: flex;
   flex-direction: column-reverse;
   position: absolute;
-  bottom: 39px;
+  bottom: ${(props) => (props.isRoot ? 39 : 0)}px;
   z-index: 11;
   padding: 10px;
   width: 100%;