Draw improvements, disabled user zooming

src/components/generic/Drawer.tsx

@@ -19,14 +19,14 @@ export const Drawer = ({
           onClick={onClose}
         >
           <div
-            className="absolute inset-0 bg-black opacity-50"
+            className="absolute inset-0 backdrop-filter backdrop-blur"
             tabIndex={0}
           ></div>
         </div>
       )}
 
       <aside
-        className={`transform top-0 left-0 w-64 bg-white dark:bg-secondaryDark fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
+        className={`transform top-0 left-0 w-64 bg-white dark:bg-secondaryDark shadow-md border-r dark:border-gray-600 fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
           open ? 'translate-x-0' : '-translate-x-full'
         }`}
       >

src/components/menu/Logo.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 export const Logo = (): JSX.Element => {
   return (
-    <div className="hidden md:flex">
+    <>
       <img className="w-16 dark:hidden" src="Mesh_Logo_Black.svg" />
       <img className="hidden dark:flex w-16" src="Mesh_Logo_White.svg" />
-    </div>
+    </>
   );
 };

src/components/menu/MobileNav.tsx

@@ -11,6 +11,7 @@ import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { routes } from '../../router';
 import { closeMobileNav } from '../../slices/appSlice';
 import { Drawer } from '../generic/Drawer';
+import { Logo } from './Logo';
 import { MenuButton } from './MenuButton';
 
 export const MobileNav = (): JSX.Element => {
@@ -25,7 +26,10 @@ export const MobileNav = (): JSX.Element => {
         dispatch(closeMobileNav());
       }}
     >
-      <div>
+      <div className="flex flex-col">
+        <div className="m-auto my-6">
+          <Logo />
+        </div>
         <MenuButton
           icon={<AnnotationIcon />}
           text={'Messages'}