Added Team mamagement with backend integration

src/Components/Layout/Sidebar/Sidebar.tsx

@@ -23,7 +23,7 @@ import { Link, useLocation } from "react-router";
 import { useState, type ForwardRefExoticComponent } from "react";
 import { routes } from "Routes/Routes";
 import keycloak from "Api/Keycloak/Keycloak";
-import { AuthenticationStore } from "Stores/AuthenticationStore";
+import { useAuthenticationStore } from "Stores/AuthenticationStore";
 import CustomButton from "Components/CustomButton/CustomButton";
 
 interface SubtleLinkButtonProps {
@@ -49,7 +49,7 @@ function SubtleLinkButton(props: SubtleLinkButtonProps) {
 }
 
 function Sidebar() {
-  const { profile } = AuthenticationStore();
+  const { profile, profile_picture_path } = useAuthenticationStore();
   const [open, set_open] = useState(false);
   const theme = useMantineTheme();
   const location = useLocation(); // get current URL
@@ -120,7 +120,7 @@ function Sidebar() {
         {keycloak.authenticated && (
           <>
             <div className="sidebar_bottom_top">
-              <Avatar radius="xl" />
+              <Avatar radius="xl" src={profile_picture_path} />
               <Stack className="userInfo">
                 <Text size="md">{profile?.username}</Text>
                 <Text size="sm" c="dimmed" truncate="end">