Feat(web)/extra path to the open notifications and onboarding miniguide

web/src/layout/Header/DesktopHeader.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
-import { useToggle } from "react-use";
+import { useLocation, useToggle } from "react-use";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 
@@ -90,6 +90,19 @@ const DesktopHeader = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [initialTab, setInitialTab] = useState<number>(0);
+  const location = useLocation();
+
+  const initializeNotifications = () => {
+    const hasNotificationsPath: boolean = location.hash.includes("#notifications");
+    toggleIsSettingsOpen(hasNotificationsPath);
+    setInitialTab(hasNotificationsPath ? 1 : 0);
+  };
+
+  useEffect(() => {
+    initializeNotifications();
+  }, [location.hash]);
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -124,7 +137,7 @@ const DesktopHeader = () => {
           <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
     </>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -73,8 +73,8 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [currentTab, setCurrentTab] = useState<number>(0);
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
+  const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsSettingsOpen());
 

web/src/layout/Header/navbar/index.tsx

@@ -82,6 +82,7 @@ const PopupContainer = styled.div`
 
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
+  initialTab?: number;
 }
 
 export interface IHelp {

web/src/pages/Home/index.tsx

@@ -1,13 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
+import { useLocation, useToggle } from "react-use";
+
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
+import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Community from "./Community";
 import CourtOverview from "./CourtOverview";
@@ -22,8 +25,16 @@ const Container = styled.div`
 `;
 
 const Home: React.FC = () => {
+  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    toggleIsOnboardingMiniGuidesOpen(location.hash.includes("#onboarding"));
+  }, [location.hash]);
+
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
       <HeroImage />
       <Container>
         <CourtOverview />