refactor: sidebar (#189)

Author: gmolki

src/components/common/SidePanel/cmp.tsx

@@ -1,17 +1,32 @@
 import React, { memo } from 'react'
-import { StyledBackdrop, StyledHeader, StyledSidePanel } from './styles'
+import {
+  StyledBackdrop,
+  StyledContent,
+  StyledFooter,
+  StyledHeader,
+  StyledSidePanel,
+} from './styles'
 import { SidePanelProps } from './types'
 
 export const SidePanel = ({
   children,
   title,
   isOpen,
   onClose,
+  footer,
+  order = 0,
+  width,
+  mobileHeight,
 }: SidePanelProps) => {
   return (
     <>
-      <StyledBackdrop $isOpen={isOpen} onClick={onClose} />
-      <StyledSidePanel $isOpen={isOpen}>
+      <StyledBackdrop $isOpen={isOpen} $order={order} onClick={onClose} />
+      <StyledSidePanel
+        $isOpen={isOpen}
+        $order={order}
+        $width={width}
+        $mobileHeight={mobileHeight}
+      >
         {/* Side Panel Header */}
         <StyledHeader>
           <div
@@ -21,7 +36,15 @@ export const SidePanel = ({
             {title}
           </div>
         </StyledHeader>
-        <div tw="p-12">{children}</div>
+        <StyledContent>
+          {children}
+          {footer && <div tw="h-[5.375rem]" />}
+        </StyledContent>
+        {footer && (
+          <>
+            <StyledFooter $isOpen={isOpen}>{footer}</StyledFooter>
+          </>
+        )}
       </StyledSidePanel>
     </>
   )

src/components/common/SidePanel/styles.tsx

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components'
-import { StyledSidePanelProps } from './types'
+import { StyledSidePanelProps, StyledFooterProps } from './types'
 import tw from 'twin.macro'
 
 export const StyledBackdrop = styled.div<StyledSidePanelProps>`
-  ${({ theme, $isOpen }) => css`
+  ${({ theme, $isOpen, $order = 0 }) => css`
     position: fixed;
     top: 0;
     left: 0;
@@ -16,7 +16,7 @@ export const StyledBackdrop = styled.div<StyledSidePanelProps>`
       visibility ${theme.transition.duration.normal}ms ease-in-out;
     opacity: 0;
     visibility: hidden;
-    z-index: 28; /* just below the side panel */
+    z-index: ${28 + $order}; /* just below the side panel */
 
     ${$isOpen &&
     css`
@@ -28,28 +28,67 @@ export const StyledBackdrop = styled.div<StyledSidePanelProps>`
 
 export const StyledHeader = styled.div`
   ${({ theme }) => css`
-    ${tw`sticky top-0 pt-10 pb-4`}
+    ${tw`top-0 pt-10 pb-4`}
 
     background: ${theme.color.background};
   `}
 `
 
-export const StyledSidePanel = styled.div<StyledSidePanelProps>`
+export const StyledContent = styled.div`
+  ${tw`p-12 pb-0 flex-1`}
+  overflow-y: auto;
+`
+
+export const StyledFooter = styled.div<StyledFooterProps>`
   ${({ theme, $isOpen }) => css`
+    ${tw`fixed bottom-0 left-0 right-0 p-6`}
+
+    background: ${theme.color.background}99;
+    max-height: 5.375rem;
+
+    ${$isOpen &&
+    css`
+      animation: slideUp ${theme.transition.duration.normal}ms
+        ${theme.transition.timing} forwards;
+    `}
+
+    @keyframes slideUp {
+      from {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  `}
+`
+
+export const StyledSidePanel = styled.div<StyledSidePanelProps>`
+  ${({
+    theme,
+    $isOpen,
+    $order = 0,
+    $width = '43rem',
+    $mobileHeight = '80vh',
+  }) => css`
     position: fixed;
     background-color: ${theme.color.background};
-    overflow-y: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     /* Desktop Styles */
     top: 1rem;
     right: 1rem;
     bottom: 1rem;
-    width: 50vw;
+    width: calc(${$width} - ${$order * 20}px);
 
     /* For sliding effect on desktop */
     transform: translateX(100%);
     transition: transform ${theme.transition.duration.normal}ms ease-in-out;
-    z-index: 50;
+    z-index: ${29 + $order * 2}; /* above the backdrop */
 
     ${$isOpen
       ? css`
@@ -65,7 +104,7 @@ export const StyledSidePanel = styled.div<StyledSidePanelProps>`
       bottom: 0;
       left: 0.5rem;
       right: 0.5 rem;
-      height: 80vh;
+      height: calc(${$mobileHeight} - ${$order * 20}px);
       width: initial;
       border-radius: 1.5rem 1.5rem 0 0;
 

src/components/common/SidePanel/types.tsx

@@ -3,8 +3,19 @@ export type SidePanelProps = {
   isOpen: boolean
   onClose?: () => void
   children?: React.ReactNode
+  footer?: React.ReactNode
+  order?: number
+  width?: string
+  mobileHeight?: string
 }
 
 export type StyledSidePanelProps = {
   $isOpen?: boolean
+  $order?: number
+  $width?: string
+  $mobileHeight?: string
+}
+
+export type StyledFooterProps = {
+  $isOpen?: boolean
 }