Change devices and fix several bugs (#119)

Author: tar-g

templates/react/application/src/components/header/header.js

@@ -13,12 +13,9 @@ export default ({ menuToggleEnabled, title, toggleMenu, userMenuItems }) => (
         location={'before'}
         widget={'dxButton'}
         cssClass={'menu-button'}
-        options={{
-          icon: 'menu',
-          stylingMode: 'text',
-          onClick: toggleMenu
-        }}
-      />
+      >
+        <Button icon="menu" stylingMode="text" onClick={toggleMenu} />
+      </Item>
       <Item
         location={'before'}
         cssClass={'header-title'}

templates/react/application/src/components/user-panel/user-panel.scss

@@ -36,7 +36,7 @@
 .user-panel {
   .dx-list-item .dx-icon {
     vertical-align: middle;
-    color: rgba(0, 0, 0, 0.87);
+    color: $base-text-color;
     margin-right: 16px;
   }
   .dx-rtl .dx-list-item .dx-icon {

templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.js

@@ -1,3 +1,4 @@
+import Button from 'devextreme-react/button';
 import Drawer from 'devextreme-react/drawer';
 import ScrollView from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
@@ -76,17 +77,16 @@ class SideNavInnerToolbar extends React.Component {
               onMenuReady={this.menuPatch.onReady}
             >
               <Toolbar id={'navigation-header'}>
-                <Item
-                  location={'before'}
-                  cssClass={'menu-button'}
-                  widget={'dxButton'}
-                  visible={minMenuSize !== 0}
-                  options={{
-                    icon: 'menu',
-                    stylingMode: 'text',
-                    onClick: this.toggleMenu
-                  }}
-                />
+                {
+                  minMenuSize !== 0 &&
+                  <Item
+                    location={'before'}
+                    cssClass={'menu-button'}
+                    widget={'dxButton'}
+                  >
+                    <Button icon="menu" stylingMode="text" onClick={this.toggleMenu} />
+                  </Item>
+                }
                 <Item location={'before'} cssClass={'header-title'} text={title} />
               </Toolbar>
             </SideNavigationMenu>

templates/vue/application/src/components/user-panel.vue

@@ -89,7 +89,7 @@ export default {
 .user-panel {
   .dx-list-item .dx-icon {
     vertical-align: middle;
-    color: rgba(0, 0, 0, 0.87);
+    color: $base-text-color;
     margin-right: 16px;
   }
   .dx-rtl .dx-list-item .dx-icon {

templates/vue/application/src/layouts/side-nav-inner-toolbar.vue

@@ -32,7 +32,7 @@
       >
       <!-- eslint-enable-->
         <dx-toolbar id="navigation-header">
-          <dx-item location="before" css-class="menu-button">
+          <dx-item v-if="!isXSmall" location="before" css-class="menu-button">
             <!-- eslint-disable vue/no-unused-vars -->
             <dx-button
               icon="menu"