add backdrop for drawer mode

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -69,6 +69,7 @@
         transform: translateX(-100%);
       }
       &.open {
+        z-index: bs.$zindex-modal;
         transform: translateX(0);
       }
     }

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -161,16 +161,24 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
   const openClass = `${isDrawerOpened ? 'open' : ''}`;
 
   return (
-    <div className={`${className} ${openClass}`}>
-      {children}
-    </div>
+    <>
+      <div className={`${className} ${openClass}`}>
+        {children}
+      </div>
+      { isDrawerOpened && (
+        <div className="modal-backdrop fade show" />
+      ) }
+    </>
   );
 });
 
 
 export const Sidebar = (): JSX.Element => {
 
-  const { data: sidebarMode, isDrawerMode, isDockMode } = useSidebarMode();
+  const {
+    data: sidebarMode,
+    isDrawerMode, isCollapsedMode, isDockMode,
+  } = useSidebarMode();
 
   // css styles
   const grwSidebarClass = styles['grw-sidebar'];
@@ -198,7 +206,7 @@ export const Sidebar = (): JSX.Element => {
       { sidebarMode != null && !isDockMode() && <AppTitleOnSubnavigation /> }
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">
         <ResizableContainer>
-          { sidebarMode != null && isDockMode() && <AppTitleOnSidebarHead /> }
+          { sidebarMode != null && !isCollapsedMode() && <AppTitleOnSidebarHead /> }
           <SidebarHead />
           <CollapsibleContainer Nav={SidebarNav} className="border-top">
             <SidebarContents />