Add ESRI sat source + unify Sidebar overlay

src/components/layout/Sidebar/sections/SidebarOverlay.tsx

@@ -9,6 +9,7 @@ export interface SidebarOverlayProps {
   title: string;
   open: boolean;
   close: () => void;
+  direction: 'x' | 'y';
   children: React.ReactNode;
 }
 
@@ -16,20 +17,25 @@ export const SidebarOverlay = ({
   title,
   open,
   close,
+  direction,
   children,
 }: SidebarOverlayProps): JSX.Element => {
   return (
     <AnimatePresence>
       {open && (
         <m.div
-          className="absolute z-20 flex flex-col w-full h-full bg-primaryDark"
-          animate={{ translateX: 0 }}
-          initial={{ translateX: '-100%' }}
-          exit={{ translateX: '-100%' }}
+          className="absolute z-10 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
+          animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
+          initial={
+            direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
+          }
+          exit={
+            direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
+          }
           transition={{ type: 'just' }}
         >
           <AnimateSharedLayout>
-            <div className="flex gap-2 p-2 border-b border-gray-300 dark:border-gray-600">
+            <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
               <IconButton
                 onClick={(): void => {
                   close();