From c670ac177bae18ec10667d12ad867ecc5ec1197e Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 5 Sep 2024 20:10:38 +0100
Subject: [PATCH] feat: `SideBarV2` components

---
 .../src/components/SideBarV2/SideBar.spec.tsx |  19 ++
 .../components/SideBarV2/SideBar.stories.tsx  | 184 ++++++++++
 .../components/SideBarV2/SideBar.styles.scss  | 318 ++++++++++++++++++
 .../src/components/SideBarV2/SideBar.tsx      |  20 ++
 .../components/SideBarV2/SideBarAccordion.tsx |  19 ++
 .../SideBarV2/SideBarAccordionItem.tsx        |  79 +++++
 .../components/SideBarV2/SideBarAction.tsx    |  13 +
 .../components/SideBarV2/SideBarActions.tsx   |  13 +
 .../components/SideBarV2/SideBarBanner.tsx    |  54 +++
 .../SideBarV2/SideBarButtonGroup.tsx          |  11 +
 .../SideBarV2/SideBarCollapseGroup.tsx        |  69 ++++
 .../components/SideBarV2/SideBarDivider.tsx   |   5 +
 .../SideBarFooter/SideBarFooter.styles.scss   |  23 ++
 .../SideBarV2/SideBarFooter/SideBarFooter.tsx |  10 +
 .../SideBarFooter/SideBarFooterContent.tsx    |  12 +
 .../SideBarV2/SideBarFooter/index.ts          |   2 +
 .../SideBarV2/SideBarGroupTitle.tsx           |  42 +++
 .../SideBarItem/SideBarItem.stories.tsx       |  39 +++
 .../SideBarItem/SideBarItem.styles.scss       | 172 ++++++++++
 .../SideBarV2/SideBarItem/SideBarItem.tsx     |  25 ++
 .../SideBarItem/SideBarItemAction.tsx         |  29 ++
 .../SideBarItem/SideBarItemAvatarWrapper.tsx  |  13 +
 .../SideBarItem/SideBarItemBadge.tsx          |  15 +
 .../SideBarV2/SideBarItem/SideBarItemCol.tsx  |  13 +
 .../SideBarItem/SideBarItemContent.tsx        |  18 +
 .../SideBarV2/SideBarItem/SideBarItemIcon.tsx |  32 ++
 .../SideBarV2/SideBarItem/SideBarItemMenu.tsx |  26 ++
 .../SideBarV2/SideBarItem/SideBarItemRow.tsx  |  13 +
 .../SideBarItem/SideBarItemStatusBullet.tsx   |  11 +
 .../SideBarItem/SideBarItemTimestamp.tsx      |  16 +
 .../SideBarItem/SideBarItemTitle.tsx          |  18 +
 .../SideBarV2/SideBarItem/SideBarListItem.tsx |  24 ++
 .../components/SideBarV2/SideBarItem/index.ts |  13 +
 .../src/components/SideBarV2/SideBarLink.tsx  |  52 +++
 .../SideBarMedia/SideBarMedia.stories.tsx     |  32 ++
 .../SideBarMedia/SideBarMedia.styles.scss     |  42 +++
 .../SideBarV2/SideBarMedia/SideBarMedia.tsx   |  11 +
 .../SideBarMedia/SideBarMediaController.tsx   |  21 ++
 .../SideBarMedia/SideBarMediaTitle.tsx        |  13 +
 .../SideBarV2/SideBarMedia/index.ts           |   3 +
 .../components/SideBarV2/SideBarSection.tsx   |  10 +
 .../src/components/SideBarV2/helpers.tsx      | 202 +++++++++++
 .../SideBarV2/hooks/useCollapse.tsx           |  66 ++++
 .../src/components/SideBarV2/index.tsx        |  15 +
 packages/fuselage/src/components/index.scss   |   1 +
 packages/fuselage/src/components/index.ts     |   1 +
 .../fuselage/src/styles/mixins/templates.scss |   8 +-
 47 files changed, 1845 insertions(+), 2 deletions(-)
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBar.spec.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBar.stories.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBar.styles.scss
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBar.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarAccordion.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarAccordionItem.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarAction.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarActions.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarBanner.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarButtonGroup.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarCollapseGroup.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarDivider.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.styles.scss
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooterContent.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarFooter/index.ts
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarGroupTitle.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.stories.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.styles.scss
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAction.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAvatarWrapper.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemBadge.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemCol.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemContent.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemIcon.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemMenu.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemRow.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemStatusBullet.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTimestamp.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTitle.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarListItem.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarItem/index.ts
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarLink.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.stories.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.styles.scss
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaController.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaTitle.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarMedia/index.ts
 create mode 100644 packages/fuselage/src/components/SideBarV2/SideBarSection.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/helpers.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/hooks/useCollapse.tsx
 create mode 100644 packages/fuselage/src/components/SideBarV2/index.tsx

diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.spec.tsx b/packages/fuselage/src/components/SideBarV2/SideBar.spec.tsx
new file mode 100644
index 0000000000..b93afec343
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBar.spec.tsx
@@ -0,0 +1,19 @@
+import { composeStories } from '@storybook/react';
+import { axe } from 'jest-axe';
+
+import { render } from '../../testing';
+import * as stories from './SideBar.stories';
+
+const { Default } = composeStories(stories);
+
+describe('[Sidebar Default story]', () => {
+  it('renders without crashing', () => {
+    render(<Default />);
+  });
+  it('should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.stories.tsx b/packages/fuselage/src/components/SideBarV2/SideBar.stories.tsx
new file mode 100644
index 0000000000..c9b0f14ed5
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBar.stories.tsx
@@ -0,0 +1,184 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  SideBar,
+  SideBarAccordion,
+  SideBarAccordionItem,
+  SideBarBanner,
+  SideBarCollapseGroup,
+  SideBarFooterContent,
+  SideBarItemAction,
+  SideBarLink,
+  SideBarItemBadge,
+  SideBarMedia,
+  SideBarMediaTitle,
+  SideBarMediaController,
+  SideBarListItem,
+  SideBarSection,
+  SideBarFooter,
+} from '.';
+import { IconButton, TextInput, Icon, Box } from '../..';
+import { Condensed } from './SideBarItem/SideBarItem.stories';
+import { GenericNoAvatarItem, MenuTemplate } from './helpers';
+
+export default {
+  title: 'Navigation/SideBar',
+  component: SideBar,
+} as Meta<typeof SideBar>;
+
+export const Default: StoryFn<typeof SideBar> = (props) => (
+  <Box h='90vh' w='x280'>
+    <SideBar {...props}>
+      <SideBarBanner
+        title='You’ve reached the limit active contacts this month'
+        linkText='Learn more'
+        linkProps={{ href: '#' }}
+        onClick={action('click')}
+        addon={<Icon name='warning' color='danger' size='x24' />}
+      />
+      <SideBarSection>
+        <TextInput
+          addon={<Icon name='magnifier' size='x20' />}
+          small
+          placeholder='Search'
+        />
+        <IconButton icon='sort' title='Sort' medium />
+      </SideBarSection>
+      <SideBarAccordion>
+        <SideBarAccordionItem
+          title='Omnichannel'
+          badge={
+            <SideBarItemBadge
+              title='25 unred messages'
+              children={25}
+              variant='primary'
+            />
+          }
+          defaultExpanded
+        >
+          <SideBarLink
+            icon='arrow-down-box'
+            href='#'
+            selected
+            badge={
+              <SideBarItemBadge
+                title='12 unread messages'
+                children={12}
+                variant='primary'
+              />
+            }
+            menu={<MenuTemplate />}
+          >
+            All
+          </SideBarLink>
+          <SideBarLink
+            icon='user'
+            href='#'
+            badge={
+              <SideBarItemBadge title='10 unread messages' children={10} />
+            }
+            menu={<MenuTemplate />}
+          >
+            Assigned to me
+          </SideBarLink>
+          <SideBarLink
+            icon='queue'
+            href='#'
+            badge={
+              <SideBarItemBadge
+                title='3 unread messages'
+                children={3}
+                variant='danger'
+              />
+            }
+            menu={<MenuTemplate />}
+          >
+            Unassigned
+          </SideBarLink>
+          <SideBarLink icon='pause' href='#' menu={<MenuTemplate />}>
+            On hold
+          </SideBarLink>
+        </SideBarAccordionItem>
+        <SideBarAccordionItem
+          title='Team chat'
+          defaultExpanded={true}
+          badge={
+            <SideBarItemBadge
+              title='99+ unread messages'
+              children='99+'
+              variant='danger'
+            />
+          }
+        >
+          <SideBarCollapseGroup
+            title='Favorites'
+            defaultExpanded
+            badge={
+              <SideBarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            {Array.from({ length: 4 }).map((_, i) => (
+              <GenericNoAvatarItem key={i} i={i} />
+            ))}
+          </SideBarCollapseGroup>
+          <SideBarCollapseGroup
+            title='Teams'
+            defaultExpanded
+            badge={
+              <SideBarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            <Condensed />
+            <SideBarListItem>
+              <SideBarItemAction onClick={action('add team')}>
+                Add team
+              </SideBarItemAction>
+            </SideBarListItem>
+          </SideBarCollapseGroup>
+          <SideBarCollapseGroup
+            title='Discussions'
+            defaultExpanded
+            badge={
+              <SideBarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            <Condensed />
+            <SideBarListItem>
+              <SideBarItemAction onClick={action('add team')}>
+                Add discussion
+              </SideBarItemAction>
+            </SideBarListItem>
+          </SideBarCollapseGroup>
+        </SideBarAccordionItem>
+      </SideBarAccordion>
+      <SideBarMedia>
+        <SideBarMediaTitle>3 calls in queue</SideBarMediaTitle>
+        <SideBarMediaController label='Call'>
+          <IconButton icon='user-arrow-right' small aria-label='user-forward' />
+          <IconButton icon='mic' small aria-label='mic' />
+          <IconButton icon='pause-unfilled' small aria-label='pause' />
+        </SideBarMediaController>
+        {/* <GenericCallItem is='div' /> */}
+      </SideBarMedia>
+      <SideBarFooter>
+        <SideBarFooterContent>Powered by Rocket.Chat</SideBarFooterContent>
+        <SideBarFooterContent color='titles-labels'>
+          Free edition
+        </SideBarFooterContent>
+      </SideBarFooter>
+    </SideBar>
+  </Box>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.styles.scss b/packages/fuselage/src/components/SideBarV2/SideBar.styles.scss
new file mode 100644
index 0000000000..1b3c0a26d0
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBar.styles.scss
@@ -0,0 +1,318 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+@import '../../styles/mixins/all.scss';
+
+@import './SideBarFooter/SideBarFooter.styles.scss';
+@import './SideBarItem/SideBarItem.styles.scss';
+@import './SideBarMedia/SideBarMedia.styles.scss';
+
+$sidebar-color-surface-default: theme(
+  'sidebar-color-surface-default',
+  colors.surface(sidebar)
+);
+$sidebar-color-surface-hover: theme(
+  'sidebar-color-surface-hover',
+  colors.surface(hover)
+);
+$sidebar-color-surface-selected: theme(
+  'sidebar-color-surface-selected',
+  colors.surface(selected)
+);
+
+$sidebar-color-font-default: theme(
+  'sidebar-color-font-default',
+  colors.font(default)
+);
+
+$sidebar-accordion-border-color: theme(
+  'sidebar-accordion-border-color',
+  colors.stroke(light)
+);
+
+$sidebar-link-color: theme('sidebar-link-color', colors.font(titles-labels));
+
+$sidebar-banner-background-default: theme(
+  'sidebar-banner-background-default',
+  colors.surface(sidebar)
+);
+$sidebar-banner-color-default: theme(
+  'sidebar-banner-color-default',
+  colors.font(titles-labels)
+);
+
+$sidebar-banner-background-info: theme(
+  'sidebar-banner-background-info',
+  colors.status-background(info)
+);
+$sidebar-banner-color-info: theme(
+  'sidebar-banner-background-info',
+  colors.status-font(on-info)
+);
+
+$sidebar-banner-background-success: theme(
+  'sidebar-banner-background-success',
+  colors.status-background(success)
+);
+$sidebar-banner-color-success: theme(
+  'sidebar-banner-background-success',
+  colors.status-font(on-success)
+);
+
+$sidebar-banner-background-warning: theme(
+  'sidebar-banner-background-warning',
+  colors.status-background(warning)
+);
+$sidebar-banner-color-warning: theme(
+  'sidebar-banner-background-warning',
+  colors.status-font(on-warning)
+);
+
+$sidebar-banner-background-danger: theme(
+  'sidebar-banner-background-danger',
+  colors.status-background(danger)
+);
+$sidebar-banner-color-danger: theme(
+  'sidebar-banner-background-danger',
+  colors.status-font(on-danger)
+);
+
+%highlighted {
+  color: $sidebar-item-color-highlighted;
+
+  font-weight: 600;
+}
+
+.rcx-sidebar-v2 {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  height: lengths.size(full);
+
+  color: $sidebar-color-font-default;
+  background-color: $sidebar-color-surface-default;
+
+  &--divider {
+    border-color: theme(
+      'sidebar-color-stroke-extra-light',
+      colors.stroke(light)
+    );
+  }
+
+  &-section {
+    display: flex;
+    align-items: center;
+
+    height: lengths.size(44);
+
+    padding-inline: lengths.padding(16);
+
+    gap: lengths.padding(8);
+  }
+
+  &-accordion {
+    display: flex;
+    overflow: hidden;
+    flex-flow: column nowrap;
+    justify-content: stretch;
+    flex: 0 1 auto;
+
+    height: lengths.size(full);
+
+    &__wrapper {
+      display: flex;
+      overflow: scroll;
+      flex-direction: column;
+    }
+  }
+
+  &-collapse-group,
+  &-accordion-item {
+    display: flex;
+    flex-flow: column nowrap;
+
+    &__bar {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      min-height: lengths.size(24);
+      padding: lengths.padding(8) lengths.padding(16);
+
+      text-align: start;
+
+      color: colors.font(default);
+
+      background-color: $sidebar-color-surface-default;
+      column-gap: lengths.padding(4);
+
+      &[tabindex] {
+        @include clickable;
+        @include focus-state($shadow: false);
+
+        &.hover,
+        &:hover {
+          background-color: colors.surface(tint);
+        }
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+
+        color: colors.font(disabled);
+        background-color: colors.surface(disabled);
+      }
+    }
+
+    &__title {
+      flex: 1 1 lengths.size(none);
+
+      margin: lengths.margin(none);
+
+      white-space: nowrap;
+
+      @include typography.use-text-ellipsis;
+      @include typography.use-font-scale(c2);
+    }
+
+    &__panel {
+      visibility: hidden;
+      overflow: hidden;
+
+      height: lengths.size(none);
+      margin: lengths.margin(none);
+      padding: lengths.padding(none);
+
+      list-style: none;
+
+      &--expanded {
+        visibility: visible;
+
+        flex-grow: 1;
+
+        height: 100%;
+        padding-block-start: lengths.padding(4);
+        padding-block-end: lengths.padding(8);
+      }
+    }
+  }
+
+  &-accordion-item {
+    flex: 0 1 0;
+
+    border: 2px solid transparent;
+    border-bottom: lengths.border-width(default) solid
+      $sidebar-accordion-border-color;
+
+    &__bar {
+      position: sticky;
+
+      z-index: 1;
+      top: 0;
+
+      padding: lengths.padding(12) lengths.padding(16) lengths.padding(12)
+        lengths.padding(none);
+
+      border-radius: lengths.border-radius(small);
+
+      background-color: colors.surface(sidebar);
+
+      .rcx-sidebar-v2-accordion-item__chevron {
+        visibility: hidden;
+      }
+
+      &:focus-visible,
+      &.hover,
+      &:hover {
+        .rcx-sidebar-v2-accordion-item__chevron {
+          visibility: visible;
+        }
+      }
+    }
+
+    &__title {
+      @include typography.use-font-scale(h5);
+    }
+  }
+
+  &-link {
+    @include use-link-colors($color: $sidebar-link-color);
+  }
+
+  &-banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: lengths.padding(16);
+
+    color: $sidebar-banner-color-default;
+    border-bottom: lengths.border-width(default) solid
+      $sidebar-accordion-border-color;
+    background-color: $sidebar-banner-background-default;
+    gap: lengths.padding(12);
+
+    &__addon {
+      display: flex;
+      align-items: center;
+    }
+
+    &__title {
+      margin: 0;
+      padding: 0;
+
+      @include typography.use-font-scale(h5);
+    }
+
+    &__link {
+      @include typography.use-font-scale(p2m);
+      @include clickable();
+
+      display: inline-block;
+
+      text-decoration: underline;
+    }
+
+    &--info {
+      color: $sidebar-banner-color-info;
+      background-color: $sidebar-banner-background-info;
+    }
+
+    &--success {
+      color: $sidebar-banner-color-success;
+      background-color: $sidebar-banner-background-success;
+    }
+
+    &--warning {
+      color: $sidebar-banner-color-warning;
+      background-color: $sidebar-banner-background-warning;
+    }
+
+    &--danger {
+      color: $sidebar-banner-color-danger;
+      background-color: $sidebar-banner-background-danger;
+    }
+  }
+
+  &--collapsed {
+    overflow: hidden;
+
+    width: lengths.size(48);
+
+    &:not(:hover) {
+      .rcx-sidebar-v2-item.rcx-sidebar-v2-link > .rcx-sidebar-v2-item__title,
+      .rcx-sidebar-v2-banner__content {
+        display: none;
+      }
+
+      .rcx-sidebar-v2-media__title,
+      .rcx-sidebar-v2-footer {
+        visibility: hidden;
+
+        white-space: nowrap;
+      }
+    }
+  }
+}
diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.tsx b/packages/fuselage/src/components/SideBarV2/SideBar.tsx
new file mode 100644
index 0000000000..9467ad4384
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBar.tsx
@@ -0,0 +1,20 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+
+type SideBarProps = { collapsed?: boolean } & HTMLAttributes<HTMLElement>;
+
+export const SideBar = forwardRef<HTMLElement, SideBarProps>(
+  ({ collapsed, className, ...props }, ref) => (
+    <nav
+      ref={ref}
+      className={[
+        'rcx-box rcx-box--full rcx-sidebar-v2',
+        'rcx-box--animated',
+        collapsed && 'rcx-sidebar-v2--collapsed',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    />
+  )
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarAccordion.tsx b/packages/fuselage/src/components/SideBarV2/SideBarAccordion.tsx
new file mode 100644
index 0000000000..777969b358
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarAccordion.tsx
@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarAccordion = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-accordion rcx-box--animated',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
+    <div className='rcx-sidebar-v2-accordion__wrapper'>{children}</div>
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarAccordionItem.tsx b/packages/fuselage/src/components/SideBarV2/SideBarAccordionItem.tsx
new file mode 100644
index 0000000000..df25c629b1
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarAccordionItem.tsx
@@ -0,0 +1,79 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import { Chevron } from '../Chevron';
+import { useCollapse } from './hooks/useCollapse';
+
+type SideBarAccordionItemProps = {
+  children?: ReactNode;
+  className?: string;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+  expanded?: boolean;
+  title: ReactNode;
+  noncollapsible?: boolean;
+  badge?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+
+export const SideBarAccordionItem = ({
+  children,
+  title,
+  badge,
+  noncollapsible,
+  disabled,
+  expanded: propExpanded,
+  defaultExpanded,
+  tabIndex,
+  ...props
+}: SideBarAccordionItemProps) => {
+  const { barProps, expanded, panelExpanded, panelId, titleId } = useCollapse({
+    expanded: propExpanded,
+    defaultExpanded,
+    tabIndex,
+    disabled,
+    noncollapsible,
+  });
+
+  return (
+    <section
+      className='rcx-box rcx-box--full rcx-sidebar-v2-accordion-item'
+      {...props}
+    >
+      <div
+        role='button'
+        className={[
+          'rcx-box rcx-box--full rcx-sidebar-v2-accordion-item__bar rcx-box--animated',
+          disabled && 'rcx-sidebar-v2-accordion-item__bar--disabled',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...barProps}
+      >
+        {!noncollapsible && (
+          <Chevron
+            className='rcx-sidebar-v2-accordion-item__chevron'
+            size='x16'
+            right={!expanded}
+          />
+        )}
+        {title && (
+          <h5 className='rcx-sidebar-v2-accordion-item__title' id={titleId}>
+            {title}
+          </h5>
+        )}
+        {!expanded && badge && badge}
+      </div>
+      <div
+        className={[
+          'rcx-sidebar-v2-accordion-item__panel',
+          'rcx-box--animated',
+          panelExpanded && 'rcx-sidebar-v2-accordion-item__panel--expanded',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        id={panelId}
+      >
+        {children}
+      </div>
+    </section>
+  );
+};
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarAction.tsx b/packages/fuselage/src/components/SideBarV2/SideBarAction.tsx
new file mode 100644
index 0000000000..9e2d59f7e1
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarAction.tsx
@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
+
+import { IconButton } from '../Button';
+
+type SideBarActionProps = ComponentProps<typeof IconButton>;
+
+export const SideBarAction = forwardRef(function SidebarAction(
+  props: SideBarActionProps,
+  ref: Ref<HTMLElement>
+) {
+  return <IconButton small ref={ref} {...props} />;
+});
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarActions.tsx b/packages/fuselage/src/components/SideBarV2/SideBarActions.tsx
new file mode 100644
index 0000000000..d632fddd39
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarActions.tsx
@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+type SideBarActionsProps = ComponentProps<typeof ButtonGroup>;
+
+export const SideBarActions = forwardRef(function SideBarActions(
+  props: SideBarActionsProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return <ButtonGroup ref={ref} {...props} />;
+});
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarBanner.tsx b/packages/fuselage/src/components/SideBarV2/SideBarBanner.tsx
new file mode 100644
index 0000000000..4230735378
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarBanner.tsx
@@ -0,0 +1,54 @@
+import type { AllHTMLAttributes, ReactNode } from 'react';
+
+import { IconButton } from '../Button';
+
+type VariantType = 'default' | 'info' | 'success' | 'warning' | 'danger';
+
+type SideBarBannerProps = {
+  title?: ReactNode;
+  linkText?: string;
+  linkProps?: AllHTMLAttributes<HTMLAnchorElement>;
+  onClick?: () => void;
+  variant?: VariantType;
+  onClose?: () => void;
+  children?: ReactNode;
+  addon?: ReactNode;
+};
+
+export const SideBarBanner = ({
+  title,
+  linkText,
+  linkProps,
+  variant = 'default',
+  addon,
+  onClose,
+  children,
+  ...props
+}: SideBarBannerProps) => (
+  <div
+    className={`rcx-box rcx-box--full rcx-sidebar-v2-banner rcx-sidebar-v2-banner--${variant}`}
+    {...props}
+  >
+    <div className='rcx-box rcx-box--full rcx-sidebar-v2-banner__content'>
+      {title && (
+        <h5 className='rcx-box rcx-box--full rcx-sidebar-v2-banner__title'>
+          {title}
+        </h5>
+      )}
+      {linkText && (
+        <a
+          className='rcx-box rcx-box--full rcx-sidebar-v2-banner__link'
+          tabIndex={0}
+          {...linkProps}
+        >
+          {linkText}
+        </a>
+      )}
+      {children}
+    </div>
+    <div className='rcx-box rcx-box--full rcx-sidebar-v2-banner__addon'>
+      {addon}
+      {onClose && <IconButton onClick={onClose} tiny icon='cross' />}
+    </div>
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarButtonGroup.tsx b/packages/fuselage/src/components/SideBarV2/SideBarButtonGroup.tsx
new file mode 100644
index 0000000000..7049c3feba
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarButtonGroup.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+export const SideBarButtonGroup = ({
+  align = 'end',
+  small = true,
+  ...props
+}: ComponentProps<typeof ButtonGroup>) => (
+  <ButtonGroup align={align} small={small} {...props} />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarCollapseGroup.tsx b/packages/fuselage/src/components/SideBarV2/SideBarCollapseGroup.tsx
new file mode 100644
index 0000000000..37a1ff3bf2
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarCollapseGroup.tsx
@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { SideBarGroupTitle } from './SideBarGroupTitle';
+import { useCollapse } from './hooks/useCollapse';
+
+type SideBarCollapseGroupProps = {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  tabIndex?: number;
+  title: string;
+  badge?: ReactNode;
+  actions?: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const SideBarCollapseGroup = forwardRef<
+  HTMLDivElement,
+  SideBarCollapseGroupProps
+>(
+  (
+    {
+      expanded: propExpanded,
+      defaultExpanded,
+      tabIndex,
+      children,
+      badge,
+      title,
+      ...props
+    }: SideBarCollapseGroupProps,
+    ref
+  ) => {
+    const { barProps, expanded, panelExpanded, panelId, titleId } = useCollapse(
+      {
+        expanded: propExpanded,
+        defaultExpanded,
+        tabIndex,
+      }
+    );
+
+    return (
+      <section
+        className='rcx-box rcx-box--full rcx-sidebar-v2-collapse-group'
+        {...props}
+      >
+        <SideBarGroupTitle
+          expanded={expanded}
+          title={title}
+          titleId={titleId}
+          badge={badge}
+          barProps={barProps}
+          role='button'
+        />
+        <div
+          role='list'
+          ref={ref}
+          className={[
+            'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__panel rcx-box--animated',
+            panelExpanded && 'rcx-sidebar-v2-collapse-group__panel--expanded',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          id={panelId}
+        >
+          {children}
+        </div>
+      </section>
+    );
+  }
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarDivider.tsx b/packages/fuselage/src/components/SideBarV2/SideBarDivider.tsx
new file mode 100644
index 0000000000..5c1aef3420
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarDivider.tsx
@@ -0,0 +1,5 @@
+import { Divider } from '../Divider';
+
+export const SideBarDivider = () => (
+  <Divider rcx-sidebar-v2--divider mbs={-2} mbe={0} />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.styles.scss b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.styles.scss
new file mode 100644
index 0000000000..0c129b0603
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.styles.scss
@@ -0,0 +1,23 @@
+@use '../../../styles/colors.scss';
+@use '../../../styles/lengths.scss';
+@use '../../../styles/typography.scss';
+@import '../../../styles/mixins/all.scss';
+
+.rcx-sidebar-v2-footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  height: lengths.size(48);
+  padding-block: lengths.padding(12) lengths.padding(8);
+  padding-inline: lengths.padding(16);
+
+  color: colors.font(default);
+
+  background-color: colors.surface(sidebar);
+  gap: lengths.padding(4);
+
+  &__content {
+    @include typography.use-font-scale(micro);
+  }
+}
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.tsx b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.tsx
new file mode 100644
index 0000000000..0dc7888649
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooter.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarFooter = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLElement>) => (
+  <footer className='rcx-sidebar-v2-footer' {...props}>
+    {children}
+  </footer>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooterContent.tsx b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooterContent.tsx
new file mode 100644
index 0000000000..c0403dfba4
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarFooter/SideBarFooterContent.tsx
@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+
+import Box from '../../Box';
+
+export const SideBarFooterContent = ({
+  children,
+  ...props
+}: ComponentProps<typeof Box>) => (
+  <Box className='rcx-sidebar-v2-footer__content' {...props}>
+    {children}
+  </Box>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarFooter/index.ts b/packages/fuselage/src/components/SideBarV2/SideBarFooter/index.ts
new file mode 100644
index 0000000000..09024d0ee9
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarFooter/index.ts
@@ -0,0 +1,2 @@
+export * from './SideBarFooter';
+export * from './SideBarFooterContent';
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarGroupTitle.tsx b/packages/fuselage/src/components/SideBarV2/SideBarGroupTitle.tsx
new file mode 100644
index 0000000000..cb4abbe25c
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarGroupTitle.tsx
@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+import { Chevron } from '../Chevron';
+
+type SideBarGroupTitleProps = {
+  expanded?: boolean;
+  title?: string;
+  titleId?: string;
+  badge?: React.ReactNode;
+  barProps?: React.AriaAttributes;
+} & HTMLAttributes<HTMLDivElement>;
+export const SideBarGroupTitle = ({
+  title,
+  titleId,
+  badge,
+  barProps,
+  expanded,
+  ...props
+}: SideBarGroupTitleProps) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full',
+      'rcx-sidebar-v2-collapse-group__bar rcx-box--animated',
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...barProps}
+    {...props}
+  >
+    {expanded !== undefined && <Chevron size='x20' right={!expanded} />}
+    {title && (
+      <h4
+        className='rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title'
+        id={titleId}
+      >
+        {title}
+      </h4>
+    )}
+    {!expanded && badge && badge}
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.stories.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.stories.tsx
new file mode 100644
index 0000000000..0039f124be
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { SideBarListItem } from '../..';
+import {
+  GenericCondensedItem,
+  GenericExtendedItem,
+  GenericMediumItem,
+  decorators,
+} from '../helpers';
+
+export default {
+  title: 'Navigation/SideBar/Item',
+  component: SideBarListItem,
+  decorators,
+} satisfies Meta<typeof SideBarListItem>;
+
+export const Condensed: StoryFn<typeof SideBarListItem> = () => (
+  <>
+    {Array.from({ length: 8 }).map((_, i) => (
+      <GenericCondensedItem key={i} i={i} />
+    ))}
+  </>
+);
+
+export const Medium: StoryFn<typeof SideBarListItem> = () => (
+  <>
+    {Array.from({ length: 8 }).map((_, i) => (
+      <GenericMediumItem key={i} i={i} />
+    ))}
+  </>
+);
+
+export const Extended: StoryFn<typeof SideBarListItem> = () => (
+  <>
+    {Array.from({ length: 8 }).map((_, i) => (
+      <GenericExtendedItem key={i} i={i} />
+    ))}
+  </>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.styles.scss b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.styles.scss
new file mode 100644
index 0000000000..6df459a659
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.styles.scss
@@ -0,0 +1,172 @@
+@use '../../../styles/colors.scss';
+@use '../../../styles/lengths.scss';
+@use '../../../styles/typography.scss';
+@import '../../../styles/mixins/all.scss';
+
+$sidebar-color-surface-hover: theme(
+  'sidebar-color-surface-hover',
+  colors.surface(hover)
+);
+$sidebar-color-surface-selected: theme(
+  'sidebar-color-surface-selected',
+  colors.surface(selected)
+);
+
+$sidebar-color-font-active: theme(
+  'sidebar-color-font-active',
+  colors.font(titles-labels)
+);
+
+%sidebar-item-base {
+  @include use-link-colors($color: colors.font(default));
+  @include typography.use-font-scale(p2);
+  @include focus-state($shadow: false);
+
+  display: flex;
+
+  align-items: center;
+
+  border-radius: lengths.border-radius(small);
+}
+
+%sidebar-item-clickable {
+  @include clickable;
+  @include on-hover {
+    background-color: $sidebar-color-surface-hover;
+  }
+}
+
+%highlighted {
+  color: $sidebar-item-color-highlighted;
+
+  font-weight: 600;
+}
+
+@mixin highlighted {
+  &--highlighted {
+    @extend %highlighted;
+  }
+}
+
+.rcx-sidebar-v2-item {
+  @extend %sidebar-item-base;
+
+  &:is(a),
+  &:is(div[role='button']) {
+    @extend %sidebar-item-clickable;
+  }
+  @include typography.use-font-scale(p2);
+  @include typography.use-text-ellipsis;
+
+  justify-content: flex-start;
+
+  align-items: center;
+
+  padding: calc(lengths.padding(4) - lengths.border-width('default'))
+    calc(lengths.padding(16) - lengths.border-width('default'));
+
+  white-space: nowrap;
+
+  text-decoration: none;
+  gap: lengths.padding(4);
+
+  &:active {
+    color: $sidebar-color-font-active;
+  }
+
+  &:active:not(:focus-within),
+  &--selected {
+    background-color: $sidebar-color-surface-selected;
+  }
+
+  &__title {
+    @include highlighted;
+
+    overflow: hidden;
+    flex: 1 0 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+
+    white-space: nowrap;
+
+    @include typography.use-text-ellipsis;
+  }
+
+  &__avatar {
+    display: flex;
+  }
+
+  &__icon {
+    @include highlighted;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: lengths.size(20);
+    height: lengths.size(20);
+  }
+
+  &__subtitle {
+    @include highlighted;
+
+    flex-grow: 1;
+    @include typography.use-font-scale(c1);
+    @include typography.use-text-ellipsis;
+  }
+
+  &__timestamp {
+    @include typography.use-font-scale(c2);
+  }
+
+  &__content {
+    flex-grow: 1;
+  }
+
+  &__status-bullet {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: lengths.padding(4);
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: lengths.padding(4);
+  }
+
+  &__col {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    width: lengths.size(full);
+  }
+
+  &__menu-wrapper {
+    flex-shrink: 0;
+
+    width: 0;
+    height: lengths.size(20);
+
+    margin-inline-end: -4px;
+
+    opacity: 0;
+  }
+
+  &:hover &__menu-wrapper,
+  &.focus-within &__menu-wrapper,
+  &:focus-within &__menu-wrapper {
+    display: flex;
+    align-items: center;
+
+    width: lengths.size(20);
+    height: lengths.size(20);
+
+    margin-inline-end: lengths.margin(none);
+
+    opacity: 1;
+  }
+}
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.tsx
new file mode 100644
index 0000000000..6ec1147fb5
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItem.tsx
@@ -0,0 +1,25 @@
+import type { AllHTMLAttributes } from 'react';
+
+export const SideBarItem = ({
+  selected,
+  className,
+  children,
+  is: Tag = 'a',
+  ...props
+}: {
+  selected?: boolean;
+  is?: React.ElementType;
+} & AllHTMLAttributes<HTMLAnchorElement>) => (
+  <Tag
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item',
+      selected && 'rcx-sidebar-v2-item--selected',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
+    {children}
+  </Tag>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAction.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAction.tsx
new file mode 100644
index 0000000000..ef119c3b34
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAction.tsx
@@ -0,0 +1,29 @@
+import type { Keys as Icons } from '@rocket.chat/icons';
+import type { HTMLAttributes } from 'react';
+
+import { Icon } from '../../Icon';
+
+export const SideBarItemAction = ({
+  children,
+  className,
+  icon = 'plus-small',
+  ...props
+}: {
+  onClick: (e: Event) => void;
+  icon?: Icons;
+} & HTMLAttributes<HTMLDivElement>) => (
+  <div
+    role='button'
+    tabIndex={0}
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item__action',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
+    <Icon name={icon} size='x20' />
+    {children}
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAvatarWrapper.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAvatarWrapper.tsx
new file mode 100644
index 0000000000..014fcf91e6
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemAvatarWrapper.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemAvatarWrapper = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-box rcx-box--full rcx-sidebar-v2-item__avatar', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemBadge.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemBadge.tsx
new file mode 100644
index 0000000000..f3e93722ed
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemBadge.tsx
@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { Badge } from '../../Badge';
+
+export const SideBarItemBadge = ({
+  className,
+  ...props
+}: ComponentProps<typeof Badge>) => (
+  <Badge
+    className={['rcx-box rcx-box--full rcx-sidebar-v2-item__badge', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemCol.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemCol.tsx
new file mode 100644
index 0000000000..c6da15d173
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemCol.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemCol = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-box rcx-box--full rcx-sidebar-v2-item__col', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemContent.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemContent.tsx
new file mode 100644
index 0000000000..02819375d8
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemContent.tsx
@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemContent = ({
+  className,
+  unread,
+  ...props
+}: { unread?: boolean } & HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item__subtitle',
+      unread && 'rcx-sidebar-v2-item__subtitle--highlighted',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemIcon.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemIcon.tsx
new file mode 100644
index 0000000000..60929b1fd6
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemIcon.tsx
@@ -0,0 +1,32 @@
+import type { Keys as IconKeys } from '@rocket.chat/icons';
+import { isValidElement, type ComponentProps, type ReactElement } from 'react';
+
+import { Icon } from '../../Icon';
+
+type SideBarItemIconProps = Omit<ComponentProps<typeof Icon>, 'name'> & {
+  icon: IconKeys | ReactElement;
+  highlighted?: boolean;
+};
+
+export const SideBarItemIcon = ({
+  icon,
+  className,
+  highlighted,
+  ...props
+}: SideBarItemIconProps) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item__icon',
+      highlighted && 'rcx-sidebar-v2-item__icon--highlighted',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+  >
+    {isValidElement(icon) ? (
+      icon
+    ) : (
+      <Icon name={icon as IconKeys} size='x20' {...props} />
+    )}
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemMenu.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemMenu.tsx
new file mode 100644
index 0000000000..90831d3397
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemMenu.tsx
@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+
+import { appendClassName } from '../../../helpers/appendClassName';
+import { patchChildren } from '../../../helpers/patchChildren';
+
+export const SideBarItemMenu = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className='rcx-box rcx-box--full rcx-sidebar-v2-item__menu-wrapper rcx-box--animated'
+    {...props}
+  >
+    {patchChildren(
+      <span className='rcx-box rcx-box--full rcx-sidebar-v2-item__menu'>
+        {children}
+      </span>,
+      (childProps: { className: string | string[] }) => ({
+        className: appendClassName(
+          childProps.className,
+          'rcx-sidebar-v2-item__menu'
+        ),
+      })
+    )}
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemRow.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemRow.tsx
new file mode 100644
index 0000000000..8efa32479f
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemRow.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemRow = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-box rcx-box--full rcx-sidebar-v2-item__row', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemStatusBullet.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemStatusBullet.tsx
new file mode 100644
index 0000000000..52c59f6e8a
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemStatusBullet.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { StatusBullet } from '../../StatusBullet';
+
+export const SideBarItemStatusBullet = (
+  props: ComponentProps<typeof StatusBullet>
+) => (
+  <div className='rcx-box rcx-box--full rcx-sidebar-v2-item__status-bullet'>
+    <StatusBullet {...props} />
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTimestamp.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTimestamp.tsx
new file mode 100644
index 0000000000..c2dd0667af
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTimestamp.tsx
@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemTimestamp = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item__timestamp',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTitle.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTitle.tsx
new file mode 100644
index 0000000000..dd700899c9
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarItemTitle.tsx
@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarItemTitle = ({
+  className,
+  unread,
+  ...props
+}: { unread?: boolean } & HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-item__title',
+      unread && 'rcx-sidebar-v2-item__title--highlighted',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarListItem.tsx b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarListItem.tsx
new file mode 100644
index 0000000000..064a185839
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/SideBarListItem.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+type SideBarListItemProps = {
+  selected?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const SideBarListItem = forwardRef<HTMLDivElement, SideBarListItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      role='listitem'
+      className={[
+        'rcx-box rcx-box--full rcx-sidebar-item__list-item',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarItem/index.ts b/packages/fuselage/src/components/SideBarV2/SideBarItem/index.ts
new file mode 100644
index 0000000000..462331e249
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarItem/index.ts
@@ -0,0 +1,13 @@
+export * from './SideBarItem';
+export * from './SideBarItemAction';
+export * from './SideBarItemAvatarWrapper';
+export * from './SideBarItemBadge';
+export * from './SideBarItemIcon';
+export * from './SideBarItemMenu';
+export * from './SideBarItemTitle';
+export * from './SideBarItemRow';
+export * from './SideBarItemCol';
+export * from './SideBarItemTimestamp';
+export * from './SideBarListItem';
+export * from './SideBarItemContent';
+export * from './SideBarItemStatusBullet';
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarLink.tsx b/packages/fuselage/src/components/SideBarV2/SideBarLink.tsx
new file mode 100644
index 0000000000..627d886375
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarLink.tsx
@@ -0,0 +1,52 @@
+import type { Keys as Icons } from '@rocket.chat/icons';
+import type { LinkHTMLAttributes, ReactNode } from 'react';
+
+import { appendClassName } from '../../helpers/appendClassName';
+import { patchChildren } from '../../helpers/patchChildren';
+import { Icon } from '../Icon';
+
+export const SideBarLink = ({
+  selected,
+  icon,
+  badge,
+  menu,
+  ...props
+}: {
+  selected?: boolean;
+  icon?: Icons;
+  badge?: ReactNode;
+  menu?: ReactNode;
+} & LinkHTMLAttributes<HTMLAnchorElement>) => (
+  <a
+    className={[
+      'rcx-box rcx-box--full',
+      'rcx-sidebar-v2-link',
+      'rcx-sidebar-v2-item',
+      selected && 'rcx-sidebar-v2-item--selected',
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    onClick={(e) => e.stopPropagation()}
+    {...props}
+  >
+    {icon && (
+      <Icon name={icon} size='x20' className='rcx-sidebar-v2-item__icon' />
+    )}
+    <span className='rcx-box rcx-box--full rcx-sidebar-v2-item__title'>
+      {props.children}
+    </span>
+    {badge}
+    {menu &&
+      patchChildren(
+        <span className='rcx-box rcx-box--full rcx-sidebar-v2-item__menu-wrapper'>
+          {menu}
+        </span>,
+        (childProps: { className: string | string[] }) => ({
+          className: appendClassName(
+            childProps.className,
+            'rcx-box rcx-box--full rcx-sidebar-v2-item__menu rcx-box--animated'
+          ),
+        })
+      )}
+  </a>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.stories.tsx b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.stories.tsx
new file mode 100644
index 0000000000..cf4f0d7b33
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.stories.tsx
@@ -0,0 +1,32 @@
+import type { StoryFn, Meta } from '@storybook/react';
+
+import {
+  SideBar,
+  SideBarMedia,
+  SideBarMediaTitle,
+  SideBarMediaController,
+  Box,
+  IconButton,
+} from '../..';
+import { GenericCallItem } from '../helpers';
+
+export default {
+  title: 'Navigation/SideBar/Media',
+  component: SideBar,
+} satisfies Meta<typeof SideBar>;
+
+export const Default: StoryFn<typeof SideBar> = () => (
+  <Box>
+    <SideBar>
+      <SideBarMedia>
+        <SideBarMediaTitle>3 calls in queue</SideBarMediaTitle>
+        <SideBarMediaController label='Call'>
+          <IconButton icon='user-arrow-right' small aria-label='user-forward' />
+          <IconButton icon='mic' small aria-label='mic' />
+          <IconButton icon='pause-unfilled' small aria-label='pause' />
+        </SideBarMediaController>
+        <GenericCallItem is='div' />
+      </SideBarMedia>
+    </SideBar>
+  </Box>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.styles.scss b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.styles.scss
new file mode 100644
index 0000000000..49521890e4
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.styles.scss
@@ -0,0 +1,42 @@
+@use '../../../styles/colors.scss';
+@use '../../../styles/lengths.scss';
+@use '../../../styles/typography.scss';
+@import '../../../styles/mixins/all.scss';
+
+$sidebar-media-color: theme('sidebar-media-color', colors.font(titles-labels));
+
+$sidebar-media-border-color: theme(
+  'sidebar-media-border-color',
+  colors.stroke(light)
+);
+
+.rcx-sidebar-v2-media {
+  padding-block: lengths.padding(8);
+
+  color: $sidebar-media-color;
+  border-bottom: lengths.border-width(default) solid $sidebar-media-border-color;
+  background-color: $sidebar-color-surface-default;
+
+  &__title {
+    @include typography.use-font-scale(c1);
+    flex-grow: 1;
+
+    padding-block-end: lengths.padding(4);
+
+    padding-inline: lengths.padding(16);
+
+    text-align: center;
+  }
+
+  &__controller {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding-inline: lengths.padding(16);
+
+    &__label {
+      @include typography.use-font-scale(p2);
+    }
+  }
+}
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.tsx b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.tsx
new file mode 100644
index 0000000000..548683ff14
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMedia.tsx
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarMedia = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidebar-v2-media', className].filter(Boolean).join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaController.tsx b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaController.tsx
new file mode 100644
index 0000000000..c6cb23e920
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaController.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+
+import { SideBarButtonGroup } from '../SideBarButtonGroup';
+
+export const SideBarMediaController = ({
+  className,
+  label,
+  children,
+  ...props
+}: { label?: string } & HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidebar-v2-media__controller', className]
+      .filter(Boolean)
+      .join(' ')}
+  >
+    <div className='rcx-sidebar-v2-media__controller__label'>{label}</div>
+    <SideBarButtonGroup small align='end' {...props}>
+      {children}
+    </SideBarButtonGroup>
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaTitle.tsx b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaTitle.tsx
new file mode 100644
index 0000000000..b240c393c9
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/SideBarMediaTitle.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SideBarMediaTitle = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidebar-v2-media__title', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarMedia/index.ts b/packages/fuselage/src/components/SideBarV2/SideBarMedia/index.ts
new file mode 100644
index 0000000000..6d3ef31a64
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarMedia/index.ts
@@ -0,0 +1,3 @@
+export * from './SideBarMedia';
+export * from './SideBarMediaController';
+export * from './SideBarMediaTitle';
diff --git a/packages/fuselage/src/components/SideBarV2/SideBarSection.tsx b/packages/fuselage/src/components/SideBarV2/SideBarSection.tsx
new file mode 100644
index 0000000000..d411edcad1
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/SideBarSection.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+import { SideBarDivider } from './SideBarDivider';
+
+export const SideBarSection = (props: HTMLAttributes<HTMLDivElement>) => (
+  <div>
+    <div className='rcx-box rcx-box--full rcx-sidebar-v2-section' {...props} />
+    <SideBarDivider />
+  </div>
+);
diff --git a/packages/fuselage/src/components/SideBarV2/helpers.tsx b/packages/fuselage/src/components/SideBarV2/helpers.tsx
new file mode 100644
index 0000000000..640caecf98
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/helpers.tsx
@@ -0,0 +1,202 @@
+import type { Decorator } from '@storybook/react';
+import type { ComponentProps, ReactElement } from 'react';
+
+import {
+  SideBar,
+  SideBarAccordion,
+  SideBarAccordionItem,
+  SideBarActions,
+  SideBarButtonGroup,
+  SideBarCollapseGroup,
+  SideBarFooter,
+  SideBarFooterContent,
+  SideBarItem,
+  SideBarItemAvatarWrapper,
+  SideBarItemBadge,
+  SideBarItemCol,
+  SideBarItemContent,
+  SideBarItemIcon,
+  SideBarItemMenu,
+  SideBarItemRow,
+  SideBarItemStatusBullet,
+  SideBarItemTimestamp,
+  SideBarItemTitle,
+  SideBarListItem,
+} from '.';
+import { Avatar, Box, IconButton, MenuV2 as Menu, MenuItem } from '../..';
+
+export const leterAvatarUrls = [
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3crect width='100%25' height='100%25' fill='%2310529E'/%3e%3ctext x='50%25' y='50%25' dy='0.36em' text-anchor='middle' pointer-events='none' fill='white' font-size='125' font-family='Helvetica%2c sans-serif'%3eB%3c/text%3e%3c/svg%3e",
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3crect width='100%25' height='100%25' fill='%23158D65'/%3e%3ctext x='50%25' y='50%25' dy='0.36em' text-anchor='middle' pointer-events='none' fill='white' font-size='125' font-family='Helvetica%2c sans-serif'%3eG%3c/text%3e%3c/svg%3e",
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3crect width='100%25' height='100%25' fill='%237F1B9F'/%3e%3ctext x='50%25' y='50%25' dy='0.36em' text-anchor='middle' pointer-events='none' fill='white' font-size='125' font-family='Helvetica%2c sans-serif'%3eP%3c/text%3e%3c/svg%3e",
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3crect width='100%25' height='100%25' fill='%23B68D00'/%3e%3ctext x='50%25' y='50%25' dy='0.36em' text-anchor='middle' pointer-events='none' fill='white' font-size='125' font-family='Helvetica%2c sans-serif'%3eY%3c/text%3e%3c/svg%3e",
+];
+
+export const names = [
+  'Marvin Black',
+  'Esther Miles',
+  'Leroy Jenkins',
+  'Morgan Freeman looooooooooong looooooooooong looooooooooong name',
+  'John Doe',
+  'Jane Doe',
+  'Baz Qux',
+  'Alice Bob',
+  'Charlie Delta',
+  'Eve Mallory',
+];
+
+export const MenuTemplate = () => (
+  <Menu mini aria-label='Options' title='Options'>
+    <MenuItem key='hide'>Hide</MenuItem>
+    <MenuItem key='discussion'>Mark unread</MenuItem>
+    <MenuItem key='unfavorite'>Unfavorite</MenuItem>
+  </Menu>
+);
+
+export const GenericCondensedItem = ({ i = 0 }: { i: number }) => (
+  <SideBarListItem>
+    <SideBarItem selected={i === 2} href='#'>
+      <SideBarItemAvatarWrapper>
+        <Avatar size='x20' url={leterAvatarUrls[i % 4]} alt='avatar' />
+      </SideBarItemAvatarWrapper>
+      <SideBarItemIcon highlighted={i % 2 !== 0} icon='balloons' />
+      <SideBarItemTitle unread={i % 2 !== 0}>{names[i % 10]}</SideBarItemTitle>
+      {i % 2 !== 0 && (
+        <SideBarItemBadge
+          title='unread messages'
+          children={Math.floor(Math.random() * 10) + 1}
+        />
+      )}
+      {i === 0 && (
+        <SideBarActions>
+          <IconButton aria-label='phone' tiny secondary success icon='phone' />
+          <IconButton
+            aria-label='phone-off'
+            tiny
+            secondary
+            danger
+            icon='phone-off'
+          />
+        </SideBarActions>
+      )}
+      <SideBarItemMenu children={<MenuTemplate />} />
+    </SideBarItem>
+  </SideBarListItem>
+);
+
+export const GenericNoAvatarItem = ({ i = 0 }: { i: number }) => (
+  <SideBarListItem>
+    <SideBarItem href='#'>
+      <SideBarItemStatusBullet status='online' />
+      <SideBarItemTitle>{names[i % 10]}</SideBarItemTitle>
+      <SideBarItemBadge
+        title='unread messages'
+        children={Math.floor(Math.random() * 10) + 1}
+      />
+      <SideBarItemMenu children={<MenuTemplate />} />
+    </SideBarItem>
+  </SideBarListItem>
+);
+
+export const GenericMediumItem = ({ i = 0 }: { i: number }) => (
+  <SideBarListItem>
+    <SideBarItem href='#'>
+      <SideBarItemAvatarWrapper>
+        <Avatar size='x28' url={leterAvatarUrls[i % 4]} alt='avatar' />
+      </SideBarItemAvatarWrapper>
+      <SideBarItemIcon icon='team' />
+      <SideBarItemTitle>{names[i % 10]}</SideBarItemTitle>
+      <SideBarItemBadge
+        title='unread messages'
+        children={Math.floor(Math.random() * 10) + 1}
+      />
+      <SideBarItemMenu children={<MenuTemplate />} />
+    </SideBarItem>
+  </SideBarListItem>
+);
+
+export const GenericExtendedItem = ({ i = 0 }: { i: number }) => (
+  <SideBarListItem>
+    <SideBarItem href='#'>
+      <SideBarItemAvatarWrapper>
+        <Avatar size='x36' url={leterAvatarUrls[i % 4]} alt='avatar' />
+      </SideBarItemAvatarWrapper>
+
+      <SideBarItemCol>
+        <SideBarItemRow>
+          <SideBarItemIcon icon='team' />
+          <SideBarItemTitle>{names[i % 10]}</SideBarItemTitle>
+          <SideBarItemTimestamp>12:00</SideBarItemTimestamp>
+        </SideBarItemRow>
+
+        <SideBarItemRow>
+          <SideBarItemContent>No messages yet</SideBarItemContent>
+          <SideBarItemBadge
+            title='unread messages'
+            children={Math.floor(Math.random() * 10) + 1}
+          />
+          <SideBarItemMenu children={<MenuTemplate />} />
+        </SideBarItemRow>
+      </SideBarItemCol>
+    </SideBarItem>
+  </SideBarListItem>
+);
+
+export const GenericCallItem = ({
+  i = 0,
+  ...props
+}: { i?: number } & ComponentProps<typeof SideBarItem>) => (
+  <SideBarItem {...props}>
+    <SideBarItemAvatarWrapper>
+      <Avatar size='x36' url={leterAvatarUrls[i % 4]} alt='avatar' />
+    </SideBarItemAvatarWrapper>
+
+    <SideBarItemCol>
+      <SideBarItemTitle>{names[i % 10]}</SideBarItemTitle>
+      <SideBarItemContent>Calling</SideBarItemContent>
+    </SideBarItemCol>
+
+    <SideBarItemRow>
+      <SideBarButtonGroup>
+        <IconButton
+          small
+          icon='phone-off'
+          secondary
+          danger
+          aria-label='phone-off'
+        />
+        <IconButton small icon='phone' secondary success aria-label='phone' />
+      </SideBarButtonGroup>
+    </SideBarItemRow>
+  </SideBarItem>
+);
+
+export const decorators: Decorator[] = [
+  (fn): ReactElement => (
+    <Box h='90vh' w='x280'>
+      <SideBar>
+        <SideBarAccordion>
+          <SideBarAccordionItem
+            title='Label'
+            defaultExpanded
+            badge={<SideBarItemBadge children='99+' variant='danger' />}
+          >
+            <SideBarCollapseGroup
+              title='Label'
+              defaultExpanded
+              badge={<SideBarItemBadge children='99+' variant='danger' />}
+            >
+              {fn()}
+            </SideBarCollapseGroup>
+          </SideBarAccordionItem>
+        </SideBarAccordion>
+        <SideBarFooter>
+          <SideBarFooterContent>Powered by Rocket.Chat</SideBarFooterContent>
+          <SideBarFooterContent color='titles-labels'>
+            Free edition
+          </SideBarFooterContent>
+        </SideBarFooter>
+      </SideBar>
+    </Box>
+  ),
+];
diff --git a/packages/fuselage/src/components/SideBarV2/hooks/useCollapse.tsx b/packages/fuselage/src/components/SideBarV2/hooks/useCollapse.tsx
new file mode 100644
index 0000000000..81758a91d5
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/hooks/useCollapse.tsx
@@ -0,0 +1,66 @@
+import { useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import type { KeyboardEventHandler, MouseEvent } from 'react';
+
+export const useCollapse = ({
+  expanded: propExpanded,
+  defaultExpanded,
+  disabled,
+  noncollapsible,
+  tabIndex = 0,
+}: {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+  noncollapsible?: boolean;
+  tabIndex?: number;
+}) => {
+  const [stateExpanded, toggleStateExpanded] = useToggle(defaultExpanded);
+  const expanded = propExpanded || stateExpanded;
+
+  const panelExpanded = noncollapsible || expanded;
+
+  const titleId = useUniqueId();
+  const panelId = useUniqueId();
+
+  const handleClick = (e: MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return;
+    }
+    e.currentTarget?.blur();
+    toggleStateExpanded();
+  };
+
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    if (disabled || event.currentTarget !== event.target) {
+      return;
+    }
+
+    if (['Enter', 'Space'].includes(event.code)) {
+      event.preventDefault();
+
+      if (event.repeat) {
+        return;
+      }
+
+      toggleStateExpanded();
+    }
+  };
+
+  const collapsibleProps = {
+    'aria-controls': panelId,
+    'aria-expanded': expanded ? 'true' : 'false',
+    'tabIndex': !disabled ? tabIndex : undefined,
+    'onClick': handleClick,
+    'onKeyDown': handleKeyDown,
+  } as const;
+
+  const nonCollapsibleProps = {
+    'aria-disabled': 'true',
+    'aria-expanded': 'true',
+    'aria-labelledby': titleId,
+  } as const;
+
+  const barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
+
+  return { barProps, titleId, panelId, panelExpanded, expanded };
+};
diff --git a/packages/fuselage/src/components/SideBarV2/index.tsx b/packages/fuselage/src/components/SideBarV2/index.tsx
new file mode 100644
index 0000000000..684e14b064
--- /dev/null
+++ b/packages/fuselage/src/components/SideBarV2/index.tsx
@@ -0,0 +1,15 @@
+export * from './SideBar';
+export * from './SideBarAccordion';
+export * from './SideBarAccordionItem';
+export * from './SideBarAction';
+export * from './SideBarActions';
+export * from './SideBarLink';
+export * from './SideBarItem';
+export * from './SideBarCollapseGroup';
+export * from './SideBarBanner';
+export * from './SideBarFooter';
+export * from './SideBarMedia';
+export * from './SideBarButtonGroup';
+export * from './SideBarSection';
+export * from './SideBarDivider';
+export * from './SideBarGroupTitle';
diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss
index b3bd521654..f6e0b94270 100644
--- a/packages/fuselage/src/components/index.scss
+++ b/packages/fuselage/src/components/index.scss
@@ -33,6 +33,7 @@
 @import './RadioButton/RadioButton.styles.scss';
 @import './Select/Select.styles.scss';
 @import './Sidebar/Sidebar.styles.scss';
+@import './SideBarV2/SideBar.styles.scss';
 @import './Skeleton/Skeleton.styles.scss';
 @import './States/States.styles.scss';
 @import './Table/Table.styles.scss';
diff --git a/packages/fuselage/src/components/index.ts b/packages/fuselage/src/components/index.ts
index cb727b673c..670ffb494f 100644
--- a/packages/fuselage/src/components/index.ts
+++ b/packages/fuselage/src/components/index.ts
@@ -62,6 +62,7 @@ export * from './Popover';
 export * from './SelectInput';
 export { default as Sidebar } from './Sidebar';
 export * from './Sidebar';
+export * from './SideBarV2';
 export * from './Skeleton';
 export * from './States';
 export * from './Table';
diff --git a/packages/fuselage/src/styles/mixins/templates.scss b/packages/fuselage/src/styles/mixins/templates.scss
index c7939751eb..1b3cc66f59 100644
--- a/packages/fuselage/src/styles/mixins/templates.scss
+++ b/packages/fuselage/src/styles/mixins/templates.scss
@@ -4,7 +4,7 @@
 @import './shadows.scss';
 @import './states.scss';
 
-@mixin focus-state {
+@mixin focus-state($shadow: true) {
   border-width: lengths.border-width('default');
   border-style: solid;
   border-color: transparent;
@@ -13,7 +13,11 @@
     border-color: colors.stroke(highlight);
     border-radius: lengths.border-radius(medium);
     outline: 0;
-    @include use-button-focus-shadow(colors.stroke(extra-light-highlight));
+
+    box-shadow: none;
+    @if $shadow {
+      @include use-focus-shadow(colors.stroke(extra-light-highlight));
+    }
   }
 
   @content;