{this.showScanPage ? (
diff --git a/src/components/visual/SidePanel/SidePanel.tsx b/src/components/visual/SidePanel/SidePanel.tsx
new file mode 100644
index 00000000..f3ee8acd
--- /dev/null
+++ b/src/components/visual/SidePanel/SidePanel.tsx
@@ -0,0 +1,87 @@
+import { h } from '@stencil/core';
+import classNames from 'classnames';
+import { SidePanelHeader } from './components/SidePanelHeader/SidePanelHeader';
+import { SidePanelSwiper } from './components/SidePanelSwiper/SidePanelSwiper';
+import { handleSidePanelOpenChange } from './helpers/handleSidePanelOpenChange';
+import { state } from './sidePanelStore';
+
+import styles from './sidePanel.styles';
+
+interface SidePanelPropsType {
+ isOpen?: boolean;
+ panelClassName?: string;
+ panelTitle: string;
+ hasBackButton?: boolean;
+ showHeader?: boolean;
+ onClose?: () => void;
+ onBack?: () => void;
+}
+
+export function SidePanel({
+ isOpen = false,
+ panelClassName,
+ panelTitle,
+ hasBackButton,
+ showHeader = true,
+ onClose,
+ onBack
+}: SidePanelPropsType, children: JSX.Element) {
+ if (isOpen !== undefined) {
+ handleSidePanelOpenChange(isOpen, (shouldAnimate) => {
+ state.shouldAnimate = shouldAnimate;
+ });
+ }
+
+ const sidePanelIdentifier = 'side-panel';
+ const shouldAnimate = state.shouldAnimate;
+
+ const handleOverlayClick = (event: MouseEvent) => {
+ if (event.target === event.currentTarget) {
+ onClose?.();
+ }
+ };
+
+ const handleCloseClick = (event: MouseEvent) => {
+ event.preventDefault();
+ onClose?.();
+ };
+
+ const handleBackClick = (event: MouseEvent) => {
+ event.preventDefault();
+ onBack?.();
+ };
+
+ return (
+
+
+
+ {showHeader && (
+
+ )}
+
+
+ {children}
+
+
+
+ );
+}
+
diff --git a/src/components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx b/src/components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx
new file mode 100644
index 00000000..02d55ce4
--- /dev/null
+++ b/src/components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx
@@ -0,0 +1,59 @@
+import { h } from '@stencil/core';
+import classNames from 'classnames';
+import { Icon } from 'common/Icon';
+
+// prettier-ignore
+const styles = {
+ sidePanelHeading: 'side-panel-heading mvx:flex mvx:items-center mvx:leading-none mvx:gap-3 mvx:z-1 mvx:relative mvx:px-0 mvx:py-2 mvx:text-2xl mvx:shadow-lg mvx:shadow-surface',
+ sidePanelHeadingLeft: 'side-panel-heading-left mvx:mr-auto mvx:hidden mvx:pointer-events-none mvx:cursor-pointer mvx:opacity-0 mvx:text-secondary-text mvx:xs:flex mvx:hover:opacity-75',
+ sidePanelHeadingRight: 'side-panel-heading-right mvx:ml-auto mvx:hidden mvx:pointer-events-none mvx:cursor-pointer mvx:opacity-0 mvx:text-secondary-text mvx:xs:flex mvx:hover:opacity-75',
+ sidePanelHeadingLeftVisible: 'side-panel-heading-left-visible mvx:transition-all mvx:opacity-100 mvx:duration-200 mvx:ease-in-out mvx:!pointer-events-auto mvx:flex mvx:hover:opacity-75',
+ sidePanelHeadingRightVisible: 'side-panel-heading-right-visible mvx:transition-all mvx:opacity-100 mvx:duration-200 mvx:ease-in-out mvx:!pointer-events-auto mvx:!flex mvx:hover:opacity-75',
+ sidePanelHeadingTitle: 'side-panel-heading-title mvx:font-medium mvx:text-primary'
+} satisfies Record
;
+
+interface SidePanelHeaderPropsType {
+ panelClassName?: string;
+ panelTitle: string;
+ hasLeftButton?: boolean;
+ hasRightButton?: boolean;
+ onRightButtonClick?: (event: MouseEvent) => void;
+ onLeftButtonClick?: (event: MouseEvent) => void;
+ leftIcon?: any;
+ rightIcon?: any;
+}
+
+export function SidePanelHeader({ panelClassName, panelTitle, hasLeftButton = true, hasRightButton = true, onRightButtonClick, onLeftButtonClick, leftIcon, rightIcon }: SidePanelHeaderPropsType) {
+ const handleRightIconClick = (event: MouseEvent) => {
+ event.preventDefault();
+ onRightButtonClick?.(event);
+ }
+
+ const handleLeftIconClick = (event: MouseEvent) => {
+ event.preventDefault();
+ onLeftButtonClick?.(event);
+ }
+
+ return (
+
+
+ {hasLeftButton && (
+ leftIcon ||
+ )}
+
+
+
{panelTitle}
+
+
+ {rightIcon || }
+
+
+
+
event.stopPropagation()}
+ >
+
+
+
+ {children}
+
+
+
+
-
- {this.hasLeftButton && (
-
-
-
- )}
-
-
-
{this.panelTitle}
-
-
-
-
-
-
-
-
(this.sheetElement = el!)}
- onClick={(event: MouseEvent) => event.stopPropagation()}
- >
-
-
-
-
-
-
-
-
this.close.emit()}
- sidePanelIdentifier={this.sidePanelIdentifier}
- >
-
- {this.showHeader && (
-
- )}
-
-
-
-
-
-