new post btn to menu on desktop size

src/css/style.css

@@ -988,6 +988,11 @@ header.footer .header-content {
   background: var(--chat-hover);
 }
 
+.menu-new-post {
+  margin-left: 30px;
+  margin-top: 30px;
+}
+
 .application-list {
   z-index: 2;
   width: 220px;
@@ -1039,6 +1044,10 @@ header.footer .header-content {
   .application-list a {
     justify-content: center;
   }
+
+  .menu-new-post {
+    margin-left: 5px;
+  }
 }
 
 @media (max-width: 1268px) {

src/js/components/Menu.js

@@ -8,6 +8,10 @@ import Icons from '../Icons';
 import localState from '../LocalState';
 import { translate as t } from '../translations/Translation';
 
+import Button from './buttons/Button';
+import Modal from './modal/Modal';
+import FeedMessageForm from './FeedMessageForm';
+
 const APPLICATIONS = [
   // TODO: move editable shortcuts to localState gun
   { url: '/', text: 'feeds', icon: Icons.feed },
@@ -49,6 +53,23 @@ export default class Menu extends Component {
     });
   }
 
+  renderNewPostModal() {
+    return this.state.showNewPostModal
+      ? html`
+          <${Modal}
+            showContainer=${true}
+            onClose=${() => this.setState({ showNewPostModal: false })}
+          >
+            <${FeedMessageForm}
+              onSubmit=${() => this.setState({ showNewPostModal: false })}
+              placeholder=${t('whats_on_your_mind')}
+              autofocus=${true}
+            />
+          <//>
+        `
+      : '';
+  }
+
   render() {
     return html`
       <div class="application-list">
@@ -83,6 +104,14 @@ export default class Menu extends Component {
             <//>`;
           }
         })}
+        <div class="hidden-xs menu-new-post">
+          <${Button}
+            onClick=${() => this.setState({ showNewPostModal: !this.state.showNewPostModal })}
+          >
+            <span class="icon">${Icons.post}</span>
+          <//>
+          ${this.renderNewPostModal()}
+        </div>
       </div>
     `;
   }

src/js/components/modal/Modal.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 type Props = {
   onClose?: () => void;
   justifyContent?: string;
+  showContainer?: boolean;
 };
 
 const Overlay = styled.div`
@@ -21,7 +22,7 @@ const Overlay = styled.div`
   align-items: center;
 `;
 
-const Modal: FC<Props> = ({ children, onClose }) => {
+const Modal: FC<Props> = ({ showContainer, children, onClose }) => {
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose?.();
@@ -33,6 +34,10 @@ const Modal: FC<Props> = ({ children, onClose }) => {
     onClose?.();
   };
 
+  const handleContainerClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
+
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
     return () => {
@@ -40,7 +45,17 @@ const Modal: FC<Props> = ({ children, onClose }) => {
     };
   }, [handleKeyDown]);
 
-  return <Overlay onClick={handleOverlayClick}>{children}</Overlay>;
+  const content = showContainer ? (
+    <div class="msg" style="width: 600px;" onClick={(e) => handleContainerClick(e)}>
+      <div class="msg-content" style="padding: 30px;">
+        {children}
+      </div>
+    </div>
+  ) : (
+    children
+  );
+
+  return <Overlay onClick={handleOverlayClick}>{content}</Overlay>;
 };
 
 export default Modal;