diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx
index 2b1bc726b..06a66e80b 100644
--- a/apps/docs/content/index.mdx
+++ b/apps/docs/content/index.mdx
@@ -8,12 +8,12 @@ import {LinkExternalIcon} from '@primer/octicons-react'
 
 <PRCBox
   sx={{
-    p: 5,
     mt: 5,
   }}
 >
-  <Heading as="h4">Primer Brand</Heading>
-  <Text as="p">Read the installation instructions to get started.</Text>
+  <Text as="p" size="300">
+    Read the installation instructions to get started.
+  </Text>
   <PRCBox
     sx={{
       mt: 4,
diff --git a/apps/docs/gatsby-config.js b/apps/docs/gatsby-config.js
index 8de944c68..d2db2cd80 100644
--- a/apps/docs/gatsby-config.js
+++ b/apps/docs/gatsby-config.js
@@ -2,9 +2,9 @@ const path = require('path')
 
 module.exports = {
   siteMetadata: {
-    title: 'Primer Brand',
+    title: 'Primer Brand UI',
     header: {
-      title: 'Primer Design System',
+      title: 'Primer Brand UI',
     },
     shortName: '',
     description: 'React components for GitHub marketing pages',
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js
new file mode 100644
index 000000000..a984a221f
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './header.module.css'
+import {MarkGithubIcon} from '@primer/octicons-react'
+import {Navigation} from '../../../components/navigation/navigation'
+import {SidePanel} from '../../../components/side-panel/side-panel'
+
+export const HEADER_HEIGHT = 56
+
+export default function Header() {
+  return (
+    <header className={styles.PageHeader}>
+      <a href="https://primer.style/" className={styles.SiteTitle}>
+        <MarkGithubIcon size={24} />
+        <span className={styles.Title}>Primer</span>
+      </a>
+      <Navigation />
+      <div className={styles.SidePanel}>
+        <SidePanel />
+      </div>
+    </header>
+  )
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css
new file mode 100644
index 000000000..30f8d2179
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css
@@ -0,0 +1,47 @@
+.PageHeader {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--base-size-16) var(--base-size-24) var(--base-size-16)
+    var(--base-size-24);
+  border-bottom: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background: var(--brand-color-canvas-default);
+  z-index: 1;
+}
+
+.SiteTitle {
+  display: flex;
+  gap: var(--base-size-8);
+  align-items: center;
+  text-decoration: none;
+}
+
+.SiteTitle svg {
+  fill: var(--brand-color-text-default);
+}
+
+.Title {
+  display: inline-block;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-sansSerif);
+  padding-inline-end: var(--base-size-12);
+}
+
+.SidePanel {
+  display: none;
+  margin-left: auto;
+}
+
+@media (max-width: 1012px) {
+  .PageHeader {
+    padding: var(--base-size-16);
+  }
+
+  .SidePanel {
+    display: block;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js
new file mode 100644
index 000000000..79a4e5f54
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import {Head, Header, Hero, Sidebar} from '@primer/gatsby-theme-doctocat'
+import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
+import {Stack} from '@primer/react-brand'
+import styles from './hero-layout.module.css'
+
+function HeroLayout({children, pageContext}) {
+  let {additionalContributors} = pageContext.frontmatter
+
+  if (!additionalContributors) {
+    additionalContributors = []
+  }
+
+  return (
+    <div className={styles.HeroPageWrapper}>
+      <Head />
+      <Header />
+      <div className={styles.HeroLayoutWrapper}>
+        <div className={styles.HeroLayoutSidebarWrapper}>
+          <Sidebar />
+        </div>
+        <main id="skip-nav" className={styles.HeroLayoutMain}>
+          <div className={styles.LandingPageLayout}>
+            <Stack gap={{narrow: 'spacious', regular: 'normal'}}>
+              <Hero />
+              {children}
+              <PageFooter
+                editUrl={pageContext.editUrl}
+                contributors={pageContext.contributors.concat(
+                  additionalContributors.map((login) => ({login})),
+                )}
+              />
+            </Stack>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default HeroLayout
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css
new file mode 100644
index 000000000..802242c19
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css
@@ -0,0 +1,38 @@
+.HeroPageWrapper {
+  flex-direction: column;
+  min-height: 100vh;
+  display: flex;
+}
+
+.HeroLayoutWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+
+.HeroLayoutSidebarWrapper {
+  display: block;
+
+  @media screen and (max-width: 64rem) {
+    display: none;
+  }
+}
+
+.HeroLayoutMain {
+  padding: var(--base-size-24);
+  width: 100%;
+  @media screen and (max-width: 48rem) {
+    padding-bottom: 0;
+  }
+}
+
+.LandingPageLayout {
+  max-width: var(--breakpoint-xlarge, 80rem);
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 var(--base-size-48);
+
+  @media screen and (max-width: 64rem) {
+    padding: 0;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js
index b74e23b8b..c690d75bf 100644
--- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,38 +1,31 @@
-import {Box as PRCBox, Heading, Text, ThemeProvider} from '@primer/react'
 import React from 'react'
-import {Container} from '@primer/gatsby-theme-doctocat'
-import heroIllustration from '../primer-components-hero.svg'
-import {version} from '../../../../../../packages/react/package'
+import {Heading, Stack, Text} from '@primer/react-brand'
+import styles from './hero.module.css'
 
 export default function Hero() {
   return (
-    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <PRCBox bg="canvas.default" py={6}>
-        <Container>
-          <Heading
-            sx={{
-              color: 'accent.fg',
-              fontSize: 7,
-              lineHeight: 'condensed',
-              pb: 3,
-              m: 0,
-            }}
-          >
-            Primer Brand
-          </Heading>
-          <Text
-            as="p"
-            fontFamily="mono"
-            mt={0}
-            mb={2}
-            color="fg.muted"
-            fontSize={2}
-          >
-            v{version}
-          </Text>
-          <img src={heroIllustration} alt="" width="100%" />
-        </Container>
-      </PRCBox>
-    </ThemeProvider>
+    <Stack
+      padding="none"
+      gap="spacious"
+      direction="horizontal"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <Stack gap="normal" padding="none">
+        <Heading as="h1" size="3">
+          Primer Brand UI
+        </Heading>
+        <Text as="p" variant="muted" size="300">
+          Primer Brand is GitHub's design system for creating marketing websites and digital experiences.
+        </Text>
+      </Stack>
+      <div className={styles.HeroImage}>
+        <img
+          width="256"
+          alt="3d illustration, showing a side profile of Mona the GitHub Mascot gazing towards the sky"
+          src="https://github.com/user-attachments/assets/e9a4d7f8-8e61-4f45-a1a7-466848df6dda"
+        />
+      </div>
+    </Stack>
   )
 }
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css
new file mode 100644
index 000000000..23688f634
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css
@@ -0,0 +1,6 @@
+.HeroImage {
+  flex-shrink: 0;
+  @media screen and (max-width: 64rem) {
+    display: none;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js
new file mode 100644
index 000000000..ea4f81f1a
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js
@@ -0,0 +1,60 @@
+import {NavList} from '@primer/react/drafts'
+import {useLocation} from '@reach/router'
+import {Link as GatsbyLink, withPrefix} from 'gatsby'
+import React from 'react'
+import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden'
+import styles from './nav-items.module.css'
+
+function NavItem({href, children}) {
+  const location = useLocation()
+  const isCurrent = withPrefix(href) === location.pathname
+  return (
+    <NavList.Item
+      as={GatsbyLink}
+      to={href}
+      aria-current={isCurrent ? 'page' : null}
+    >
+      {children}
+    </NavList.Item>
+  )
+}
+
+function NavItems({items}) {
+  return (
+    <>
+      <VisuallyHidden>
+        <h3>Site navigation</h3>
+      </VisuallyHidden>
+      <div className={styles.NavList__Container}>
+        <NavList aria-label="Site">
+          {items.map((item) => (
+            <React.Fragment key={item.title}>
+              {item.children ? (
+                <NavList.Group title={item.title}>
+                  {item.children.map((child) => (
+                    <NavItem key={child.title} href={child.url}>
+                      {child.title}
+                      {child.children ? (
+                        <NavList.SubNav>
+                          {child.children.map((subChild) => (
+                            <NavItem key={subChild.title} href={subChild.url}>
+                              {subChild.title}
+                            </NavItem>
+                          ))}
+                        </NavList.SubNav>
+                      ) : null}
+                    </NavItem>
+                  ))}
+                </NavList.Group>
+              ) : (
+                <NavItem href={item.url}>{item.title}</NavItem>
+              )}
+            </React.Fragment>
+          ))}
+        </NavList>
+      </div>
+    </>
+  )
+}
+
+export default NavItems
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css
new file mode 100644
index 000000000..595f4336a
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css
@@ -0,0 +1,11 @@
+/* NavList style overrides needed because NavList uses hard-coded pixel values instead of rem-based CSS variables */
+.NavList__Container li span {
+  font-size: var(--brand-text-size-100);
+}
+
+.NavList__Container li a span,
+.NavList__Container li button span {
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+/* END NavList overrides */
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js
new file mode 100644
index 000000000..2ed8ffb0f
--- /dev/null
+++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js
@@ -0,0 +1,121 @@
+import {Box, TextInput} from '@primer/react'
+import {Text, Stack} from '@primer/react-brand'
+import {SearchIcon} from '@primer/octicons-react'
+import React, {useState} from 'react'
+import navItems from '../nav.yml'
+import {HEADER_HEIGHT} from './header'
+import NavItems from './nav-items'
+
+function usePersistentScroll(id) {
+  const ref = React.useRef()
+
+  const handleScroll = React.useCallback(
+    // Save scroll position in session storage on every scroll change
+    (event) => window.sessionStorage.setItem(id, event.target.scrollTop),
+    [id],
+  )
+
+  React.useLayoutEffect(() => {
+    // Restore scroll position when component mounts
+    const scrollPosition = window.sessionStorage.getItem(id)
+    if (scrollPosition && ref.current) {
+      ref.current.scrollTop = scrollPosition
+    }
+  }, [id])
+
+  // Return props to spread onto the scroll container
+  return {
+    ref,
+    onScroll: handleScroll,
+  }
+}
+
+function Sidebar({inSideSheetDialog}) {
+  const scrollContainerProps = usePersistentScroll('sidebar')
+  const [filter, setFilter] = useState('')
+
+  const handleFilterChange = (e) => {
+    setFilter(e.target.value.toLowerCase())
+  }
+
+  const filterNavItems = (item) => {
+    if (item.title.toLowerCase().includes(filter)) {
+      return true
+    }
+    if (item.children) {
+      // Filter children that match the filter
+      const filteredChildren = item.children.filter((child) =>
+        child.title.toLowerCase().includes(filter),
+      )
+      // If there are any matching children, return a new item with filtered children
+      if (filteredChildren.length > 0) {
+        return {
+          ...item,
+          children: filteredChildren,
+        }
+      }
+    }
+    return false
+  }
+
+  const filteredNavItems = navItems
+    .map((item) => {
+      if (filterNavItems(item)) {
+        return item.children
+          ? {...item, children: item.children.filter(filterNavItems)}
+          : item
+      }
+      return null
+    })
+    .filter(Boolean)
+
+  return (
+    <Box
+      sx={{
+        position: 'sticky',
+        top: HEADER_HEIGHT,
+        height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+        width: inSideSheetDialog ? 'undefined' : 280,
+        fontFamily: 'var(--brand-fontStack-sansSerif)',
+        margin: inSideSheetDialog
+          ? 'calc(var(--base-size-16) * -1)'
+          : undefined,
+      }}
+    >
+      <Box
+        {...scrollContainerProps}
+        sx={{
+          borderWidth: 0,
+          borderRightWidth: inSideSheetDialog ? 0 : 1,
+          borderRadius: 0,
+          height: '100%',
+          borderStyle: 'solid',
+          borderColor: 'border.subtle',
+          padding: inSideSheetDialog
+            ? 'var(--base-size-16)'
+            : 'var(--base-size-24)',
+          overflow: 'auto',
+        }}
+      >
+        <Stack padding="none">
+          <Text size="400" weight="semibold">
+            Brand UI
+          </Text>
+          <div>
+            <TextInput
+              leadingVisual={SearchIcon}
+              placeholder="Search"
+              block
+              onChange={handleFilterChange}
+            />
+            <Box sx={{marginInline: `calc(var(--base-size-16) * -1)`}}>
+              <NavItems items={filteredNavItems} />
+            </Box>
+          </div>
+        </Stack>
+      </Box>
+    </Box>
+  )
+}
+
+export default Sidebar
diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css
new file mode 100644
index 000000000..6e611fd2f
--- /dev/null
+++ b/apps/docs/src/components/navigation/navigation.module.css
@@ -0,0 +1,80 @@
+.Navigation {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  flex-grow: 1;
+  font-family: var(--brand-fontStack-sansSerif);
+}
+
+.Separator {
+  color: var(--borderColor-default, #d0d7de);
+  font-weight: var(--base-text-weight-light);
+}
+
+.HorizontalList {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  gap: var(--base-size-2);
+  padding-right: var(--base-size-16);
+  justify-content: flex-end;
+}
+
+.Link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brand-color-text-muted);
+  text-decoration: none;
+  padding: 0 var(--base-size-12);
+  height: var(--base-size-32);
+  border: 1px solid transparent;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.DropdownLink {
+  color: var(--brand-color-text-muted);
+  font-size: var(--brand-text-size-200);
+}
+
+.Dropdown svg {
+  color: var(--brand-color-text-default);
+}
+
+.Icon {
+  margin-bottom: 6px;
+}
+
+.Link:hover {
+  background: var(
+    --bgColor-muted,
+    #f6f8fa
+  ); /* Note: this color will be wrong when/if we add dark mode Doctocat Primer Brand docs */
+}
+
+.Link:focus-visible {
+  outline: 2px solid var(--focus-outlineColor);
+  outline-offset: -2px;
+}
+
+.Link[data-active] {
+  color: var(--brand-color-text-default);
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.HorizontalList {
+  display: none;
+}
+
+@media (min-width: 1012px) {
+  .HorizontalList {
+    display: flex;
+  }
+  .Separator,
+  .Dropdown {
+    display: none;
+  }
+}
diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx
new file mode 100644
index 000000000..dce6b49f8
--- /dev/null
+++ b/apps/docs/src/components/navigation/navigation.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import {ArrowUpRightIcon, TriangleDownIcon} from '@primer/octicons-react'
+import styles from './navigation.module.css'
+import {ActionList, ActionMenu, Button} from '@primer/react'
+
+const navItems = [
+  {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site
+  {href: '/', label: 'Brand UI'},
+  {href: 'https://primer.style/octicons', label: 'Octicons'},
+  {href: 'https://primer.style/guides/accessibility', label: 'Accessibility'}, // TODO: update to https://primer.style/accessibility when we launch the new docs site
+  {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true},
+]
+
+export function Navigation() {
+  const activeItem = navItems.find((item) => item.label === 'Brand UI')
+  return (
+    <nav aria-label="Main navigation" className={styles.Navigation}>
+      <div className={styles.Separator}>/</div>
+      <div className={styles.Dropdown}>
+        <ActionMenu>
+          <ActionMenu.Anchor>
+            <Button
+              aria-label="Open menu"
+              trailingVisual={TriangleDownIcon}
+              variant="invisible"
+            >
+              <div className={styles.DropdownLink}>
+                {activeItem ? activeItem.label : 'Library'}
+              </div>
+            </Button>
+          </ActionMenu.Anchor>
+          <ActionMenu.Overlay width="small">
+            <ActionList>
+              {navItems.map((item) => (
+                <ActionList.LinkItem
+                  key={item.href}
+                  href={item.href}
+                  active={activeItem?.label === item.label}
+                  target={item.external ? '_blank' : undefined}
+                  rel={item.external ? 'noopener noreferrer' : undefined}
+                >
+                  {item.label}
+                  {item.external && (
+                    <ArrowUpRightIcon className={styles.Icon} size={10} />
+                  )}
+                </ActionList.LinkItem>
+              ))}
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </div>
+      <ul className={styles.HorizontalList}>
+        {navItems.map((item) => {
+          const active = item.label === 'Brand UI'
+          return (
+            <li
+              key={item.href}
+              className={active ? styles.ActiveLink : undefined}
+            >
+              {item.external ? (
+                <a
+                  className={styles.Link}
+                  data-active={active ? true : undefined}
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {item.label}
+                  <ArrowUpRightIcon className={styles.Icon} size={10} />
+                </a>
+              ) : (
+                <a
+                  className={styles.Link}
+                  data-active={active ? true : undefined}
+                  href={item.href}
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
diff --git a/apps/docs/src/components/side-panel/side-panel.module.css b/apps/docs/src/components/side-panel/side-panel.module.css
new file mode 100644
index 000000000..907d6225f
--- /dev/null
+++ b/apps/docs/src/components/side-panel/side-panel.module.css
@@ -0,0 +1,10 @@
+.SidePanel {
+  position: relative;
+}
+
+.Header {
+  padding: var(--base-size-16);
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  display: flex;
+  justify-content: end;
+}
diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx
new file mode 100644
index 000000000..bddcd3b6e
--- /dev/null
+++ b/apps/docs/src/components/side-panel/side-panel.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import {useState, useRef} from 'react'
+import {IconButton} from '@primer/react'
+import {Dialog} from '@primer/react/experimental'
+import {ThreeBarsIcon, XIcon} from '@primer/octicons-react'
+import styles from './side-panel.module.css'
+import {Sidebar} from '@primer/gatsby-theme-doctocat'
+
+export function SidePanel() {
+  const [isOpen, setIsOpen] = useState(false)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+  const openButtonRef = useRef<HTMLButtonElement>(null)
+
+  const openDialog = () => {
+    setIsOpen(true)
+  }
+
+  const closeDialog = () => {
+    setIsOpen(false)
+  }
+
+  const renderHeader = ({dialogLabelId}: {dialogLabelId: string}) => (
+    <div
+      className={styles.Header}
+      id={dialogLabelId}
+      aria-label="Navigation"
+      role="heading"
+      aria-level={1}
+    >
+      <IconButton
+        ref={closeButtonRef}
+        icon={XIcon}
+        variant="default"
+        aria-label="Close Navigation"
+        onClick={closeDialog}
+      />
+    </div>
+  )
+
+  return (
+    <div className={styles.SidePanel}>
+      <IconButton
+        ref={openButtonRef}
+        icon={ThreeBarsIcon}
+        variant="default"
+        aria-label="Navigation"
+        onClick={openDialog}
+      />
+      {isOpen && (
+        <Dialog
+          onClose={closeDialog}
+          width="small"
+          // TODO: get `@primer/react` updated to a version that supports the `position` prop on experimental `Dialog` component
+          position="right"
+          renderHeader={renderHeader}
+          returnFocusRef={openButtonRef}
+          // When we update to a version of `@primer/react` that supports the `position` prop, we can remove the custom styles below
+          sx={{
+            height: '100dvh',
+            maxHeight: 'unset',
+            borderRadius: 'var(--brand-borderRadius-large, 0.75rem)',
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            position: 'fixed',
+            right: 0,
+            top: 0,
+            bottom: 0,
+            animation:
+              'Overlay--motion-slideInLeft var(--brand-animation-duration-faster) var(--brand-animation-easing-glide) 0s 1 normal none running',
+            '@keyframes Overlay--motion-slideInLeft': {
+              from: {
+                transform: 'translateX(100%)',
+              },
+            },
+          }}
+        >
+          <Sidebar inSideSheetDialog />
+        </Dialog>
+      )}
+    </div>
+  )
+}