added profile cover for profile sidebar

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, VFC } from "react";
 
 import { isNil } from "ramda";
 
+import { CoverBackdrop } from "~/components/containers/CoverBackdrop";
 import { ProfileSidebarNotes } from "~/components/profile/ProfileSidebarNotes";
 import { ProfileSidebarSettings } from "~/components/profile/ProfileSidebarSettings";
 import { SidebarStack } from "~/components/sidebar/SidebarStack";
@@ -11,6 +12,7 @@ import { ProfileSidebarMenu } from "~/containers/profile/ProfileSidebarMenu";
 import { SidebarWrapper } from "~/containers/sidebars/SidebarWrapper";
 import { useAuth } from "~/hooks/auth/useAuth";
 import type { SidebarComponentProps } from "~/types/sidebar";
+import { useUser } from "~/hooks/auth/useUser";
 
 const tabs = ["profile", "bookmarks"] as const;
 type TabName = typeof tabs[number];
@@ -26,6 +28,7 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({
   openSidebar,
 }) => {
   const { isUser } = useAuth();
+  const { user: { cover }} = useUser();
 
   const tab = useMemo(
     () => (page ? Math.max(tabs.indexOf(page), 0) : undefined),
@@ -52,7 +55,7 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({
   }
 
   return (
-    <SidebarWrapper onClose={onRequestClose}>
+    <SidebarWrapper onClose={onRequestClose} backdrop={cover && <CoverBackdrop cover={cover} />}>
       <SidebarStack tab={tab} onTabChange={onTabChange}>
         <SidebarStackCard
           headerFeature="close"

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, ReactNode, useEffect, useRef } from 'react';
 
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 
@@ -9,9 +9,15 @@ import styles from './styles.module.scss';
 interface IProps {
   onClose?: () => void;
   closeOnBackdropClick?: boolean;
+  backdrop?: ReactNode;
 }
 
-const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick = true }) => {
+const SidebarWrapper: FC<IProps> = ({
+  children,
+  onClose,
+  closeOnBackdropClick = true,
+  backdrop,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useCloseOnEscape(onClose);
@@ -25,7 +31,12 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick =
 
   return (
     <div className={styles.wrapper} ref={ref}>
-      {closeOnBackdropClick && <div className={styles.backdrop} onClick={onClose} />}
+      {(closeOnBackdropClick || backdrop) && (
+        <div className={styles.backdrop} onClick={onClose}>
+          {backdrop}
+        </div>
+      )}
+
       {children}
     </div>
   );