Draw improvements, disabled user zooming

public/index.html

@@ -16,7 +16,10 @@
       rel="stylesheet"
     />
     <meta name="theme-color" content="#67ea94" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
+    />
     <meta
       name="description"
       content="Web site created using create-snowpack-app"

src/App.tsx

@@ -131,7 +131,10 @@ const App = (): JSX.Element => {
         <div className="flex flex-shrink-0 w-full overflow-hidden bg-primary dark:bg-primary">
           <div className="w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b dark:border-gray-600 sm:shadow-md overflow-hidden bg-white dark:bg-primaryDark">
             <div className="flex items-center justify-between h-16 px-4 md:px-6">
-              <Logo />
+              <div className="hidden md:flex">
+                <Logo />
+              </div>
+
               <MobileNavToggle />
               <div className="flex items-center space-x-2">
                 <DeviceStatusDropdown />

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'}

src/pages/Messages.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
+import { MapIcon, UsersIcon } from '@heroicons/react/outline';
+
 import { Message } from '../components/chat/Message';
 import { MessageBar } from '../components/chat/MessageBar';
+import { Button } from '../components/generic/Button';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -10,6 +13,17 @@ export const Messages = (): JSX.Element => {
 
   return (
     <div className="flex flex-col w-full">
+      <div className="flex justify-between w-full border-b dark:border-gray-600 dark:text-gray-300 px-2">
+        <div className="my-auto text-sm"># default</div>
+        <div className="flex">
+          <Button>
+            <MapIcon className="w-6 h-6" />
+          </Button>
+          <Button>
+            <UsersIcon className="w-6 h-6" />
+          </Button>
+        </div>
+      </div>
       <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
         {messages.map((message, index) => (
           <Message
@@ -29,3 +43,6 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
+<Button>
+  <UsersIcon className="w-6 h-6" />
+</Button>;