diff --git a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
index 1986c83e5..555df385c 100644
--- a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
@@ -1,11 +1,13 @@
 import React, { Component } from "react";
-import Navigation from "../../view/settings/Navigation";
+import NavigationView from "../../view/settings/Navigation";
 import { Device } from '../../../../../common/mobile/utils/device';
 import { f7, Sheet } from 'framework7-react';
+import { withTranslation } from 'react-i18next';
 
 class NavigationController extends Component {
     constructor(props) {
         super(props);
+        this.updateNavigation = this.updateNavigation.bind(this);
     }
 
     closeModal() {
@@ -16,6 +18,51 @@ class NavigationController extends Component {
         }
     }
 
+    updateNavigation() {
+        const api = Common.EditorApi.get();
+        const navigationObject = api.asc_ShowDocumentOutline();
+
+        if (!navigationObject) return;
+
+        const count = navigationObject.get_ElementsCount();
+        const { t } = this.props;
+       
+        let arrHeaders = [],
+            prevLevel = -1,
+            headerLevel = -1,
+            firstHeader = !navigationObject.isFirstItemNotHeader();
+
+        for (let i = 0; i < count; i++) {
+            let level = navigationObject.get_Level(i),
+                hasParent = true;
+            if (level > prevLevel && i > 0)
+                arrHeaders[i - 1]['hasSubItems'] = true;
+            if (headerLevel < 0 || level <= headerLevel) {
+                if (i > 0 || firstHeader)
+                    headerLevel = level;
+                hasParent = false;
+            }
+
+            arrHeaders.push({
+                name: navigationObject.get_Text(i),
+                level: level,
+                index: i,
+                hasParent: hasParent,
+                isEmptyItem: navigationObject.isEmptyItem(i)
+            });
+
+            prevLevel = level;
+        }
+
+        if (count > 0 && !firstHeader) {
+            arrHeaders[0]['hasSubItems'] = false;
+            arrHeaders[0]['isNotHeader'] =  true;
+            arrHeaders[0]['name'] = t('Settings.textBeginningDocument');
+        }
+
+        return arrHeaders;
+    }
+
     onSelectItem(index) {
         const api = Common.EditorApi.get();
         const navigationObject = api.asc_ShowDocumentOutline();
@@ -27,9 +74,13 @@ class NavigationController extends Component {
 
     render() {
         return (
-            <Navigation onSelectItem={this.onSelectItem} />
+            <NavigationView 
+                onSelectItem={this.onSelectItem} 
+                updateNavigation={this.updateNavigation}
+                closeModal={this.closeModal}
+            />
         );
     }
 }
 
-export default NavigationController
\ No newline at end of file
+export default withTranslation()(NavigationController);
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
index e86b3f2eb..1793ee5ef 100644
--- a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Component } from "react";
 import { Device } from '../../../../../common/mobile/utils/device';
 import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -9,52 +9,12 @@ const Navigation = props => {
     const android = Device.android;
     const api = Common.EditorApi.get();
     const navigationObject = api.asc_ShowDocumentOutline();
-    const count = navigationObject.get_ElementsCount();
     const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
-    const arrHeaders = [];
-
-    const updateNavigation = () => {
-        if (!navigationObject) return;
-       
-        let prevLevel = -1,
-            headerLevel = -1,
-            firstHeader = !navigationObject.isFirstItemNotHeader();
-
-        for (let i = 0; i < count; i++) {
-            let level = navigationObject.get_Level(i),
-                hasParent = true;
-            if (level > prevLevel && i > 0)
-                arrHeaders[i - 1]['hasSubItems'] = true;
-            if (headerLevel < 0 || level <= headerLevel) {
-                if (i > 0 || firstHeader)
-                    headerLevel = level;
-                hasParent = false;
-            }
-
-            arrHeaders.push({
-                name: navigationObject.get_Text(i),
-                level: level,
-                index: i,
-                hasParent: hasParent,
-                isEmptyItem: navigationObject.isEmptyItem(i)
-            });
-
-            prevLevel = level;
-        }
-
-        if (count > 0 && !firstHeader) {
-            arrHeaders[0]['hasSubItems'] = false;
-            arrHeaders[0]['isNotHeader'] =  true;
-            arrHeaders[0]['name'] = t('Settings.textBeginningDocument');
-        }
-    }
-
-    updateNavigation();
-    // console.log(navigationObject);
+    const arrHeaders = props.updateNavigation();
 
     return (
         <Page>
-            <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
+            {!Device.phone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
             {!arrHeaders.length 
                 ?
                 <div className="empty-screens">
@@ -81,60 +41,48 @@ const Navigation = props => {
     )
 }
 
-const NavigationSheet = () => {
+const NavigationSheetView = props => {
     useEffect(() => {
-        f7.sheet.open('#view-navigation-sheet');
+        if(Device.phone) {
+            f7.sheet.open('#view-navigation-sheet', true);
+        }
+
+        return () => {}
     });
 
-    const [stateHeight, setHeight] = useState('45%');
-    const [stateOpacity, setOpacity] = useState(1);
-
-    const [stateStartY, setStartY] = useState();
-    const [isNeedClose, setNeedClose] = useState(false);
-
-    const handleTouchStart = (event) => {
-        const touchObj = event.changedTouches[0];
-        setStartY(parseInt(touchObj.clientY));
-    };
-
-    const handleTouchMove = (event) => {
-        const touchObj = event.changedTouches[0];
-        const dist = parseInt(touchObj.clientY) - stateStartY;
-
-        if (dist < 0) { // to top
-            setHeight('90%');
-            setOpacity(1);
-            setNeedClose(false);
-        } else if (dist < 80) {
-            setHeight('45%');
-            setOpacity(1);
-            setNeedClose(false);
-        } else {
-            setNeedClose(true);
-            setOpacity(0.6);
-        }
-    };
-
-    const handleTouchEnd = (event) => {
-        const touchObj = event.changedTouches[0];
-        const swipeEnd = parseInt(touchObj.clientY);
-        const dist = swipeEnd - stateStartY;
-
-        if (isNeedClose) {
-            closeCurComments();
-        } else if (stateHeight === '90%' && dist > 20) {
-            setHeight('45%');
-        }
-    };
-
     return (
-        <Sheet id='view-navigation-sheet' style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
-            <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
+        <Sheet id="view-navigation-sheet" swipeToClose>
+            {/* <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
                 <Icon icon='icon-swipe' />
-            </div>
-            <Navigation />
+            </div> */}
+            <Navigation 
+                updateNavigation={props.updateNavigation} 
+                onSelectItem={props.onSelectItem} 
+                closeModal={props.closeModal}
+            />
         </Sheet>
     )
-};
+}
 
-export default Navigation;
\ No newline at end of file
+const NavigationView = props => {
+
+    return (
+        !Device.phone 
+            ? 
+                <Navigation 
+                    updateNavigation={props.updateNavigation} 
+                    onSelectItem={props.onSelectItem} 
+                    closeModal={props.closeModal}
+                />
+                
+            :
+                <NavigationSheetView
+                    updateNavigation={props.updateNavigation} 
+                    onSelectItem={props.onSelectItem} 
+                    closeModal={props.closeModal}
+                />
+            
+    )
+}
+
+export default NavigationView;
\ No newline at end of file