init project

docs/data/joy/getting-started/templates/email/App.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import { FocusTrap } from '@mui/base/FocusTrap';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Button from '@mui/joy/Button';
+import Stack from '@mui/joy/Stack';
+
+import CreateRoundedIcon from '@mui/icons-material/CreateRounded';
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
+import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
+
+import Layout from './components/Layout';
+import Navigation from './components/Navigation';
+import Mails from './components/Mails';
+import EmailContent from './components/EmailContent';
+import WriteEmail from './components/WriteEmail';
+import Header from './components/Header';
+
+export default function EmailExample() {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <CssVarsProvider disableTransitionOnChange>
+      <CssBaseline />
+      {drawerOpen && (
+        <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
+          <Navigation />
+        </Layout.SideDrawer>
+      )}
+      <Stack
+        id="tab-bar"
+        direction="row"
+        spacing={1}
+        sx={{
+          justifyContent: 'space-around',
+          display: { xs: 'flex', sm: 'none' },
+          zIndex: '999',
+          bottom: 0,
+          position: 'fixed',
+          width: '100dvw',
+          py: 2,
+          backgroundColor: 'background.body',
+          borderTop: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Button
+          variant="plain"
+          color="neutral"
+          aria-pressed="true"
+          component="a"
+          href="/joy-ui/getting-started/templates/email/"
+          size="sm"
+          startDecorator={<EmailRoundedIcon />}
+          sx={{ flexDirection: 'column', '--Button-gap': 0 }}
+        >
+          Email
+        </Button>
+        <Button
+          variant="plain"
+          color="neutral"
+          component="a"
+          href="/joy-ui/getting-started/templates/team/"
+          size="sm"
+          startDecorator={<PeopleAltRoundedIcon />}
+          sx={{ flexDirection: 'column', '--Button-gap': 0 }}
+        >
+          Team
+        </Button>
+        <Button
+          variant="plain"
+          color="neutral"
+          component="a"
+          href="/joy-ui/getting-started/templates/files/"
+          size="sm"
+          startDecorator={<FolderRoundedIcon />}
+          sx={{ flexDirection: 'column', '--Button-gap': 0 }}
+        >
+          Files
+        </Button>
+      </Stack>
+      <Layout.Root
+        sx={[
+          drawerOpen && {
+            height: '100vh',
+            overflow: 'hidden',
+          },
+        ]}
+      >
+        <Layout.Header>
+          <Header />
+        </Layout.Header>
+        <Layout.SideNav>
+          <Navigation />
+        </Layout.SideNav>
+        <Layout.SidePane>
+          <Box
+            sx={{
+              p: 2,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Box sx={{ alignItems: 'center', gap: 1 }}>
+              <Typography level="title-lg" textColor="text.secondary" component="h1">
+                My inbox
+              </Typography>
+              <Typography level="title-sm" textColor="text.tertiary">
+                5 emails
+              </Typography>
+            </Box>
+            <Button
+              size="sm"
+              startDecorator={<CreateRoundedIcon />}
+              onClick={() => setOpen(true)}
+              sx={{ ml: 'auto' }}
+            >
+              Compose email
+            </Button>
+            <FocusTrap open={open} disableAutoFocus disableEnforceFocus>
+              <WriteEmail open={open} onClose={() => setOpen(false)} />
+            </FocusTrap>
+          </Box>
+          <Mails />
+        </Layout.SidePane>
+        <Layout.Main>
+          <EmailContent />
+        </Layout.Main>
+      </Layout.Root>
+    </CssVarsProvider>
+  );
+}

docs/data/joy/getting-started/templates/email/components/EmailContent.tsx

@@ -0,0 +1,284 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Chip from '@mui/joy/Chip';
+import Card from '@mui/joy/Card';
+import CardOverflow from '@mui/joy/CardOverflow';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import Button from '@mui/joy/Button';
+import Snackbar from '@mui/joy/Snackbar';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Divider from '@mui/joy/Divider';
+import Avatar from '@mui/joy/Avatar';
+import Tooltip from '@mui/joy/Tooltip';
+
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import ForwardToInboxRoundedIcon from '@mui/icons-material/ForwardToInboxRounded';
+import FolderIcon from '@mui/icons-material/Folder';
+import ReplyRoundedIcon from '@mui/icons-material/ReplyRounded';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+
+export default function EmailContent() {
+  const [open, setOpen] = React.useState([false, false, false]);
+
+  const handleSnackbarOpen = (index: number) => {
+    const updatedOpen = [...open];
+    updatedOpen[index] = true;
+    setOpen(updatedOpen);
+  };
+
+  const handleSnackbarClose = (index: number) => {
+    const updatedOpen = [...open];
+    updatedOpen[index] = false;
+    setOpen(updatedOpen);
+  };
+
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{ minHeight: 500, borderRadius: 'sm', p: 2, mb: 3 }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 2,
+        }}
+      >
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Avatar
+            src="https://i.pravatar.cc/40?img=3"
+            srcSet="https://i.pravatar.cc/80?img=3"
+          />
+          <Box sx={{ ml: 2 }}>
+            <Typography level="title-sm" textColor="text.primary" sx={{ mb: 0.5 }}>
+              Alex Jonnold
+            </Typography>
+            <Typography level="body-xs" textColor="text.tertiary">
+              21 Oct 2022
+            </Typography>
+          </Box>
+        </Box>
+        <Box
+          sx={{ display: 'flex', height: '32px', flexDirection: 'row', gap: 1.5 }}
+        >
+          <Button
+            size="sm"
+            variant="plain"
+            color="neutral"
+            startDecorator={<ReplyRoundedIcon />}
+            onClick={() => handleSnackbarOpen(0)}
+          >
+            Reply
+          </Button>
+          <Snackbar
+            color="success"
+            open={open[0]}
+            onClose={() => handleSnackbarClose(0)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            startDecorator={<CheckCircleRoundedIcon />}
+            endDecorator={
+              <Button
+                onClick={() => handleSnackbarClose(0)}
+                size="sm"
+                variant="soft"
+                color="neutral"
+              >
+                Dismiss
+              </Button>
+            }
+          >
+            Your message has been sent.
+          </Snackbar>
+          <Button
+            size="sm"
+            variant="plain"
+            color="neutral"
+            startDecorator={<ForwardToInboxRoundedIcon />}
+            onClick={() => handleSnackbarOpen(1)}
+          >
+            Forward
+          </Button>
+          <Snackbar
+            color="success"
+            open={open[1]}
+            onClose={() => handleSnackbarClose(1)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            startDecorator={<CheckCircleRoundedIcon />}
+            endDecorator={
+              <Button
+                onClick={() => handleSnackbarClose(1)}
+                size="sm"
+                variant="soft"
+                color="neutral"
+              >
+                Dismiss
+              </Button>
+            }
+          >
+            Your message has been forwarded.
+          </Snackbar>
+          <Button
+            size="sm"
+            variant="plain"
+            color="danger"
+            startDecorator={<DeleteRoundedIcon />}
+            onClick={() => handleSnackbarOpen(2)}
+          >
+            Delete
+          </Button>
+          <Snackbar
+            color="danger"
+            open={open[2]}
+            onClose={() => handleSnackbarClose(2)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            startDecorator={<CheckCircleRoundedIcon />}
+            endDecorator={
+              <Button
+                onClick={() => handleSnackbarClose(2)}
+                size="sm"
+                variant="soft"
+                color="neutral"
+              >
+                Dismiss
+              </Button>
+            }
+          >
+            Your message has been deleted.
+          </Snackbar>
+        </Box>
+      </Box>
+      <Divider sx={{ mt: 2 }} />
+      <Box
+        sx={{ py: 2, display: 'flex', flexDirection: 'column', alignItems: 'start' }}
+      >
+        <Typography
+          level="title-lg"
+          textColor="text.primary"
+          endDecorator={
+            <Chip component="span" size="sm" variant="outlined" color="warning">
+              Personal
+            </Chip>
+          }
+        >
+          Details for our Yosemite Park hike
+        </Typography>
+        <Box
+          sx={{
+            mt: 1,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            flexWrap: 'wrap',
+          }}
+        >
+          <div>
+            <Typography
+              component="span"
+              level="body-sm"
+              sx={{ mr: 1, display: 'inline-block' }}
+            >
+              From
+            </Typography>
+            <Tooltip size="sm" title="Copy email" variant="outlined">
+              <Chip size="sm" variant="soft" color="primary" onClick={() => {}}>
+                alex.jonnold@hike.com
+              </Chip>
+            </Tooltip>
+          </div>
+          <div>
+            <Typography
+              component="span"
+              level="body-sm"
+              sx={{ mr: 1, display: 'inline-block' }}
+            >
+              to
+            </Typography>
+            <Tooltip size="sm" title="Copy email" variant="outlined">
+              <Chip size="sm" variant="soft" color="primary" onClick={() => {}}>
+                steve@mail.com
+              </Chip>
+            </Tooltip>
+          </div>
+        </Box>
+      </Box>
+      <Divider />
+      <Typography level="body-sm" sx={{ mt: 2, mb: 2 }}>
+        Hello, my friend!
+        <br />
+        <br />
+        So, it seems we are getting there! Our trip is finally here. As you know, I
+        love Yosemite National Park, a lot of great climbers and explorers have made
+        history there, so I&apos;m very excited to bring you with me in this journey.
+        <br />
+        <br />
+        There are plenty of amazing things to see there, from internationally
+        recognized granite cliffs, waterfalls, clear streams, giant sequoia groves,
+        lakes, mountains, meadows, glaciers, and a lot o biological diversity. It is
+        amazing that almost 95 percent of the park is designated wilderness. Yosemite
+        is one of the largest and least fragmented habitat blocks in the Serra
+        Nevada, and the park supports a fantastic diversity of plants and animals.
+        <br />
+        <br />
+        I really hope you love coming along with me, we will have an awesome time!
+        I&apos;m attaching a few pics I took on the last time I went there-get
+        excited!
+        <br />
+        <br />
+        See you soon, Alex Jonnold
+      </Typography>
+      <Divider />
+      <Typography level="title-sm" sx={{ mt: 2, mb: 2 }}>
+        Attachments
+      </Typography>
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 2,
+          '& > div': {
+            boxShadow: 'none',
+            '--Card-padding': '0px',
+            '--Card-radius': theme.vars.radius.sm,
+          },
+        })}
+      >
+        <Card variant="outlined">
+          <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
+            <img
+              src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=80"
+              srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=160 2x"
+              alt="Yosemite National Park"
+            />
+          </AspectRatio>
+        </Card>
+        <Card variant="outlined">
+          <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
+            <img
+              src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=80"
+              srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=160 2x"
+              alt="Yosemite National Park"
+            />
+          </AspectRatio>
+        </Card>
+        <Card variant="outlined" orientation="horizontal">
+          <CardOverflow>
+            <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
+              <div>
+                <FolderIcon />
+              </div>
+            </AspectRatio>
+          </CardOverflow>
+          <Box sx={{ py: { xs: 1, sm: 2 }, pr: 2 }}>
+            <Typography level="title-sm" color="primary">
+              videos-hike.zip
+            </Typography>
+            <Typography level="body-xs">100 MB</Typography>
+          </Box>
+        </Card>
+      </Box>
+    </Sheet>
+  );
+}

docs/data/joy/getting-started/templates/email/components/Header.tsx

@@ -0,0 +1,256 @@
+import * as React from 'react';
+import { useColorScheme } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import IconButton from '@mui/joy/IconButton';
+import Stack from '@mui/joy/Stack';
+import Avatar from '@mui/joy/Avatar';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import Tooltip from '@mui/joy/Tooltip';
+import Dropdown from '@mui/joy/Dropdown';
+import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
+import MenuItem from '@mui/joy/MenuItem';
+import ListDivider from '@mui/joy/ListDivider';
+import Drawer from '@mui/joy/Drawer';
+import ModalClose from '@mui/joy/ModalClose';
+import DialogTitle from '@mui/joy/DialogTitle';
+
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
+import BookRoundedIcon from '@mui/icons-material/BookRounded';
+import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import HelpRoundedIcon from '@mui/icons-material/HelpRounded';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+
+import Navigation from './Navigation';
+
+function ColorSchemeToggle() {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return <IconButton size="sm" variant="outlined" color="primary" />;
+  }
+  return (
+    <Tooltip title="Change theme" variant="outlined">
+      <IconButton
+        data-screenshot="toggle-mode"
+        size="sm"
+        variant="plain"
+        color="neutral"
+        sx={{ alignSelf: 'center' }}
+        onClick={() => {
+          if (mode === 'light') {
+            setMode('dark');
+          } else {
+            setMode('light');
+          }
+        }}
+      >
+        {mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+}
+
+export default function Header() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'space-between' }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          display: { xs: 'none', sm: 'flex' },
+        }}
+      >
+        <IconButton
+          size="md"
+          variant="outlined"
+          color="neutral"
+          sx={{ display: { xs: 'none', sm: 'inline-flex' }, borderRadius: '50%' }}
+        >
+          <LanguageRoundedIcon />
+        </IconButton>
+        <Button
+          variant="plain"
+          color="neutral"
+          aria-pressed="true"
+          component="a"
+          href="/joy-ui/getting-started/templates/email/"
+          size="sm"
+          sx={{ alignSelf: 'center' }}
+        >
+          Email
+        </Button>
+        <Button
+          variant="plain"
+          color="neutral"
+          component="a"
+          href="/joy-ui/getting-started/templates/team/"
+          size="sm"
+          sx={{ alignSelf: 'center' }}
+        >
+          Team
+        </Button>
+        <Button
+          variant="plain"
+          color="neutral"
+          component="a"
+          href="/joy-ui/getting-started/templates/files/"
+          size="sm"
+          sx={{ alignSelf: 'center' }}
+        >
+          Files
+        </Button>
+      </Stack>
+      <Box sx={{ display: { xs: 'inline-flex', sm: 'none' } }}>
+        <IconButton variant="plain" color="neutral" onClick={() => setOpen(true)}>
+          <MenuRoundedIcon />
+        </IconButton>
+        <Drawer
+          sx={{ display: { xs: 'inline-flex', sm: 'none' } }}
+          open={open}
+          onClose={() => setOpen(false)}
+        >
+          <ModalClose />
+          <DialogTitle>Acme Co.</DialogTitle>
+          <Box sx={{ px: 1 }}>
+            <Navigation />
+          </Box>
+        </Drawer>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 1.5,
+          alignItems: 'center',
+        }}
+      >
+        <Input
+          size="sm"
+          variant="outlined"
+          placeholder="Search anything…"
+          startDecorator={<SearchRoundedIcon color="primary" />}
+          endDecorator={
+            <IconButton
+              variant="outlined"
+              color="neutral"
+              sx={{ bgcolor: 'background.level1' }}
+            >
+              <Typography level="title-sm" textColor="text.icon">
+                ⌘ K
+              </Typography>
+            </IconButton>
+          }
+          sx={{
+            alignSelf: 'center',
+            display: {
+              xs: 'none',
+              sm: 'flex',
+            },
+          }}
+        />
+        <IconButton
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          sx={{ display: { xs: 'inline-flex', sm: 'none' }, alignSelf: 'center' }}
+        >
+          <SearchRoundedIcon />
+        </IconButton>
+        <Tooltip title="Joy UI overview" variant="outlined">
+          <IconButton
+            size="sm"
+            variant="plain"
+            color="neutral"
+            component="a"
+            href="/blog/first-look-at-joy/"
+            sx={{ alignSelf: 'center' }}
+          >
+            <BookRoundedIcon />
+          </IconButton>
+        </Tooltip>
+        <ColorSchemeToggle />
+        <Dropdown>
+          <MenuButton
+            variant="plain"
+            size="sm"
+            sx={{ maxWidth: '32px', maxHeight: '32px', borderRadius: '9999999px' }}
+          >
+            <Avatar
+              src="https://i.pravatar.cc/40?img=2"
+              srcSet="https://i.pravatar.cc/80?img=2"
+              sx={{ maxWidth: '32px', maxHeight: '32px' }}
+            />
+          </MenuButton>
+          <Menu
+            placement="bottom-end"
+            size="sm"
+            sx={{
+              zIndex: '99999',
+              p: 1,
+              gap: 1,
+              '--ListItem-radius': 'var(--joy-radius-sm)',
+            }}
+          >
+            <MenuItem>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Avatar
+                  src="https://i.pravatar.cc/40?img=2"
+                  srcSet="https://i.pravatar.cc/80?img=2"
+                  sx={{ borderRadius: '50%' }}
+                />
+                <Box sx={{ ml: 1.5 }}>
+                  <Typography level="title-sm" textColor="text.primary">
+                    Rick Sanchez
+                  </Typography>
+                  <Typography level="body-xs" textColor="text.tertiary">
+                    rick@email.com
+                  </Typography>
+                </Box>
+              </Box>
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>
+              <HelpRoundedIcon />
+              Help
+            </MenuItem>
+            <MenuItem>
+              <SettingsRoundedIcon />
+              Settings
+            </MenuItem>
+            <ListDivider />
+            <MenuItem component="a" href="/blog/first-look-at-joy/">
+              First look at Joy UI
+              <OpenInNewRoundedIcon />
+            </MenuItem>
+            <MenuItem
+              component="a"
+              href="https://github.com/mui/material-ui/tree/master/docs/data/joy/getting-started/templates/email"
+            >
+              Sourcecode
+              <OpenInNewRoundedIcon />
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>
+              <LogoutRoundedIcon />
+              Log out
+            </MenuItem>
+          </Menu>
+        </Dropdown>
+      </Box>
+    </Box>
+  );
+}

docs/data/joy/getting-started/templates/email/components/Layout.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import Box, { BoxProps } from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+
+function Root(props: BoxProps) {
+  return (
+    <Box
+      {...props}
+      sx={[
+        {
+          display: 'grid',
+          gridTemplateColumns: {
+            xs: '1fr',
+            sm: 'minmax(64px, 200px) minmax(450px, 1fr)',
+            md: 'minmax(160px, 300px) minmax(300px, 500px) minmax(500px, 1fr)',
+          },
+          gridTemplateRows: '64px 1fr',
+          minHeight: '100vh',
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
+    />
+  );
+}
+
+function Header(props: BoxProps) {
+  return (
+    <Box
+      component="header"
+      className="Header"
+      {...props}
+      sx={[
+        {
+          p: 2,
+          gap: 2,
+          bgcolor: 'background.surface',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gridColumn: '1 / -1',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          position: 'sticky',
+          top: 0,
+          zIndex: 1100,
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
+    />
+  );
+}
+
+function SideNav(props: BoxProps) {
+  return (
+    <Box
+      component="nav"
+      className="Navigation"
+      {...props}
+      sx={[
+        {
+          p: 2,
+          bgcolor: 'background.surface',
+          borderRight: '1px solid',
+          borderColor: 'divider',
+          display: {
+            xs: 'none',
+            sm: 'initial',
+          },
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
+    />
+  );
+}
+
+function SidePane(props: BoxProps) {
+  return (
+    <Box
+      className="Inbox"
+      {...props}
+      sx={[
+        {
+          bgcolor: 'background.surface',
+          borderRight: '1px solid',
+          borderColor: 'divider',
+          display: {
+            xs: 'none',
+            md: 'initial',
+          },
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
+    />
+  );
+}
+
+function Main(props: BoxProps) {
+  return (
+    <Box
+      component="main"
+      className="Main"
+      {...props}
+      sx={[{ p: 2 }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}
+    />
+  );
+}
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
+  return (
+    <Box
+      {...other}
+      sx={[
+        { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      <Box
+        role="button"
+        onClick={onClose}
+        sx={(theme) => ({
+          position: 'absolute',
+          inset: 0,
+          bgcolor: `rgba(${theme.vars.palette.neutral.darkChannel} / 0.8)`,
+        })}
+      />
+      <Sheet
+        sx={{
+          minWidth: 256,
+          width: 'max-content',
+          height: '100%',
+          p: 2,
+          boxShadow: 'lg',
+          bgcolor: 'background.surface',
+        }}
+      >
+        {props.children}
+      </Sheet>
+    </Box>
+  );
+}
+
+export default {
+  Root,
+  Header,
+  SideNav,
+  SidePane,
+  SideDrawer,
+  Main,
+};

docs/data/joy/getting-started/templates/email/components/Mails.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Avatar from '@mui/joy/Avatar';
+import List from '@mui/joy/List';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+
+const data = [
+  {
+    name: 'Alex Jonnold',
+    avatar: 'https://i.pravatar.cc/40?img=3',
+    avatar2x: 'https://i.pravatar.cc/80?img=3',
+    date: '21 Oct 2022',
+    title: 'Details for our Yosemite Park hike',
+    body: 'Hello, my friend! So, it seems that we are getting there…',
+    color: 'warning.400',
+  },
+  {
+    name: 'Pete Sand',
+    avatar: 'https://i.pravatar.cc/40?img=4',
+    avatar2x: 'https://i.pravatar.cc/80?img=4',
+    date: '06 Jul 2022',
+    title: 'Tickets for our upcoming trip',
+    body: 'Good day, mate! It seems that our tickets just arrived…',
+    color: 'success.400',
+  },
+  {
+    name: 'Kate Gates',
+    avatar: 'https://i.pravatar.cc/40?img=5',
+    avatar2x: 'https://i.pravatar.cc/80?img=5',
+    date: '16 May 2022',
+    title: 'Brunch this Saturday?',
+    body: "Hey! I'll be around the city this weekend, how about a…",
+    color: 'primary.500',
+  },
+  {
+    name: 'John Snow',
+    avatar: 'https://i.pravatar.cc/40?img=7',
+    avatar2x: 'https://i.pravatar.cc/80?img=7',
+    date: '10 May 2022',
+    title: 'Exciting News!',
+    body: 'Hello there! I have some exciting news to share with you...',
+    color: 'danger.500',
+  },
+  {
+    name: 'Michael Scott',
+    avatar: 'https://i.pravatar.cc/40?img=8',
+    avatar2x: 'https://i.pravatar.cc/80?img=8',
+    date: '13 Apr 2022',
+    title: 'Upcoming Product Launch',
+    body: 'Dear customers and supporters, I am thrilled to announc...',
+    color: 'danger.500',
+  },
+];
+
+export default function EmailList() {
+  return (
+    <List
+      sx={{
+        [`& .${listItemButtonClasses.root}.${listItemButtonClasses.selected}`]: {
+          borderLeft: '2px solid',
+          borderLeftColor: 'var(--joy-palette-primary-outlinedBorder)',
+        },
+      }}
+    >
+      {data.map((item, index) => (
+        <React.Fragment key={index}>
+          <ListItem>
+            <ListItemButton
+              {...(index === 0 && {
+                selected: true,
+                color: 'neutral',
+              })}
+              sx={{ p: 2 }}
+            >
+              <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+                <Avatar alt="" srcSet={item.avatar2x} src={item.avatar} />
+              </ListItemDecorator>
+              <Box sx={{ pl: 2, width: '100%' }}>
+                <Box
+                  sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography level="body-xs">{item.name}</Typography>
+                    <Box
+                      sx={{
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '99px',
+                        bgcolor: item.color,
+                      }}
+                    />
+                  </Box>
+                  <Typography level="body-xs" textColor="text.tertiary">
+                    {item.date}
+                  </Typography>
+                </Box>
+                <div>
+                  <Typography level="title-sm" sx={{ mb: 0.5 }}>
+                    {item.title}
+                  </Typography>
+                  <Typography level="body-sm">{item.body}</Typography>
+                </div>
+              </Box>
+            </ListItemButton>
+          </ListItem>
+          <ListDivider sx={{ m: 0 }} />
+        </React.Fragment>
+      ))}
+    </List>
+  );
+}

docs/data/joy/getting-started/templates/email/components/Navigation.tsx

@@ -0,0 +1,138 @@
+import Box from '@mui/joy/Box';
+import List from '@mui/joy/List';
+import ListSubheader from '@mui/joy/ListSubheader';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import ListItemContent from '@mui/joy/ListItemContent';
+
+import InboxRoundedIcon from '@mui/icons-material/InboxRounded';
+import OutboxRoundedIcon from '@mui/icons-material/OutboxRounded';
+import DraftsRoundedIcon from '@mui/icons-material/DraftsRounded';
+import AssistantPhotoRoundedIcon from '@mui/icons-material/AssistantPhotoRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+
+export default function Navigation() {
+  return (
+    <List size="sm" sx={{ '--ListItem-radius': '8px', '--List-gap': '4px' }}>
+      <ListItem nested>
+        <ListSubheader sx={{ letterSpacing: '2px', fontWeight: '800' }}>
+          Browse
+        </ListSubheader>
+        <List aria-labelledby="nav-list-browse">
+          <ListItem>
+            <ListItemButton selected>
+              <ListItemDecorator>
+                <InboxRoundedIcon fontSize="small" />
+              </ListItemDecorator>
+              <ListItemContent>Inbox</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <OutboxRoundedIcon fontSize="small" />
+              </ListItemDecorator>
+              <ListItemContent>Sent</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <DraftsRoundedIcon fontSize="small" />
+              </ListItemDecorator>
+              <ListItemContent>Draft</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <AssistantPhotoRoundedIcon fontSize="small" />
+              </ListItemDecorator>
+              <ListItemContent>Flagged</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <DeleteRoundedIcon fontSize="small" />
+              </ListItemDecorator>
+              <ListItemContent>Trash</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </ListItem>
+      <ListItem nested sx={{ mt: 2 }}>
+        <ListSubheader sx={{ letterSpacing: '2px', fontWeight: '800' }}>
+          Tags
+        </ListSubheader>
+        <List
+          aria-labelledby="nav-list-tags"
+          size="sm"
+          sx={{ '--ListItemDecorator-size': '32px' }}
+        >
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <Box
+                  sx={{
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '99px',
+                    bgcolor: 'primary.500',
+                  }}
+                />
+              </ListItemDecorator>
+              <ListItemContent>Personal</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <Box
+                  sx={{
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '99px',
+                    bgcolor: 'danger.500',
+                  }}
+                />
+              </ListItemDecorator>
+              <ListItemContent>Work</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <Box
+                  sx={{
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '99px',
+                    bgcolor: 'warning.400',
+                  }}
+                />
+              </ListItemDecorator>
+              <ListItemContent>Travels</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <ListItemDecorator>
+                <Box
+                  sx={{
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '99px',
+                    bgcolor: 'success.400',
+                  }}
+                />
+              </ListItemDecorator>
+              <ListItemContent>Concert tickets</ListItemContent>
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </ListItem>
+    </List>
+  );
+}

docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import ModalClose from '@mui/joy/ModalClose';
+import Button from '@mui/joy/Button';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Textarea from '@mui/joy/Textarea';
+import Sheet from '@mui/joy/Sheet';
+import { IconButton, Input, Stack, Typography } from '@mui/joy';
+
+import FormatColorTextRoundedIcon from '@mui/icons-material/FormatColorTextRounded';
+import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
+import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
+interface WriteEmailProps {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
+  function WriteEmail({ open, onClose }, ref) {
+    return (
+      <Sheet
+        ref={ref}
+        sx={[
+          {
+            alignItems: 'center',
+            px: 1.5,
+            py: 1.5,
+            ml: 'auto',
+            width: { xs: '100dvw', md: 600 },
+            flexGrow: 1,
+            border: '1px solid',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'background.level1',
+            borderColor: 'neutral.outlinedBorder',
+            boxShadow: 'lg',
+            zIndex: 1000,
+            position: 'fixed',
+            bottom: 0,
+            right: 24,
+            transition: 'transform 0.3s ease',
+          },
+          open ? { transform: 'translateY(0)' } : { transform: 'translateY(100%)' },
+        ]}
+      >
+        <Box sx={{ mb: 2 }}>
+          <Typography level="title-sm">New message</Typography>
+          <ModalClose id="close-icon" onClick={onClose} />
+        </Box>
+        <Box
+          sx={{ display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}
+        >
+          <FormControl>
+            <FormLabel>To</FormLabel>
+            <Input placeholder="email@email.com" aria-label="Message" />
+          </FormControl>
+          <FormControl>
+            <FormLabel>CC</FormLabel>
+            <Input placeholder="email@email.com" aria-label="Message" />
+          </FormControl>
+          <Input placeholder="Subject" aria-label="Message" />
+          <FormControl sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Textarea
+              placeholder="Type your message here…"
+              aria-label="Message"
+              minRows={8}
+              endDecorator={
+                <Stack
+                  direction="row"
+                  sx={{
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    flexGrow: 1,
+                    py: 1,
+                    pr: 1,
+                    borderTop: '1px solid',
+                    borderColor: 'divider',
+                  }}
+                >
+                  <div>
+                    <IconButton size="sm" variant="plain" color="neutral">
+                      <FormatColorTextRoundedIcon />
+                    </IconButton>
+                    <IconButton size="sm" variant="plain" color="neutral">
+                      <AttachFileRoundedIcon />
+                    </IconButton>
+                    <IconButton size="sm" variant="plain" color="neutral">
+                      <InsertPhotoRoundedIcon />
+                    </IconButton>
+                    <IconButton size="sm" variant="plain" color="neutral">
+                      <FormatListBulletedRoundedIcon />
+                    </IconButton>
+                  </div>
+                  <Button
+                    color="primary"
+                    sx={{ borderRadius: 'sm' }}
+                    onClick={onClose}
+                  >
+                    Send
+                  </Button>
+                </Stack>
+              }
+              sx={{
+                '& textarea:first-of-type': {
+                  minHeight: 72,
+                },
+              }}
+            />
+          </FormControl>
+        </Box>
+      </Sheet>
+    );
+  },
+);
+
+export default WriteEmail;