From ba96f1fb1697a201ccbeec03ba5beebaeb5f6c67 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Fri, 22 Apr 2022 17:10:53 +0300
Subject: [PATCH] Web: Client: NavMenu: fix menu display position

---
 .../NavMenu/sub-components/profile-menu.js    | 34 +++----------------
 1 file changed, 4 insertions(+), 30 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js
index 6fe908aeb8..5aa98f1fe5 100644
--- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js
+++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js
@@ -5,12 +5,7 @@ import DropDown from "@appserver/components/drop-down";
 
 import styled, { css } from "styled-components";
 import DropDownItem from "@appserver/components/drop-down-item";
-import {
-  isDesktop,
-  isTablet,
-  isMobile,
-  isMobileOnly,
-} from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { Base } from "@appserver/components/themes";
 import { mobile, tablet } from "@appserver/components/utils/device";
 import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
@@ -25,12 +20,7 @@ const StyledDropDown = styled(DropDown)`
     right: 16px !important;
   }
 
-  ${isMobile &&
-  css`
-    right: 16px !important;
-  `}
-
-  @media ${mobile} {
+  @media (max-width: 428px) {
     position: fixed;
 
     top: unset !important;
@@ -43,22 +33,6 @@ const StyledDropDown = styled(DropDown)`
 
     border-radius: 6px 6px 0px 0px !important;
   }
-
-  ${isMobileOnly &&
-  css`
-    position: fixed;
-
-    top: unset !important;
-    right: 0 !important;
-    left: 0 !important;
-    bottom: 0 !important;
-
-    width: 100vw;
-
-    border: none !important;
-
-    border-radius: 6px 6px 0px 0px !important;
-  `}
 `;
 
 const StyledControlContainer = styled.div`
@@ -70,12 +44,12 @@ const StyledControlContainer = styled.div`
   right: 10px;
   border-radius: 100px;
   cursor: pointer;
-  display: ${isMobileOnly ? "flex" : "none"};
+  display: none;
   align-items: center;
   justify-content: center;
   z-index: 290;
 
-  @media ${mobile} {
+  @media (max-width: 428px) {
     display: flex;
   }
 `;