Style update for User Info Endpoint (#3055)

* style changes from mui 5

* fix spacing issue on small screen

* remove unneeded import

* add default exports

* make linter happy

* more style changes

* use startCase from lodash

Co-authored-by: Caleb Doxsey <cdoxsey@pomerium.com>

ui/src/components/UserInfoPage.tsx

@@ -1,53 +1,70 @@
 import GroupDetails from "./GroupDetails";
-import HeroSection from "./HeroSection";
-import PersonIcon from "./PersonIcon";
 import SessionDetails from "./SessionDetails";
 import SessionDeviceCredentials from "./SessionDeviceCredentials";
-import UserClaims from "./UserClaims";
-import MuiAvatar from "@mui/material/Avatar";
 import Container from "@mui/material/Container";
-import Stack from "@mui/material/Stack";
-import styled from "@mui/material/styles/styled";
-import React, { FC } from "react";
+import React, {FC, useContext} from "react";
 import { UserInfoPageData } from "src/types";
-
-const Avatar = styled(MuiAvatar)(({ theme }) => ({
-  backgroundColor: theme.palette.primary.main,
-  height: 48,
-  width: 48
-}));
+import {Drawer, useMediaQuery} from "@mui/material";
+import { useTheme } from '@mui/material/styles';
+import { ToolbarOffset } from "./ToolbarOffset";
+import {UserSidebarContent} from "./UserSidebarContent";
+import {SubpageContext} from "../context/Subpage";
+import Stack from "@mui/material/Stack";
 
 type UserInfoPageProps = {
   data: UserInfoPageData;
 };
 const UserInfoPage: FC<UserInfoPageProps> = ({ data }) => {
-  const name = data?.user?.claims?.given_name?.[0] || data?.user?.name;
+  const theme = useTheme();
+  const mdUp = useMediaQuery(() => theme.breakpoints.up('md'), {
+    defaultMatches: true,
+    noSsr: false
+  });
+  const {subpage} = useContext(SubpageContext);
+
+
   return (
-    <Container>
-      <Stack spacing={3}>
-        <HeroSection
-          icon={
-            <Avatar>
-              <PersonIcon />
-            </Avatar>
-          }
-          title={<>Hi {name}!</>}
-          text={
-            <>
-              Welcome to the user info endpoint. Here you can view your current
-              session details, and authorization context.
-            </>
-          }
-        />
-        <SessionDetails session={data?.session} />
-        <UserClaims user={data?.user} />
-        <GroupDetails groups={data?.directoryGroups} />
-        <SessionDeviceCredentials
-          csrfToken={data?.csrfToken}
-          session={data?.session}
-          user={data?.user}
-          webAuthnUrl={data?.webAuthnUrl}
-        />
+    <Container maxWidth={false}>
+      {mdUp && (
+        <Drawer
+          anchor="left"
+          open
+          PaperProps={{
+            sx: {
+              backgroundColor: 'neutral.900',
+              width: 256,
+              height: '100vh',
+            }
+          }}
+          variant="persistent"
+        >
+          <ToolbarOffset />
+          <UserSidebarContent close={null}/>
+          <ToolbarOffset />
+        </Drawer>
+      )}
+      <Stack
+        spacing={3}
+        sx={{
+          marginLeft: mdUp ? '256px' : '0px',
+        }}>
+
+        {subpage === 'User' && (
+          <SessionDetails session={data?.session} />
+        )}
+
+        {subpage === 'Groups Info' && (
+          <GroupDetails groups={data?.directoryGroups} />
+        )}
+
+        {subpage === 'Devices Info' && (
+          <SessionDeviceCredentials
+            csrfToken={data?.csrfToken}
+            session={data?.session}
+            user={data?.user}
+            webAuthnUrl={data?.webAuthnUrl}
+          />
+        )}
       </Stack>
     </Container>
   );