started on desktop

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 (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "5px",
+        flexDirection: "column",
+        height: '89px',
+        width: '89px',
+        borderRadius: '50%',
+        backgroundColor: selected ? 'rgba(28, 29, 32, 1)' : 'transparent'
+      }}
+    >
+      {children}
+      <Typography
+        sx={{
+          fontFamily: "Inter",
+          fontSize: "12px",
+          fontWeight: 500,
+          color: color,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+};
+
+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 (
+    <Box
+      sx={{
+        width: "100%",
+        position: "absolute",
+        bottom: 0,
+        display: "flex",
+        alignItems: "center",
+        height: "100px", // Footer height
+        zIndex: 1,
+        justifyContent: 'center'
+      }}
+    >
+     <Box sx={{
+      display: 'flex',
+      gap: '20px'
+     }}>
+     <ButtonBase onClick={()=> {
+              goToHome()
+            }}>
+        <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Home" selected={isHome}>
+              <HomeIcon height={30} color={isHome ? "white" : "rgba(250, 250, 250, 0.5)"} />
+            </IconWrapper>
+            </ButtonBase>
+            <ButtonBase onClick={()=> {
+              setDesktopSideView('groups')
+            }}>
+      <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs" selected={isGroups}>
+              <HubsIcon height={30} color={hasUnreadGroups ? "var(--unread)" : isGroups ? 'white' : "rgba(250, 250, 250, 0.5)"} />
+            </IconWrapper>
+            </ButtonBase>
+            <ButtonBase onClick={()=> {
+              setDesktopSideView('directs')
+            }}>
+
+            <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Messaging" selected={isDirects}>
+              <MessagingIcon height={30} color={hasUnreadDirects ? "var(--unread)" : isDirects ? 'white' : "rgba(250, 250, 250, 0.5)"} />
+            </IconWrapper>
+            </ButtonBase>
+
+     </Box>
+    </Box>
+  );
+};