diff --git a/src/App-styles.ts b/src/App-styles.ts
index b33bb0a..c2a036f 100644
--- a/src/App-styles.ts
+++ b/src/App-styles.ts
@@ -77,7 +77,7 @@ display: flex;
border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
justify-content: space-between;
align-items: center;
-width: 132px;
+width: 140px;
height: 25px;
padding: 5px 15px 5px 15px;
gap: 5px;
diff --git a/src/App.tsx b/src/App.tsx
index b43d357..3872eaa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = {
message: "",
},
};
-export let isMobile = true
+export let isMobile = false
const isMobileDevice = () => {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx
new file mode 100644
index 0000000..4eafe8b
--- /dev/null
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -0,0 +1,118 @@
+import * as React from "react";
+import {
+ BottomNavigation,
+ BottomNavigationAction,
+ ButtonBase,
+ Typography,
+} from "@mui/material";
+import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
+import { CustomSvg } from "../../common/CustomSvg";
+import { WalletIcon } from "../../assets/Icons/WalletIcon";
+import { HubsIcon } from "../../assets/Icons/HubsIcon";
+import { TradingIcon } from "../../assets/Icons/TradingIcon";
+import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
+import { HomeIcon } from "../../assets/Icons/HomeIcon";
+
+const IconWrapper = ({ children, label, color, selected }) => {
+ return (
+
+ {children}
+
+ {label}
+
+
+ );
+};
+
+export const DesktopFooter = ({
+ selectedGroup,
+ groupSection,
+ isUnread,
+ goToAnnouncements,
+ isUnreadChat,
+ goToChat,
+ goToThreads,
+ setOpenManageMembers,
+ groupChatHasUnread,
+ groupsAnnHasUnread,
+ directChatHasUnread,
+ chatMode,
+ openDrawerGroups,
+ goToHome,
+ setIsOpenDrawerProfile,
+ mobileViewMode,
+ setMobileViewMode,
+ setMobileViewModeKeepOpen,
+ hasUnreadGroups,
+ hasUnreadDirects,
+ isHome,
+ isGroups,
+ isDirects,
+ setDesktopSideView
+}) => {
+ const [value, setValue] = React.useState(0);
+ return (
+
+
+ {
+ goToHome()
+ }}>
+
+
+
+
+ {
+ setDesktopSideView('groups')
+ }}>
+
+
+
+
+ {
+ setDesktopSideView('directs')
+ }}>
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 58312cb..a38eff1 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -85,6 +85,8 @@ import { GroupMenu } from "./GroupMenu";
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";
// let touchStartY = 0;
// let disablePullToRefresh = false;
@@ -418,7 +420,7 @@ export const Group = ({
const [mutedGroups, setMutedGroups] = useState([]);
const [mobileViewMode, setMobileViewMode] = useState("home");
const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState("");
-
+ const [desktopSideView, setDesktopSideView] = useState('groups')
const isFocusedRef = useRef(true);
const selectedGroupRef = useRef(null);
const selectedDirectRef = useRef(null);
@@ -1547,10 +1549,12 @@ export const Group = ({
{isMobile && (
@@ -1752,10 +1756,12 @@ export const Group = ({
{/*
-
+ {isMobile && (
+
+ )}
+
- {!isMobile && renderGroups()}
+ {!isMobile && desktopSideView === 'groups' && renderGroups()}
+ {!isMobile && desktopSideView === 'directs' && renderDirects()}
+
-
-
-
- {
- setMobileViewMode("groups");
- }}
- >
-
-
-
-
- {selectedGroup?.groupName}
-
-
- {/* */}
-
-
-
- {mobileViewMode === "group" && (
+ {isMobile && (
+
+
+
+ {
+ setMobileViewMode("groups");
+ }}
+ >
+
+
+
+
+ {selectedGroup?.groupName}
+
+
+ {/* */}
+
+
+
+ )}
+
+ {isMobile && mobileViewMode === "group" && (
<>
>
)}
-
- {mobileViewMode === "home" && (
+ {!isMobile && (
+
+ )}
+ {isMobile && mobileViewMode === "home" && (
)}
- {/* {
- !selectedGroup &&
+ {
+ !isMobile && !selectedGroup &&
groupSection === "home" && (
-
- )} */}
+ )}
- {mobileViewMode === "home" && !mobileViewModeKeepOpen && (
+
+ {isMobile && mobileViewMode === "home" && !mobileViewModeKeepOpen && (
<>
{
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
@@ -75,7 +75,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
{
@@ -124,7 +124,8 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
{
+ return (
+
+
+
+ 15 ? "16px" : "20px",
+ padding: '10px'
+ }}
+ >
+ Welcome{" "}
+ {userInfo?.name ? (
+ {`, ${userInfo?.name}`}
+ ) : null}
+
+
+ {!isLoadingGroups && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ {/*
+ }
+ onClick={refreshHomeDataFunc}
+ sx={{
+ color: "white",
+ }}
+ >
+ Refresh home data
+
+ */}
+
+
+
+ );
+};
diff --git a/src/components/Group/ListOfThreadPostsWatched.tsx b/src/components/Group/ListOfThreadPostsWatched.tsx
index 3e794b0..4817805 100644
--- a/src/components/Group/ListOfThreadPostsWatched.tsx
+++ b/src/components/Group/ListOfThreadPostsWatched.tsx
@@ -15,6 +15,7 @@ import { Spacer } from "../../common/Spacer";
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import VisibilityIcon from "@mui/icons-material/Visibility";
+import { isMobile } from "../../App";
export const ListOfThreadPostsWatched = () => {
const [posts, setPosts] = React.useState([]);
@@ -92,7 +93,7 @@ export const ListOfThreadPostsWatched = () => {
{
const [checked1, setChecked1] = React.useState(false);
@@ -77,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {