Edit and actions updates

apps/bridge-frontend/app/_components/Sidebar.tsx

@@ -24,9 +24,9 @@ import {
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
-import { fonts } from "@/app/_styles/theme";
+import { typography, fonts } from "@/app/_styles/theme";
 import LinkLogo from "@/public/link-logo-small.png";
-// import { useSession, signOut } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
 
 const openWidth = 270;
 const closedWidth = 70;
@@ -99,7 +99,7 @@ const MenuItem = ({
               position: "absolute",
               top: "-27px",
               left: "3px",
-              border: "solid 1px #fff",
+              border: "1px solid #fff",
               borderColor: "transparent transparent transparent #fff",
               borderRadius: "60px",
               rotate: "-35deg",
@@ -157,8 +157,9 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const pathname = usePathname();
   const { poppins } = fonts;
-  // const { data: session } = useSession();
-  //  const username = session?.user?.name || "User";
+  const { bodyLarge } = typography;
+  const { data: session } = useSession();
+  const user = session?.user;
 
   //  const logout = () => {
   //    signOut({ callbackUrl: "/login" });
@@ -352,6 +353,39 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
             />
           </List>
         </Grid>
+        <Grid
+          item
+          container
+          direction="row"
+          alignItems="center"
+          spacing={1}
+          sx={{
+            borderTop: "1px solid #ffffff33",
+            pt: 0.5,
+          }}
+        >
+          {user?.image && (
+            <Grid item>
+              <Box sx={{ width: 20, height: 20 }}>
+                <img
+                  src={user?.image ?? ""}
+                  alt="Profile image"
+                  style={{ width: "100%" }}
+                />
+              </Box>
+            </Grid>
+          )}
+          <Grid item>
+            <Box
+              sx={{
+                ...bodyLarge,
+                color: "white",
+              }}
+            >
+              {user?.name}
+            </Box>
+          </Grid>
+        </Grid>
       </Grid>
     </Drawer>
   );