@skbkontur/side-menu 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.6.2...@skbkontur/side-menu@0.7.0) (2023-03-03)
+
+
+### Features
+
+* **SideMenu:** implement narrow desktop adaptive version ([3688ea8](https://git.skbkontur.ru/ui/ui-parking/commits/3688ea80138c5d855eda95e45239e73895d63258))
+
+
+
+
+
 ## [0.6.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.6.1...@skbkontur/side-menu@0.6.2) (2023-02-20)
 
 

package/README.md

@@ -108,6 +108,14 @@ const close = () => {
   setOpened(false);
 }
 
+const linearLightGradient = `repeating-linear-gradient(
+                                60deg,
+                                #fafafa,
+                                #fafafa 20px,
+                                #dfdede 20px,
+                                #dfdede 40px
+                              )`
+
 const renderModal = () => {
   return (
     <Modal onClose={close}>
@@ -120,7 +128,7 @@ const renderModal = () => {
   );
 }
 
-<div style={{height: '600px', width: '100%', position: 'relative'}}>
+<div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
   <SideMenu isSeparatedMenu={true}>
     <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
     <SideMenu.Body>
@@ -188,6 +196,132 @@ const renderModal = () => {
       </SideMenu.Avatar>
     </SideMenu.Footer>
   </SideMenu>
+  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
+    {'Content '.repeat(100)}
+  </div>
+</div>
+```
+
+Меню второго уровня в отдельной колонке можно расположить над контентом с помощью пропа `separatedMenuWithOverlay={true}`
+
+```jsx harmony
+import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
+import { Buhgalteria, Kontur } from '@skbkontur/logos';
+import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
+import { SideMenu } from './index';
+import {
+  DocTextIcon24Regular,
+  CommentRectTextIcon24Regular,
+  LightbulbIcon24Regular,
+  BookOpenTextIcon24Regular,
+  BookmarkIcon24Regular,
+  StackHDownIcon24Regular,
+  SettingsGearIcon24Regular,
+  FaceAHappyIcon24Regular
+} from '@skbkontur/icons';
+
+const [opened, setOpened] = React.useState(false);
+const [panel, setPanel] = React.useState(false);
+
+const open = () => {
+  setOpened(true);
+}
+
+const close = () => {
+  setOpened(false);
+}
+
+const linearLightGradient = `repeating-linear-gradient(
+                                60deg,
+                                #fafafa,
+                                #fafafa 20px,
+                                #dfdede 20px,
+                                #dfdede 40px
+                              )`
+
+const renderModal = () => {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Выбор организации</Modal.Header>
+      <Modal.Body>
+        <Input/>
+        <div>Список организаций</div>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+<div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
+  <SideMenu isSeparatedMenu={true} separatedMenuWithOverlay={true}>
+    <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
+    <SideMenu.Body>
+      <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
+        <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
+          <SideMenu.SubItem caption={'Входящие 1'}>
+            <SideMenu.SubItem caption={'Входящие11'}>
+              <SideMenu.SubItem caption={'Входящие111'}/>
+              <SideMenu.SubItem caption={'Входящие112'}/>
+              <SideMenu.SubItem caption={'Входящие113'}/>
+            </SideMenu.SubItem>
+            <SideMenu.SubItem caption={'Входящие12'}/>
+            <SideMenu.SubItem caption={'Входящие13'}/>
+          </SideMenu.SubItem>
+          <SideMenu.SubItem caption={'Входящие2'}>
+            <SideMenu.SubItem caption={'Входящие21'}>
+              <SideMenu.SubItem caption={'Входящие211'}/>
+              <SideMenu.SubItem caption={'Входящие212'}/>
+              <SideMenu.SubItem caption={'Входящие213'}/>
+            </SideMenu.SubItem>
+            <SideMenu.SubItem caption={'Входящие22'}/>
+            <SideMenu.SubItem caption={'Входящие23'}/>
+          </SideMenu.SubItem>
+          <SideMenu.SubItem caption={'Входящие3'}/>
+        </SideMenu.SubItem>
+        <SideMenu.SubItem caption={'Исходящие'}/>
+        <SideMenu.SubItem caption={'Внутренние'}/>
+        <SideMenu.SubItem caption={'Черновики'}/>
+        <SideMenu.SubItem caption={'Удаленные'}/>
+        <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
+        <SideMenu.SubItem caption={'Требуют обработки'}/>
+        <SideMenu.SubItem caption={'Обработанные'}/>
+      </SideMenu.Item>
+      <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
+      <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
+        <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
+        <SideMenu.SubItem caption={'Исходящие'}/>
+        <SideMenu.SubItem caption={'Внутренние'}/>
+        <SideMenu.SubItem caption={'Черновики'}/>
+        <SideMenu.SubItem caption={'Удаленные'}/>
+      </SideMenu.Item>
+      <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
+      <SideMenu.Divider />
+      <SideMenu.Item icon={<BookOpenTextIcon24Regular/>}  caption={'Еще раздел'}/>
+      <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
+    </SideMenu.Body>
+    <SideMenu.Footer>
+      <div>
+        {opened && renderModal()}
+        <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
+      </div>
+      <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+      <SideMenu.Avatar
+        userName={'Ишматова Елена'}
+        avatarUrl={getKonturAvatarUrl({
+          userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
+        })}
+      >
+        <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
+          Личный кабинет
+        </MenuItem>
+        <MenuItem >Безопасность</MenuItem>
+        <SideMenu.Divider />
+        <MenuItem >Выйти</MenuItem>
+      </SideMenu.Avatar>
+    </SideMenu.Footer>
+  </SideMenu>
+  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
+    {'Content '.repeat(100)}
+  </div>
 </div>
 ```
 
@@ -456,6 +590,19 @@ const items = [
 ```
 
 ### Адаптивность
+Все брейкпойнты вынесены в пропы:
+
+| Проп | Дефолтное значение |
+| ------|--------------------|
+|desktopMediaQuery|'(min-width: 1200px)'|
+|narrowDesktopMediaQuery|'(min-width: 992px)'|
+|tabletMediaQuery|'(min-width: 768px)'|
+|mobileMediaQuery|'(min-width: 0px)'|
+
+Для того чтобы пропускать брекпойнты достаточно указать значение, равное следующему за ним брейкпойнту.
+Например, в следующем случае у `SideMenu` не будет адаптива для планшетов:
+
+`<SideMenu tabletMediaQuery={'(min-width: 768px)'} narrowDesktopMediaQuery={'(min-width: 768px)'}/>`
 
 Пример встраивания SideMenu с адаптивом (более наглядно в [песочнице](https://codesandbox.io/s/dark-waterfall-5b4fkh?file=/src/App.js)):
 

package/hooks/useActiveState.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { isIdActive } from '../utils/scripts';
+import { isElementActive } from '../utils/scripts';
 export var useActiveState = function (id, href, generatedId, activeMenuItem) {
     var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
     useEffect(function () {
-        var hrefIsActive = isIdActive(href, activeMenuItem);
-        var idIsActive = isIdActive(id, activeMenuItem);
-        var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
-        setIsActive(hrefIsActive || idIsActive || generatedIdIsActive);
+        var isHrefActive = isElementActive(href, activeMenuItem);
+        var isIdActive = isElementActive(id, activeMenuItem);
+        var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);
+        setIsActive(isHrefActive || isIdActive || isGeneratedIdActive);
     }, [activeMenuItem]);
     return isActive;
 };

package/hooks/useMobileSeparatedMenuScroll.js

@@ -6,7 +6,7 @@ export var useMobileSeparatedMenuScroll = function () {
     var checkScroll = function () {
         var _a, _b;
         var isScrolledToTop = ((_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0;
-        (_b = context.setMobileSeparatedMenuIsScrolling) === null || _b === void 0 ? void 0 : _b.call(context, !isScrolledToTop);
+        (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, !isScrolledToTop);
     };
     useEffect(function () {
         var _a;
@@ -14,7 +14,7 @@ export var useMobileSeparatedMenuScroll = function () {
         return function () {
             var _a, _b;
             (_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', checkScroll, true);
-            (_b = context.setMobileSeparatedMenuIsScrolling) === null || _b === void 0 ? void 0 : _b.call(context, false);
+            (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, false);
         };
     }, []);
     return separatedMenuRef;

package/hooks/useOpenedSubElementState.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { isIdActive, isParentOpened } from '../utils/scripts';
+import { isElementActive, isParentOpened } from '../utils/scripts';
 export var useOpenedSubElementState = function (id, generatedId, openedParents, activeMenuItem) {
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
     useEffect(function () {
         var isOpenedParent = isParentOpened(id, generatedId, openedParents);
-        var idIsActive = isIdActive(id, activeMenuItem);
-        var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
-        setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);
+        var isIdActive = isElementActive(id, activeMenuItem);
+        var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);
+        setIsOpened(isOpenedParent || isOpened || isIdActive || isGeneratedIdActive);
     }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), activeMenuItem]);
     return isOpened;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenu/SideMenu.d.ts

@@ -19,8 +19,11 @@ export interface SideMenuProps extends CommonProps {
     disableSwipe?: boolean;
     value?: string;
     onValueChange?: (value: string) => void;
+    desktopMediaQuery?: string;
+    narrowDesktopMediaQuery?: string;
     tabletMediaQuery?: string;
     mobileMediaQuery?: string;
+    separatedMenuWithOverlay?: boolean;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;

package/src/SideMenu/SideMenu.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
-import { jsStyles } from './SideMenu.styles';
+import { jsStyles, sideMenuMinimizedWidth, sideMenuStandardWidth } from './SideMenu.styles';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
 import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
@@ -20,37 +20,40 @@ import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
 import { useResponsiveLayout } from '@skbkontur/react-ui';
 import { Backdrop } from '../internal/Backdrop';
 import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
-import { isTouchScreen } from '../../utils/scripts';
+import { isTouchDevice } from '../../utils/scripts';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.tabletMediaQuery, tabletMediaQuery = _j === void 0 ? '768px' : _j, _k = _a.mobileMediaQuery, mobileMediaQuery = _k === void 0 ? '0px' : _k, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "tabletMediaQuery", "mobileMediaQuery"]);
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.desktopMediaQuery, desktopMediaQuery = _j === void 0 ? '(min-width: 1200px)' : _j, _k = _a.narrowDesktopMediaQuery, narrowDesktopMediaQuery = _k === void 0 ? '(min-width: 992px)' : _k, _l = _a.tabletMediaQuery, tabletMediaQuery = _l === void 0 ? '(min-width: 768px)' : _l, _m = _a.mobileMediaQuery, mobileMediaQuery = _m === void 0 ? '(min-width: 0px)' : _m, _o = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _o === void 0 ? false : _o, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
     var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
     var customMediaQueries = {
-        isMobile: "(min-width: " + mobileMediaQuery + ")",
-        isTablet: "(min-width: " + tabletMediaQuery + ")",
-        isNarrowDesktop: '(min-width: 992px)',
-        isDesktop: "(min-width: 1200px)",
+        isMobileQuery: mobileMediaQuery,
+        isTabletQuery: tabletMediaQuery,
+        isNarrowDesktopQuery: narrowDesktopMediaQuery,
+        isDesktopQuery: desktopMediaQuery,
     };
-    var _l = useResponsiveLayout({
+    var _p = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobile = _l.isMobile, isTablet = _l.isTablet, isNarrowDesktop = _l.isNarrowDesktop, isDesktop = _l.isDesktop;
-    var isTabletSideMenu = isTablet && !isNarrowDesktop;
-    var isMobileSideMenu = isMobile && !isTablet;
-    var isTabletOrMobileSideMenu = isTabletSideMenu || isMobileSideMenu;
-    var isTouchScreenSideMenu = isTouchScreen() || isMobileSideMenu || isTabletSideMenu;
-    var _m = useState(false), isMinimised = _m[0], setIsMinimised = _m[1];
-    var _o = useState(false), hasScrollBar = _o[0], setHasScrollBar = _o[1];
-    var _p = useState(false), isTransitioned = _p[0], setIsTransitioned = _p[1];
-    var _q = useState('#2291ff'), productColor = _q[0], setProductColor = _q[1];
-    var _r = useState(false), showWidget = _r[0], setShowWidget = _r[1];
-    var _s = useState(value), activeMenuItem = _s[0], setActiveMenuItem = _s[1];
-    var _t = useState(isDesktop || isNarrowDesktop), isShown = _t[0], setIsShown = _t[1];
-    var _u = useState(false), separatedMenuIsShown = _u[0], setSeparatedMenuIsShown = _u[1];
-    var _v = useState(false), mobileSeparatedMenuIsScrolling = _v[0], setMobileSeparatedMenuIsScrolling = _v[1];
+    }), isMobileQuery = _p.isMobileQuery, isTabletQuery = _p.isTabletQuery, isNarrowDesktopQuery = _p.isNarrowDesktopQuery, isDesktopQuery = _p.isDesktopQuery;
+    var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
+    var isTablet = isTabletQuery && !isNarrowDesktopQuery;
+    var isMobile = isMobileQuery && !isTabletQuery;
+    var isTabletOrMobile = isTablet || isMobile;
+    var isTouchScreen = isTouchDevice() || isMobile || isTablet;
+    var separatedMenuWithoutOverlay = isSeparatedMenu && !separatedMenuWithOverlay;
+    var _q = useState(isNarrowDesktop), isMinimized = _q[0], setIsMinimized = _q[1];
+    var _r = useState(false), hasScrollBar = _r[0], setHasScrollBar = _r[1];
+    var _s = useState(false), isBeingTransitioned = _s[0], setIsBeingTransitioned = _s[1];
+    var _t = useState('#2291ff'), productColor = _t[0], setProductColor = _t[1];
+    var _u = useState(false), showWidget = _u[0], setShowWidget = _u[1];
+    var _v = useState(value), activeMenuItem = _v[0], setActiveMenuItem = _v[1];
+    var _w = useState(isDesktopQuery || isNarrowDesktop), isShown = _w[0], setIsShown = _w[1];
+    var _x = useState(false), isSeparatedMenuShown = _x[0], setIsSeparatedMenuShown = _x[1];
+    var _y = useState(true), isMouseOutside = _y[0], setIsMouseOutside = _y[1];
+    var _z = useState(false), isMobileSeparatedMenuScrolling = _z[0], setIsMobileSeparatedMenuScrolling = _z[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -59,22 +62,29 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         };
     });
     useEffect(function () {
-        if (isNarrowDesktop || isDesktop) {
+        if (isNarrowDesktop || isDesktopQuery) {
             setIsShown(true);
         }
-    }, [isNarrowDesktop, isDesktop]);
+        if (isDesktopQuery) {
+            setIsMinimized(false);
+        }
+        if (isNarrowDesktop) {
+            setIsMinimized(true);
+        }
+    }, [isNarrowDesktop, isDesktopQuery]);
     useEffect(function () {
         setActiveMenuItem(value);
     }, [value]);
-    var showMinimisedRoot = function () {
-        if (isMinimised) {
-            setIsTransitioned(true);
-            setIsMinimised(false);
+    var showMinimizedRoot = function (newIsMinimized) {
+        var minimizeWithoutOverlay = separatedMenuWithoutOverlay && newIsMinimized;
+        if ((!isBeingTransitioned || minimizeWithoutOverlay) && newIsMinimized !== isMinimized) {
+            setIsBeingTransitioned(true);
+            setIsMinimized(newIsMinimized);
             if (transitionTimer) {
                 clearTimeout(transitionTimer);
             }
             transitionTimer = setTimeout(function () {
-                setIsTransitioned(false);
+                setIsBeingTransitioned(false);
             }, 1000);
         }
     };
@@ -94,6 +104,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }, 200);
     };
     var handleMouseEnter = function () {
+        if (separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop) {
+            return;
+        }
+        isMouseOutside && showMinimizedRoot(false);
+        setIsMouseOutside(false);
         widgetTimer = setTimeout(function () {
             setShowWidget(true);
         }, 500);
@@ -103,68 +118,90 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             clearTimeout(widgetTimer);
         }
         setShowWidget(false);
+        if (isNarrowDesktop) {
+            setIsMinimized(true);
+        }
+        setIsMouseOutside(true);
+    };
+    var showMinimizedRootForNarrowDesktopWithOverlay = function (e) {
+        if (separatedMenuWithoutOverlay && isNarrowDesktop) {
+            if (e.clientX < parseInt(sideMenuMinimizedWidth)) {
+                showMinimizedRoot(false);
+            }
+            if (e.clientX > parseInt(sideMenuStandardWidth)) {
+                showMinimizedRoot(true);
+            }
+        }
     };
-    var handleSwitchActiveItem = function (id) {
+    var switchActiveMenuItem = function (id) {
         if (id !== value) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
             setActiveMenuItem(id);
         }
     };
     var toggleIsShown = function () {
-        isTabletOrMobileSideMenu && setIsShown(!isShown);
+        isTabletOrMobile && setIsShown(!isShown);
     };
     var turnOffIsShown = function () {
-        isTabletOrMobileSideMenu && setIsShown(false);
+        isTabletOrMobile && setIsShown(false);
     };
+    var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
     return (React.createElement(SideMenuContext.Provider, { value: {
-            isMinimised: isMinimised,
-            isTransitioned: isTransitioned,
+            isMinimized: isMinimized,
+            setIsMinimized: showMinimizedRoot,
+            isBeingTransitioned: isBeingTransitioned,
             isSeparatedMenu: isSeparatedMenu,
             size: size,
             productColor: productColor,
             setProductColor: setProductColor,
             showWidget: showWidget,
             activeMenuItem: activeMenuItem,
-            switchActiveMenuItem: handleSwitchActiveItem,
-            isDesktop: isDesktop,
+            switchActiveMenuItem: switchActiveMenuItem,
+            isDesktop: isDesktopQuery,
             isNarrowDesktop: isNarrowDesktop,
-            isTablet: isTabletSideMenu,
-            isMobile: isMobileSideMenu,
-            isTouchScreen: isTouchScreenSideMenu,
+            isTablet: isTablet,
+            isMobile: isMobile,
+            isTouchScreen: isTouchScreen,
             isShown: isShown,
             toggleIsShown: toggleIsShown,
-            separatedMenuIsShown: separatedMenuIsShown,
-            setSeparatedMenuIsShown: setSeparatedMenuIsShown,
-            mobileSeparatedMenuIsScrolling: mobileSeparatedMenuIsScrolling,
-            setMobileSeparatedMenuIsScrolling: setMobileSeparatedMenuIsScrolling,
+            isSeparatedMenuShown: isSeparatedMenuShown,
+            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
+            separatedMenuWithoutOverlay: separatedMenuWithoutOverlay,
+            setIsMouseOutside: setIsMouseOutside,
+            isMobileSeparatedMenuScrolling: isMobileSeparatedMenuScrolling,
+            setIsMobileSeparatedMenuScrolling: setIsMobileSeparatedMenuScrolling,
         } },
-        React.createElement(ZIndex, { priority: isTabletOrMobileSideMenu ? 'Sidepage' : 0, className: cx((_b = {},
-                _b[jsStyles.sideMenuZIndex()] = true,
-                _b[jsStyles.sideMenuZIndexForTabletsOrMobiles()] = isTabletOrMobileSideMenu,
-                _b[jsStyles.shownSideMenuZIndexForTabletsOrMobiles()] = isShown && isTabletOrMobileSideMenu,
+        React.createElement(ZIndex, { priority: isTabletOrMobile ? 'Sidepage' : 0, className: cx((_b = {},
+                _b[jsStyles.root()] = true,
+                _b[jsStyles.rootForTabletsOrMobiles()] = isTabletOrMobile,
+                _b[jsStyles.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
+                _b[jsStyles.rootForNarrowDesktops()] = isNarrowDesktop,
+                _b[jsStyles.separatedRootForNarrowDesktops()] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
+                _b[jsStyles.separatedRootForDesktops()] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
                 _b)) },
             React.createElement(React.Fragment, null,
-                isTabletOrMobileSideMenu && isShown && React.createElement(Backdrop, null),
+                isTabletOrMobile && isShown && React.createElement(Backdrop, null),
                 React.createElement(RenderLayer, { onClickOutside: turnOffIsShown },
                     React.createElement("aside", __assign({ className: cx((_c = {},
-                            _c[jsStyles.rootWrapper()] = true,
-                            _c[jsStyles.rootWrapperIE()] = isIE11,
-                            _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
+                            _c[jsStyles.wrapper()] = true,
+                            _c[jsStyles.wrapperIE()] = isIE11,
+                            _c[jsStyles.wrapperWithShadow()] = isSideMenuOverContent,
+                            _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktopWithOverlay }),
                         React.createElement("div", { className: cx((_d = {},
-                                _d[jsStyles.root()] = true,
-                                _d[jsStyles.collapsedRootForTabletsOrMobiles()] = !isShown,
-                                _d[jsStyles.rootSafari()] = isSafari,
-                                _d[jsStyles.minimisedRoot()] = isMinimised,
-                                _d[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
-                                _d[jsStyles.rootForTouchScreens()] = isTouchScreenSideMenu,
-                                _d[jsStyles.rootInSeparatedMenuForMobiles()] = isMobileSideMenu && separatedMenuIsShown && isShown,
-                                _d)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
+                                _d[jsStyles.container()] = true,
+                                _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown,
+                                _d[jsStyles.containerSafari()] = isSafari,
+                                _d[jsStyles.minimizedContainer()] = isMinimized,
+                                _d[jsStyles.innerContainer()] = !isSeparatedMenu,
+                                _d[jsStyles.containerForTouchScreens()] = isTouchScreen,
+                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && isShown,
+                                _d)), onScroll: handleScroll },
                             React.createElement("div", { className: cx((_e = {},
-                                    _e[jsStyles.rootInnerContainer()] = true,
-                                    _e[jsStyles.rootInnerWithoutScrollBar()] = !hasScrollBar,
-                                    _e[jsStyles.collapsedRootInnerForTabletsOrMobiles()] = !isShown || separatedMenuIsShown,
+                                    _e[jsStyles.contentWrapper()] = true,
+                                    _e[jsStyles.contentWrapperWithoutScrollBar()] = !hasScrollBar,
+                                    _e[jsStyles.collapsedContentWrapperForTabletsOrMobiles()] = !isShown || isSeparatedMenuShown,
                                     _e)) }, children)),
-                        !disableSwipe && isDesktop && React.createElement(RightBorder, { setIsMinimised: setIsMinimised })))))));
+                        !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {

package/src/SideMenu/SideMenu.styles.d.ts

@@ -1,17 +1,25 @@
+export declare const sideMenuMinimizedWidth = "72px";
+export declare const sideMenuStandardWidth = "232px";
+export declare const sideMenuForTouchScreenWidth = "328px";
+export declare const sideMenuBoxShadow = "4px 4px 24px rgba(0, 0, 0, 0.24)";
 export declare const jsStyles: {
-    sideMenuZIndex(): string;
-    sideMenuZIndexForTabletsOrMobiles(): string;
-    shownSideMenuZIndexForTabletsOrMobiles(): string;
     root(): string;
-    rootSafari(): string;
-    rootInnerWithoutScrollBar(): string;
-    collapsedRootInnerForTabletsOrMobiles(): string;
-    minimisedRoot(): string;
-    rootWithInnerSubMenu(): string;
-    rootForTouchScreens(): string;
-    rootInSeparatedMenuForMobiles(): string;
-    rootInnerContainer(): string;
-    rootWrapper(): string;
-    rootWrapperIE(): string;
-    collapsedRootForTabletsOrMobiles(): string;
+    rootForTabletsOrMobiles(): string;
+    shownRootForTabletsOrMobiles(): string;
+    rootForNarrowDesktops(): string;
+    separatedRootForNarrowDesktops(): string;
+    separatedRootForDesktops(): string;
+    container(): string;
+    containerSafari(): string;
+    contentWrapperWithoutScrollBar(): string;
+    collapsedContentWrapperForTabletsOrMobiles(): string;
+    minimizedContainer(): string;
+    innerContainer(): string;
+    containerForTouchScreens(): string;
+    separatedContainerForMobiles(): string;
+    contentWrapper(): string;
+    wrapper(): string;
+    wrapperIE(): string;
+    wrapperWithShadow(): string;
+    collapsedContainerForTabletsOrMobiles(): string;
 };