From 8230773f41899231b06a5eaf1fb303d78ba9684e Mon Sep 17 00:00:00 2001
From: Johan Book <13253042+johanbook@users.noreply.github.com>
Date: Mon, 22 Jul 2024 22:38:06 +0200
Subject: [PATCH] feat(web-ui): use drawer to show organization list menu on
mobile (#922)
* fix(web-ui): small styling fixes for guard pages
* feat(web-ui): use drawer to show organization list on mobile
---------
Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>
---
.../nav/AppBar/CurrentOrganizationAvatar.tsx | 71 ++++++++++++++++++-
.../AuthenticationGuard.nav.tsx | 2 +-
.../pages/ProfileGuard/ProfileGuard.nav.tsx | 2 +-
3 files changed, 70 insertions(+), 5 deletions(-)
diff --git a/services/web-ui/src/components/nav/AppBar/CurrentOrganizationAvatar.tsx b/services/web-ui/src/components/nav/AppBar/CurrentOrganizationAvatar.tsx
index bf0cacf9..4c43c4ed 100644
--- a/services/web-ui/src/components/nav/AppBar/CurrentOrganizationAvatar.tsx
+++ b/services/web-ui/src/components/nav/AppBar/CurrentOrganizationAvatar.tsx
@@ -1,12 +1,16 @@
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
import { ErrorOutline } from "@mui/icons-material";
import {
Avatar,
+ Box,
ButtonBase,
CircularProgress,
+ Divider,
+ Drawer,
MenuItem,
Skeleton,
+ Typography,
} from "@mui/material";
import { OrganizationDetails, SwitchOrganizationCommand } from "src/api";
@@ -21,6 +25,7 @@ import {
useQueryClient,
} from "src/core/query";
import { useSnackbar } from "src/core/snackbar";
+import { useIsMobile } from "src/hooks/useIsMobile";
interface MenuContentProps {
currentOrganizationId: number;
@@ -64,15 +69,31 @@ function MenuContent({ currentOrganizationId }: MenuContentProps) {
);
}
+ const filteredOrganizations = query.data.filter(
+ (organization) => organization.id !== currentOrganizationId
+ );
+
return (
<>
- {query.data.map((organization) => (
+ {filteredOrganizations.map((organization) => (
))}
>
@@ -80,6 +101,10 @@ function MenuContent({ currentOrganizationId }: MenuContentProps) {
}
export function CurrentOrganizationAvatar(): ReactElement {
+ const isMobile = useIsMobile();
+
+ const [drawerIsOpen, setIsDrawerOpen] = useState(false);
+
const query = useQuery({
queryKey: [CacheKeysConstants.CurrentOrganization],
queryFn: () => organizationsApi.getCurrentOrganization(),
@@ -93,6 +118,46 @@ export function CurrentOrganizationAvatar(): ReactElement {
return