@churchapps/apphelper 0.0.1

package/src/components/markdownEditor/plugins/emoji/EmojisPlugin.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+import 'material-symbols';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$createTextNode, TextNode} from 'lexical';
+import {useEffect} from 'react';
+import materialIcons from '../../../material/iconPicker/IconNamesList';
+
+import {$createEmojiNode, EmojiNode} from './EmojiNode';
+import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
+
+
+function useEmojis(editor: LexicalEditor): void {
+  useEffect(() => {
+    if (!editor.hasNodes([EmojiNode, TextNode])) {
+      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+    }
+
+    return editor.registerNodeTransform(TextNode, (textNode) => {
+      if (EMOJI_NODE_MARKDOWN_REGEX.test(textNode.getTextContent()) || materialIcons.map((materialIcon : string) => ':' + materialIcon + ':').some((materialIcon : string) => textNode.getTextContent().includes(materialIcon))) {
+
+        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
+
+        if (!materialIconToInsert) return;
+
+        const initialTextInput = textNode.getTextContent();
+        const emojiNode = $createEmojiNode(materialIconToInsert);
+
+        const leftoverTextNodes : Array<TextNode> = [];
+
+        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
+          if (materialIcons.includes(leftoverTextString)) {
+            const emojiNode = $createEmojiNode(leftoverTextString);
+
+            leftoverTextNodes.push(emojiNode);
+            return;
+          }
+          leftoverTextNodes.push($createTextNode(leftoverTextString));
+        });
+
+        textNode.setTextContent('');
+
+
+        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
+
+        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
+
+        textNode.remove();
+      }
+    });
+  }, [editor]);
+}
+
+export default function EmojisPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEmojis(editor);
+  return null;
+}

package/src/components/markdownEditor/plugins/index.ts

@@ -0,0 +1,6 @@
+export { ToolbarPlugin } from "./ToolbarPlugin";
+export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
+export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
+export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
+export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
+export { ControlledEditorPlugin } from "./ControlledEditorPlugin";

package/src/components/markdownEditor/theme.ts

@@ -0,0 +1,65 @@
+export const theme = {
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5"
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem"
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem"
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "editor-text-underline",
+    strikethrough: "editor-text-strikethrough",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code"
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable"
+  }
+};

package/src/components/material/AppList.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { LoginUserChurchInterface } from "../../interfaces";
+
+export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; router?: any; }
+
+export const AppList: React.FC<Props> = props => {
+  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
+  const churchId = UserHelper.currentUserChurch.church.id;
+  return (
+    <>
+      <NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "CHUMS"} external={true} label="Chums" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" router={props.router} />
+    </>
+  );
+}

package/src/components/material/ChurchList.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+
+export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface }
+
+export const ChurchList: React.FC<Props> = props => {
+
+  if (props.userChurches.length < 2) return <></>;
+  else {
+    let result: JSX.Element[] = [];
+    const userChurches = props.userChurches.filter(uc => uc.apis.length > 0)
+    userChurches.forEach(uc => {
+      const userChurch = uc;
+      const churchName = uc.church.name;
+      result.push(<NavItem key={userChurch.church.id} selected={(uc.church.id === props.currentUserChurch.church.id) && true} onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)} label={churchName} icon="church" />);
+    });
+
+    return <>{result}</>;
+  }
+};

package/src/components/material/NavItem.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Icon, ListItemButton, ListItemIcon, ListItemText, styled, Tooltip } from "@mui/material";
+import { NavLink, useLocation } from "react-router-dom";
+
+interface Props {
+  url?: string;
+  target?: string;
+  label: string;
+  icon: string;
+  onClick?: () => void;
+  router?: any;
+  external?: boolean;
+  selected?: boolean;
+}
+
+const StyledNavLink = styled(NavLink)({
+  textDecoration: "none",
+  "&:hover": { textDecoration: "none" },
+  "& .MuiListItemIcon-root": { minWidth: 40 }
+});
+
+export const NavItem: React.FC<Props> = (props) => {
+  let isReact = false;
+  try {
+    const a = typeof useLocation();
+    if (a !== null) isReact = true;
+  } catch { }
+
+  const getIcon = () => <Icon>{props.icon}</Icon>
+
+  const getLinkContents = () => (<ListItemButton>
+    <Tooltip title={props.label || ""} arrow placement="right">
+      <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
+    </Tooltip>
+    <ListItemText primary={props.label} />
+  </ListItemButton>)
+
+  if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)
+  else if (props.external || !isReact) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
+  else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={props.onClick ? (e) => { e.preventDefault(); props.onClick() } : null}>{getLinkContents()}</StyledNavLink>)
+};

package/src/components/material/NewPrivateMessage.tsx

@@ -0,0 +1,103 @@
+import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
+import React from "react";
+import { ApiHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { AddNote } from "../notes/AddNote";
+import { SmallButton } from "../SmallButton";
+
+interface Props {
+  context: UserContextInterface;
+  onSelectMessage: (pm: PrivateMessageInterface) => void
+  onBack: () => void
+}
+
+export const NewPrivateMessage: React.FC<Props> = (props) => {
+
+  const [searchText, setSearchText] = React.useState("");
+  const [searchResults, setSearchResults] = React.useState([]);
+  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
+
+  const handleSubmit = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = escape(searchText.trim());
+    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(data));
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.currentTarget.value);
+  }
+
+  /*
+    const handleKeyDown = (e: React.KeyboardEvent<any>) => {
+      //if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); }
+    }
+  */
+
+  const handlePersonSelected = async (person: PersonInterface) => {
+    const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
+    if (existing.id) {
+      existing.person = person;
+      props.onSelectMessage(existing);
+    }
+    else setSelectedPerson(person);
+  }
+
+  const getPeople = () => {
+    let result = [];
+    for (let i = 0; i < searchResults.length; i++) {
+      const p = searchResults[i];
+      result.push(<TableRow key={p.id}>
+        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
+        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
+      </TableRow>);
+    }
+    return result;
+  }
+
+  const handleNoteAdded = () => {
+    handlePersonSelected(selectedPerson);
+  }
+
+  const createConversation = async () => {
+    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
+    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
+
+    const pm: PrivateMessageInterface = {
+      fromPersonId: props.context.person.id,
+      toPersonId: selectedPerson.id,
+      conversationId: result[0].id
+    }
+    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
+    return privateMessages[0].conversationId;
+  }
+
+  if (!selectedPerson) return (
+    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      <b>New Private Message</b>
+      <div>Search for a person</div>
+
+      <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
+      />
+      <br />
+      <Table id="smallPeopleTable" size="small">
+        <TableBody>{getPeople()}</TableBody>
+      </Table>
+    </div>
+  );
+  else {
+    return (
+      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+        <span style={{ float: "right" }}>
+          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+        </span>
+        <b>New Private Message</b>
+        <div>To: {selectedPerson.name.display}</div>
+        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
+      </div>
+    )
+  }
+}

package/src/components/material/PrivateMessageDetails.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { Notes } from "../notes/Notes";
+
+interface Props {
+  context: UserContextInterface;
+  privateMessage: PrivateMessageInterface;
+  onBack: () => void
+}
+
+export const PrivateMessageDetails: React.FC<Props> = (props) => (
+  <>
+    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      Chat with {props.privateMessage.person.name.display}
+    </div>
+    <Notes context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} />
+  </>
+);
+

package/src/components/material/PrivateMessages.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { Box, Stack } from "@mui/material";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { PrivateMessageDetails } from "./PrivateMessageDetails";
+import { NewPrivateMessage } from "./NewPrivateMessage";
+
+interface Props {
+  context: UserContextInterface;
+}
+
+export const PrivateMessages: React.FC<Props> = (props) => {
+
+  const [privateMessages, setPrivateMessages] = useState<PrivateMessageInterface[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<PrivateMessageInterface>(null);
+  const [inAddMode, setInAddMode] = useState(false);
+
+  const loadData = async () => {
+    const pms: PrivateMessageInterface[] = await ApiHelper.get("/privateMessages", "MessagingApi");
+    const peopleIds: string[] = [];
+    pms.forEach(pm => {
+      const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+      if (peopleIds.indexOf(personId) === -1) peopleIds.push(personId);
+    });
+    if (peopleIds.length > 0) {
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      pms.forEach(pm => {
+        const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+        pm.person = ArrayHelper.getOne(people, "id", personId);
+      })
+    }
+    setPrivateMessages(pms);
+  }
+
+  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
+
+  const getMainLinks = () => {
+    let result: JSX.Element[] = [];
+    privateMessages.forEach(pm => {
+
+      const person = pm.person;
+      const message = pm.conversation.messages[0];
+      const photoUrl = PersonHelper.getPhotoUrl(person);
+
+      let datePosted = new Date(message.timeUpdated || message.timeSent);
+      const displayDuration = DateHelper.getDisplayDuration(datePosted);
+      const contents = message.content?.split("\n")[0];
+      const privateMessage = pm;
+      result.push(
+        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
+          <div className="postedBy">
+            <img src={photoUrl} alt="avatar" />
+          </div>
+          <Box sx={{ width: "100%" }} className="note-contents">
+            <Stack direction="row" justifyContent="space-between">
+              <div>
+                <b>{person.name?.display}</b> · <span className="text-grey">{displayDuration}</span>
+                <p style={{ maxHeight: 20, overflowY: "hidden" }}>{contents}</p>
+              </div>
+            </Stack>
+          </Box>
+        </div>
+      );
+    })
+    return result;
+  }
+
+  const handleBack = () => {
+    setInAddMode(false);
+    setSelectedMessage(null);
+    loadData();
+  }
+
+  if (inAddMode) return <NewPrivateMessage context={props.context} onSelectMessage={(pm: PrivateMessageInterface) => { setSelectedMessage(pm); setInAddMode(false); }} onBack={handleBack} />
+  if (selectedMessage) return <PrivateMessageDetails privateMessage={selectedMessage} context={props.context} onBack={handleBack} />
+  else return (
+    <>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="add" onClick={() => { setInAddMode(true) }} />
+      </span>
+
+      {getMainLinks()}
+    </>
+  );
+};

package/src/components/material/SiteWrapper.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { AppBar, Drawer, IconButton, styled, Toolbar, Icon, Typography, Box, Container, Link } from "@mui/material";
+import { UserHelper, AppearanceHelper, PersonHelper, AppearanceInterface, ApiHelper } from "../../helpers";
+import { UserMenu } from "./UserMenu";
+import { UserContextInterface } from "../../interfaces";
+import { useMountedState } from "../../hooks/useMountedState";
+import { SocketHelper } from "../../helpers/SocketHelper";
+
+
+interface Props {
+  navContent: JSX.Element,
+  context: UserContextInterface,
+  children: React.ReactNode,
+  appName: string,
+  router?: any,
+  appearance?: AppearanceInterface
+}
+
+const OpenDrawer = styled(Drawer)(
+  ({ theme }) => ({
+    "& .MuiDrawer-paper": {
+      position: "relative",
+      backgroundColor: theme.palette.primary.main,
+      color: "#FFFFFF",
+      whiteSpace: "nowrap",
+      width: "100vw",
+      zIndex: 9999,
+      [theme.breakpoints.up("md")]: { width: 220 },
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      boxSizing: "border-box"
+    },
+    "& .MuiListItemButton-root, & .MuiListItemIcon-root": { color: "#FFFFFF" }
+  })
+);
+
+const ClosedDrawer = styled(OpenDrawer)(
+  ({ theme }) => ({
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    zIndex: 1,
+    width: theme.spacing(7),
+    [theme.breakpoints.up("sm")]: { width: theme.spacing(7) },
+    "& .MuiListSubheader-root": {
+      opacity: 0
+    }
+  })
+);
+
+const ClosedDrawerAppBar = styled(AppBar)(
+  ({ theme }) => ({
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    "& .MuiIcon-root": { color: "#FFFFFF" }
+  })
+);
+
+const OpenDrawerAppBar = styled(ClosedDrawerAppBar)(
+  ({ theme }) => ({
+    marginLeft: 220,
+    width: `calc(100% - ${220}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  })
+);
+
+export const SiteWrapper: React.FC<Props> = props => {
+  const [churchLogo, setChurchLogo] = React.useState<string>();
+  const [open, setOpen] = React.useState(false);
+  const toggleDrawer = () => { setOpen(!open); };
+  const isMounted = useMountedState();
+
+  const CustomDrawer = (open) ? OpenDrawer : ClosedDrawer;
+  const CustomAppBar = (open) ? OpenDrawerAppBar : ClosedDrawerAppBar;
+
+  const handleNotification = () => {
+    alert("Notification received.  Make GET to fetch bell count and toast message.")
+  }
+
+  React.useEffect(() => {
+    const getChurchLogo = async () => {
+      if (UserHelper.currentUserChurch) {
+        setChurchLogo(AppearanceHelper.getLogoDark(props.appearance, "/images/logo-wrapper.png"));
+      }
+    }
+
+    if (!isMounted()) {
+      getChurchLogo();
+    }
+  }, [isMounted, props.appearance]);
+
+  React.useEffect(() => {
+    if (!props.context.userChurch) SocketHelper.setUserChurch({userId:null, churchId:null});
+    else SocketHelper.setUserChurch({userId:props.context.user.id, churchId:props.context.userChurch?.church.id});
+  }, [props.context.userChurch]);
+
+  React.useEffect(() => {
+    SocketHelper.addHandler("notification", "notificationBell", handleNotification);
+    SocketHelper.init();
+  }, []);
+
+  return <>
+    <CustomAppBar position="absolute">
+      <Toolbar sx={{ pr: "24px" }}>
+        <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: "36px", ...(open && { display: "none" }) }}>
+          <Icon>menu</Icon>
+        </IconButton>
+        <Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>
+        <div style={{ flex: 1 }}></div>
+        {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} router={props.router} />}
+        {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
+      </Toolbar>
+    </CustomAppBar>
+
+    <CustomDrawer variant="permanent" open={open}>
+      <Toolbar sx={{ display: "flex", alignItems: "center", width: "100%", px: [1] }}>
+        <img src={churchLogo || "/images/logo-wrapper.png"} alt="logo" style={{ maxWidth: 170 }} />
+        <div style={{ justifyContent: "flex-end", flex: 1, display: "flex" }}>
+          <IconButton onClick={toggleDrawer}><Icon style={{ color: "#FFFFFF" }}>chevron_left</Icon></IconButton>
+        </div>
+      </Toolbar>
+      {props.navContent}
+    </CustomDrawer>
+    <Box component="main" sx={{ flexGrow: 1, overflow: "auto", marginTop: 8, minHeight: "90vh" }}>
+      <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
+        {props.children}
+      </Container>
+    </Box>
+  </>
+};