added sidebar

2025-07-23 04:36:52 +00:00 · 2024-11-11 04:51:31 +02:00
parent 978dd7d995
commit 79543644a0
13 changed files with 716 additions and 261 deletions
--- a/src/components/AddressQRCode.tsx
+++ b/src/components/AddressQRCode.tsx
@@ -1,36 +1,72 @@
-
-import React from 'react';
-import QRCode from 'react-qr-code';
-import { TextP } from '../App-styles';
-import { Box } from '@mui/material';
+import React, { useState } from "react";
+import QRCode from "react-qr-code";
+import { TextP } from "../App-styles";
+import { Box, Typography } from "@mui/material";

 export const AddressQRCode = ({ targetAddress }) => {
+  const [open, setOpen] = useState(false);
  return (
-    <Box sx={{
-      display: 'flex',
-      gap: '10px',
-      width: '100%',
-      alignItems: 'center',
-      flexDirection: 'column',
-      marginTop: '20px'
-    }}>
-      <TextP
-                sx={{
-                  textAlign: "center",
-                  lineHeight: 1.2,
-                  fontSize: "16px",
-                  fontWeight: 500,
-                }}
-              >
-                Your address
-              </TextP>
-      <QRCode 
-        value={targetAddress}  // Your address here
-        size={180}          // Adjust size as needed
-        level="M"           // Error correction level (L, M, Q, H)
-        bgColor="#FFFFFF"   // Background color (white)
-        fgColor="#000000"   // Foreground color (black)
-      />
+    <Box
+      sx={{
+        display: "flex",
+        gap: "10px",
+        alignItems: "center",
+        flexDirection: "column",
+        marginTop: '10px'
+      }}
+    >
+      <Typography
+        sx={{
+          cursor: "pointer",
+          fontSize: "14px",
+        }}
+        onClick={() => {
+          setOpen((prev)=> !prev);
+        }}
+      >
+        {open ? 'Hide QR code' :'See QR code'}
+      </Typography>
+
+      {open && (
+        <Box
+          sx={{
+            display: "flex",
+            gap: "10px",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+              width: "100%",
+              alignItems: "center",
+              flexDirection: "column",
+              marginTop: "20px",
+            }}
+          >
+            <TextP
+              sx={{
+                textAlign: "center",
+                lineHeight: 1.2,
+                fontSize: "16px",
+                fontWeight: 500,
+              }}
+            >
+              Your address
+            </TextP>
+            <QRCode
+              value={targetAddress} // Your address here
+              size={150} // Adjust size as needed
+              level="M" // Error correction level (L, M, Q, H)
+              bgColor="#FFFFFF" // Background color (white)
+              fgColor="#000000" // Foreground color (black)
+            />
+          </Box>
+        </Box>
+      )}
    </Box>
  );
 };
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -21,10 +21,15 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
 import { CoreSyncStatus } from "../CoreSyncStatus";
+import { IconWrapper } from "../Desktop/DesktopFooter";
+import AppIcon from "../../assets/svgs/AppIcon.svg";
+import { useRecoilState } from "recoil";
+import { enabledDevModeAtom } from "../../atoms/global";
+import { AppsIcon } from "../../assets/Icons/AppsIcon";

 const uid = new ShortUniqueId({ length: 8 });

-export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
+export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => {
  const [availableQapps, setAvailableQapps] = useState([]);
  const [selectedAppInfo, setSelectedAppInfo] = useState(null);
  const [selectedCategory, setSelectedCategory] = useState(null)
@@ -33,6 +38,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
  const [isNewTabWindow, setIsNewTabWindow] = useState(false);
  const [categories, setCategories] = useState([])
  const iframeRefs = useRef({});
+  const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
  const myApp = useMemo(()=> {
   
   return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
@@ -317,11 +323,46 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
            
            <HomeIcon
              height={34}
-              color="rgba(250, 250, 250, 0.5)"
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
            />
        
        </ButtonBase>
        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('apps')
+          }}
+        >
+          <IconWrapper
+            color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            disableWidth
+          >
+          <AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
+            <MessagingIcon
+              height={30}
+              color={
+                (hasUnreadDirects || hasUnreadGroups)
+                  ? "var(--unread)"
+                  : desktopViewMode === 'chat'
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+    </IconWrapper>
+        </ButtonBase>
+        {/* <ButtonBase
          onClick={() => {
            setDesktopSideView("directs");
            toggleSideViewDirects()
@@ -357,10 +398,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
              }
            />
     
-        </ButtonBase>
+        </ButtonBase> */}
        <Save isDesktop disableWidth />
-        <CoreSyncStatus imageSize="30px" position="left" />
-
+        {isEnabledDevMode && (
+           <ButtonBase
+           onClick={() => {
+             setDesktopViewMode('dev')
+           }}
+         >
+           <IconWrapper
+             color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+             label="Dev"
+             disableWidth
+           >
+            <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+           </IconWrapper>
+         </ButtonBase>
+        )}
        {mode !== 'home' && (
                 <AppsNavBarDesktop  />

--- a/src/components/Apps/AppsDevMode.tsx
+++ b/src/components/Apps/AppsDevMode.tsx
@@ -22,10 +22,12 @@ import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
 import { AppsDevModeNavBar } from "./AppsDevModeNavBar";
 import { CoreSyncStatus } from "../CoreSyncStatus";
+import { AppsIcon } from "../../assets/Icons/AppsIcon";
+import { IconWrapper } from "../Desktop/DesktopFooter";

 const uid = new ShortUniqueId({ length: 8 });

-export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
+export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => {
  const [availableQapps, setAvailableQapps] = useState([]);
  const [selectedAppInfo, setSelectedAppInfo] = useState(null);
  const [selectedCategory, setSelectedCategory] = useState(null)
@@ -208,49 +210,59 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
            
            <HomeIcon
              height={34}
-              color="rgba(250, 250, 250, 0.5)"
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
            />
        
        </ButtonBase>
        <ButtonBase
          onClick={() => {
-            setDesktopSideView("directs");
-            toggleSideViewDirects()
+            setDesktopViewMode('apps')
          }}
        >
-        
+          <IconWrapper
+            color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            disableWidth
+          >
+          <AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
            <MessagingIcon
              height={30}
              color={
                hasUnreadDirects
                  ? "var(--unread)"
-                  : isDirects
+                  : desktopViewMode === 'chat'
                  ? "white"
                  : "rgba(250, 250, 250, 0.5)"
              }
            />
-
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopSideView("groups");
-            toggleSideViewGroups()
-          }}
-        >
-            <HubsIcon
-              height={30}
-              color={
-                hasUnreadGroups
-                  ? "var(--unread)"
-                  : isGroups
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
-            />
-     
+    </IconWrapper>
        </ButtonBase>
        <Save isDesktop disableWidth />
-        <CoreSyncStatus imageSize="30px" position="left" />
+        <ButtonBase
+           onClick={() => {
+             setDesktopViewMode('dev')
+           }}
+         >
+           <IconWrapper
+             color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+             label="Dev"
+             disableWidth
+           >
+            <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+           </IconWrapper>
+         </ButtonBase>
        {mode !== 'home' && (
                 <AppsDevModeNavBar  />

--- a/src/components/Desktop/DesktopFooter.tsx
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -20,7 +20,7 @@ import { Save } from "../Save/Save";
 import { useRecoilState } from "recoil";
 import { enabledDevModeAtom } from "../../atoms/global";

-export const IconWrapper = ({ children, label, color, selected, disableWidth }) => {
+export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => {
  return (
    <Box
      sx={{
@@ -29,8 +29,8 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth })
        alignItems: "center",
        gap:  "5px",
        flexDirection: "column",
-        height: disableWidth ? 'auto' :  "89px",
-        width: disableWidth ? 'auto' : "89px",
+        height: customWidth ? customWidth : disableWidth ? 'auto' :  "89px",
+        width: customWidth? customWidth : disableWidth ? 'auto' : "89px",
        borderRadius: "50%",
        backgroundColor: selected ? "rgba(28, 29, 32, 1)" : "transparent",
      }}
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -19,7 +19,7 @@ import { ChatIcon } from "../../assets/Icons/ChatIcon";
 import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
 import { MembersIcon } from "../../assets/Icons/MembersIcon";

-const IconWrapper = ({ children, label, color, selected, selectColor }) => {
+const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => {
  return (
    <Box
      sx={{
@@ -28,8 +28,8 @@ const IconWrapper = ({ children, label, color, selected, selectColor }) => {
        alignItems: "center",
        gap: "5px",
        flexDirection: "column",
-        height: "65px",
-        width: "65px",
+        height: customHeight ? customHeight : "65px",
+        width: customHeight ? customHeight :  "65px",
        borderRadius: "50%",
        backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
      }}
@@ -111,7 +111,7 @@ export const DesktopHeader = ({
          alignItems: "center",
        }}
      >
-        <ButtonBase
+        {/* <ButtonBase
          onClick={() => {
            goToHome();
          }}
@@ -170,15 +170,15 @@ export const DesktopHeader = ({
              }
            />
          </IconWrapper>
-        </ButtonBase>
-        <Box
+        </ButtonBase> */}
+        {/* <Box
          sx={{
            width: "1px",
            height: "50px",
            background: "white",
            borderRadius: "50px",
          }}
-        />
+        /> */}
        <ButtonBase
          onClick={() => {
            goToAnnouncements()
@@ -189,6 +189,7 @@ export const DesktopHeader = ({
            label="ANN"
            selected={isAnnouncement}
            selectColor="#09b6e8"
+            customHeight="55px"
          >
            <NotificationIcon2
              height={25}
@@ -214,6 +215,7 @@ export const DesktopHeader = ({
            label="Chat"
            selected={isChat}
            selectColor="#09b6e8"
+            customHeight="55px"
          >
            <ChatIcon
              height={25}
@@ -240,6 +242,7 @@ export const DesktopHeader = ({
            label="Threads"
            selected={isForum}
            selectColor="#09b6e8"
+            customHeight="55px"
          >
            <ThreadsIcon
              height={25}
@@ -262,6 +265,7 @@ export const DesktopHeader = ({
            color="rgba(250, 250, 250, 0.5)"
            label="Members"
            selected={false}
+            customHeight="55px"
          >
            <MembersIcon
              height={25}
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -0,0 +1,120 @@
+import { Box, ButtonBase } from '@mui/material';
+import React from 'react'
+import { HomeIcon } from "../assets/Icons/HomeIcon";
+import { MessagingIcon } from "../assets/Icons/MessagingIcon";
+import { Save } from "./Save/Save";
+import { HubsIcon } from "../assets/Icons/HubsIcon";
+import { CoreSyncStatus } from "./CoreSyncStatus";
+import { IconWrapper } from './Desktop/DesktopFooter';
+import AppIcon from "./../assets/svgs/AppIcon.svg";
+import { useRecoilState } from 'recoil';
+import { enabledDevModeAtom } from '../atoms/global';
+import { AppsIcon } from '../assets/Icons/AppsIcon';
+
+export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => {
+    const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
+
+  return (
+    <Box sx={{
+        width: '60px',
+        flexDirection: 'column',
+        height: '100vh',
+        alignItems: 'center',
+        display: 'flex',
+        gap: '25px'
+       }}>
+        <ButtonBase
+          sx={{
+            width: '60px',
+            height: '60px',
+            paddingTop: '23px'
+          }}
+          onClick={() => {
+            goToHome();
+
+          }}
+        >
+            
+            <HomeIcon
+              height={34}
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
+
+            />
+        
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('apps')
+            // setIsOpenSideViewDirects(false)
+            // setIsOpenSideViewGroups(false)
+          }}
+        >
+          <IconWrapper
+            color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            selected={isApps}
+            disableWidth
+          >
+            <AppsIcon color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
+            <MessagingIcon
+              height={30}
+              color={
+                (hasUnreadDirects || hasUnreadGroups)
+                  ? "var(--unread)"
+                  : desktopViewMode === 'chat'
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+    </IconWrapper>
+        </ButtonBase>
+        {/* <ButtonBase
+          onClick={() => {
+            setDesktopSideView("groups");
+            toggleSideViewGroups()
+          }}
+        >
+            <HubsIcon
+              height={30}
+              color={
+                hasUnreadGroups
+                  ? "var(--unread)"
+                  : isGroups
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+     
+        </ButtonBase> */}
+        <Save isDesktop disableWidth />
+        {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
+        {isEnabledDevMode && (
+          <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('dev')
+          }}
+        >
+          <IconWrapper
+            color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+            label="Dev"
+            disableWidth
+          >
+           <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+          </IconWrapper>
+        </ButtonBase>
+        )}
+       </Box>
+  )
+}
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -86,12 +86,15 @@ import { getRootHeight } from "../../utils/mobile/mobileUtils";
 import { ReturnIcon } from "../../assets/Icons/ReturnIcon";
 import { ExitIcon } from "../../assets/Icons/ExitIcon";
 import { HomeDesktop } from "./HomeDesktop";
-import { DesktopFooter } from "../Desktop/DesktopFooter";
+import { DesktopFooter, IconWrapper } from "../Desktop/DesktopFooter";
 import { DesktopHeader } from "../Desktop/DesktopHeader";
 import { Apps } from "../Apps/Apps";
 import { AppsNavBar } from "../Apps/AppsNavBar";
 import { AppsDesktop } from "../Apps/AppsDesktop";
 import { AppsDevMode } from "../Apps/AppsDevMode";
+import { DesktopSideBar } from "../DesktopSideBar";
+import { HubsIcon } from "../../assets/Icons/HubsIcon";
+import { MessagingIcon } from "../../assets/Icons/MessagingIcon";

 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -1282,6 +1285,9 @@ export const Group = ({
    setupGroupWebsocketInterval.current = null;
    settimeoutForRefetchSecretKey.current = null;
    initiatedGetMembers.current = false;
+    if(!isMobile){
+      setDesktopViewMode('home')
+    }
  };

  const logoutEventFunc = () => {
@@ -1368,6 +1374,9 @@ export const Group = ({
      setTriedToFetchSecretKey(false);
      setFirstSecretKeyInCreation(false);
      setGroupSection("chat");
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }

      window.sendMessage("addTimestampEnterChat", {
        timestamp: Date.now(),
@@ -1381,10 +1390,9 @@ export const Group = ({
        setSelectedGroup(findGroup);
        setMobileViewMode("group");
        setDesktopSideView('groups')
-        setDesktopViewMode('home')
        getTimestampEnterChat();
        isLoadingOpenSectionFromNotification.current = false;
-      }, 200);
+      }, 350);
    } else {
      isLoadingOpenSectionFromNotification.current = false;
    }
@@ -1419,6 +1427,9 @@ export const Group = ({
      setTriedToFetchSecretKey(false);
      setFirstSecretKeyInCreation(false);
      setGroupSection("announcement");
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }
      window.sendMessage("addGroupNotificationTimestamp", {
        timestamp: Date.now(),
        groupId: findGroup.groupId,
@@ -1430,9 +1441,8 @@ export const Group = ({
        setSelectedGroup(findGroup);
        setMobileViewMode("group");
        setDesktopSideView('groups')
-        setDesktopViewMode('home')
        getGroupAnnouncements();
-      }, 200);
+      }, 350);
    }
  };

@@ -1481,14 +1491,15 @@ export const Group = ({
      setFirstSecretKeyInCreation(false);
      setGroupSection("forum");
      setDefaultThread(data);
-
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }
      setTimeout(() => {
        setSelectedGroup(findGroup);
        setMobileViewMode("group");
        setDesktopSideView('groups')
-        setDesktopViewMode('home')
        getGroupAnnouncements();
-      }, 200);
+      }, 350);
    }
  };

@@ -1512,31 +1523,31 @@ export const Group = ({
    }
    setDesktopViewMode('home')

-    setGroupSection("default");
-    clearAllQueues();
+    // setGroupSection("default");
+    // clearAllQueues();
    await new Promise((res) => {
      setTimeout(() => {
        res(null);
      }, 200);
    });
-    setGroupSection("home");
-    setSelectedGroup(null);
-    setNewChat(false);
-    setSelectedDirect(null);
-    setSecretKey(null);
-    setGroupOwner(null)
-    lastFetchedSecretKey.current = null;
-    initiatedGetMembers.current = false;
-    setSecretKeyPublishDate(null);
-    setAdmins([]);
-    setSecretKeyDetails(null);
-    setAdminsWithNames([]);
-    setMembers([]);
-    setMemberCountFromSecretKeyData(null);
-    setTriedToFetchSecretKey(false);
-    setFirstSecretKeyInCreation(false);
-    setIsOpenSideViewDirects(false)
-    setIsOpenSideViewGroups(false)
+    // setGroupSection("home");
+    // setSelectedGroup(null);
+    // setNewChat(false);
+    // setSelectedDirect(null);
+    // setSecretKey(null);
+    // setGroupOwner(null)
+    // lastFetchedSecretKey.current = null;
+    // initiatedGetMembers.current = false;
+    // setSecretKeyPublishDate(null);
+    // setAdmins([]);
+    // setSecretKeyDetails(null);
+    // setAdminsWithNames([]);
+    // setMembers([]);
+    // setMemberCountFromSecretKeyData(null);
+    // setTriedToFetchSecretKey(false);
+    // setFirstSecretKeyInCreation(false);
+    // setIsOpenSideViewDirects(false)
+    // setIsOpenSideViewGroups(false)
  };

  const goToAnnouncements = async () => {
@@ -1612,6 +1623,67 @@ export const Group = ({
          borderRadius: !isMobile && '0px 15px 15px 0px'
        }}
      >
+        {!isMobile && (
+            <Box sx={{
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+              gap: '10px'
+            }}>
+               <ButtonBase
+              onClick={() => {
+                setDesktopSideView("groups");
+              }}
+            >
+              <IconWrapper
+                color={(groupChatHasUnread ||
+                  groupsAnnHasUnread)
+                         ? "var(--unread)"
+                         : desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+                label="Groups"
+                selected={desktopSideView === 'groups'}
+                customWidth="75px"
+              >
+                <HubsIcon
+                  height={24}
+                  color={
+                    (groupChatHasUnread ||
+               groupsAnnHasUnread)
+                      ? "var(--unread)"
+                      : desktopSideView === 'groups'
+                      ? "white"
+                      : "rgba(250, 250, 250, 0.5)"
+                  }
+                />
+              </IconWrapper>
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                setDesktopSideView("directs");
+              }}
+            >
+              <IconWrapper
+              customWidth="75px"
+                color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+                label="Messaging"
+                selected={desktopSideView === 'directs'}
+              >
+                <MessagingIcon
+                  height={24}
+                  color={
+                    directChatHasUnread
+                      ? "var(--unread)"
+                      : desktopSideView === 'directs'
+                      ? "white"
+                      : "rgba(250, 250, 250, 0.5)"
+                  }
+                />
+              </IconWrapper>
+              </ButtonBase>
+            </Box>
+        )}
+       
        {isMobile && (
           <Box
           sx={{
@@ -1819,7 +1891,67 @@ export const Group = ({
          borderRadius: !isMobile && '0px 15px 15px 0px'
        }}
      >
-        
+        {!isMobile && (
+           <Box sx={{
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            gap: '10px'
+          }}>
+             <ButtonBase
+            onClick={() => {
+              setDesktopSideView("groups");
+            }}
+          >
+            <IconWrapper
+              color={(groupChatHasUnread ||
+                groupsAnnHasUnread)
+                       ? "var(--unread)"
+                       :  desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+              label="Groups"
+              selected={desktopSideView === 'groups'}
+              customWidth="75px"
+            >
+              <HubsIcon
+                height={24}
+                color={
+                  (groupChatHasUnread ||
+             groupsAnnHasUnread)
+                    ? "var(--unread)"
+                    : desktopSideView === 'groups' 
+                    ? "white"
+                    : "rgba(250, 250, 250, 0.5)"
+                }
+              />
+            </IconWrapper>
+          </ButtonBase>
+          <ButtonBase
+            onClick={() => {
+              setDesktopSideView("directs");
+            }}
+          >
+            <IconWrapper
+            customWidth="75px"
+              color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+              label="Messaging"
+              selected={desktopSideView === 'directs' }
+            >
+              <MessagingIcon
+                height={24}
+                color={
+                  directChatHasUnread
+                    ? "var(--unread)"
+                    : desktopSideView === 'directs' 
+                    ? "white"
+                    : "rgba(250, 250, 250, 0.5)"
+                }
+              />
+            </IconWrapper>
+            </ButtonBase>
+          </Box>
+        )}
+       
        <div
          style={{
            display: "flex",
@@ -1850,7 +1982,6 @@ export const Group = ({
                onClick={() => {
                  setMobileViewMode("group");
                  setDesktopSideView('groups')
-                  setDesktopViewMode('home')
                  initiatedGetMembers.current = false;
                  clearAllQueues();
                  setSelectedDirect(null);
@@ -2067,8 +2198,14 @@ export const Group = ({
          alignItems: "flex-start",
        }}
      >
-        {!isMobile && ((desktopSideView === 'groups' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && renderGroups()}
-        {!isMobile && ((desktopSideView === 'directs'  && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewDirects) && renderDirects()}
+        {!isMobile && ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && (
+             <DesktopSideBar desktopViewMode={desktopViewMode} toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} isApps={desktopViewMode === 'apps'} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
+             isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
+               groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} />
+        )}
+
+        {!isMobile && desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()}
+        {!isMobile && desktopViewMode === 'chat'  && desktopSideView === 'directs' && renderDirects()}

        <Box
          sx={{
@@ -2174,9 +2311,37 @@ export const Group = ({
              </Box>
            </>
          )}
-          {selectedGroup && mobileViewMode !== 'groups' && (
-            <>
-            {!isMobile && selectedGroup && (
+          {desktopViewMode === 'chat' && !selectedGroup && (
+            <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: 'center',
+              height: '100%',
+           
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "14px",
+                fontWeight: 400,
+                color: 'rgba(255, 255, 255, 0.2)'
+              }}
+            >
+              No group selected
+            </Typography>
+          </Box>
+          )}
+          {mobileViewMode !== 'groups' && (
+            <div style={{
+              width: '100%',
+              display: selectedGroup? 'block' : 'none',
+              opacity: !(desktopViewMode === 'chat' && selectedGroup) ? 0 : 1,
+      position: !(desktopViewMode === 'chat' && selectedGroup) ? 'absolute' : 'relative',
+    left: !(desktopViewMode === 'chat' && selectedGroup) ? '-100000px' : '0px',
+            }}>
+            {!isMobile &&  (
        
        <DesktopHeader
        selectedGroup={selectedGroup}
@@ -2457,7 +2622,7 @@ export const Group = ({
                  isOwner={groupOwner?.owner === myAddress}
                />
              )}
-            </>
+            </div>
          )}

          {selectedDirect && !newChat && (
@@ -2501,7 +2666,7 @@ export const Group = ({
              </Box>
            </>
          )}
-           {!isMobile && groupSection === "home" && (
+           {/* {!isMobile && groupSection === "home" && (
        <DesktopFooter 
        selectedGroup={selectedGroup}
        groupSection={groupSection}
@@ -2536,7 +2701,7 @@ export const Group = ({
        setIsOpenSideViewDirects={setIsOpenSideViewDirects}
        setIsOpenSideViewGroups={setIsOpenSideViewGroups}
        />
-      )}
+      )} */}
          {isMobile && mobileViewMode === "home" && (
            <Home
              refreshHomeDataFunc={refreshHomeDataFunc}
@@ -2551,6 +2716,7 @@ export const Group = ({
              setOpenManageMembers={setOpenManageMembers}
              setOpenAddGroup={setOpenAddGroup}
              setMobileViewMode={setMobileViewMode}
+              setDesktopViewMode={setDesktopViewMode}
            />
          )}
          {isMobile  && (
@@ -2559,17 +2725,16 @@ export const Group = ({
            {!isMobile  && (
            <AppsDesktop toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "apps"} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
            isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
-              groupsAnnHasUnread} />
+              groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} isApps={desktopViewMode === 'apps'} desktopViewMode={desktopViewMode} />
          )}
            {!isMobile  && (
            <AppsDevMode toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsModeDev} setMode={setAppsModeDev} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "dev"} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
            isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
-              groupsAnnHasUnread} />
+              groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} desktopViewMode={desktopViewMode} isApps={desktopViewMode === 'apps'} />
          )}
      
     
-      {!isMobile && !selectedGroup &&
-          groupSection === "home"  && desktopViewMode !== "apps" && desktopViewMode !== "dev" && (
+      {!isMobile && desktopViewMode === 'home'  && (
        <HomeDesktop
  refreshHomeDataFunc={refreshHomeDataFunc}
  myAddress={myAddress}
@@ -2583,18 +2748,20 @@ export const Group = ({
  setOpenManageMembers={setOpenManageMembers}
  setOpenAddGroup={setOpenAddGroup}
  setMobileViewMode={setMobileViewMode}
+  setDesktopViewMode={setDesktopViewMode}
 />
      )}

    
        </Box>
+       
        <AuthenticatedContainerInnerRight
          sx={{
            marginLeft: "auto",
            width: "31px",
            // minWidth: "135px",
            padding: "5px",
-            display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev') ? "none" : "flex",
+            display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev' || desktopViewMode === 'chat') ? "none" : "flex",
          }}
        >
     
--- a/src/components/Group/GroupJoinRequests.tsx
+++ b/src/components/Group/GroupJoinRequests.tsx
@@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
 import { MyContext, getBaseApiReact, isMobile } from "../../App";
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)

-export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
+export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => {
  const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
  const [loading, setLoading] = React.useState(true)
  const {txList, setTxList} = React.useContext(MyContext)
@@ -179,6 +179,9 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
            getTimestampEnterChat()
            setGroupSection("announcement")
            setOpenManageMembers(true)
+            if(!isMobile){
+              setDesktopViewMode('chat')
+            }
            setTimeout(() => {
              executeEvent("openGroupJoinRequest", {});

--- a/src/components/Group/Home.tsx
+++ b/src/components/Group/Home.tsx
@@ -20,6 +20,7 @@ export const Home = ({
  setOpenManageMembers,
  setOpenAddGroup,
  setMobileViewMode,
+  setDesktopViewMode
 }) => {
  return (
    <Box
@@ -95,6 +96,7 @@ export const Home = ({
            myAddress={myAddress}
            groups={groups}
            setMobileViewMode={setMobileViewMode}
+            setDesktopViewMode={setDesktopViewMode}
          />
          <GroupInvites
            setOpenAddGroup={setOpenAddGroup}
--- a/src/components/Group/HomeDesktop.tsx
+++ b/src/components/Group/HomeDesktop.tsx
@@ -20,6 +20,7 @@ export const HomeDesktop = ({
  setOpenManageMembers,
  setOpenAddGroup,
  setMobileViewMode,
+  setDesktopViewMode
 }) => {
  return (
    <Box
@@ -66,7 +67,7 @@ export const HomeDesktop = ({
            display: "flex",
            gap: "15px",
            flexWrap: "wrap",
-            justifyContent: "flex-start",
+            justifyContent: "center",
          }}
        >
          <Box sx={{
@@ -104,6 +105,7 @@ export const HomeDesktop = ({
            myAddress={myAddress}
            groups={groups}
            setMobileViewMode={setMobileViewMode}
+            setDesktopViewMode={setDesktopViewMode}
          />
          </Box>
          <Box sx={{