remake user panel menu

fix left side menu theme mode while change window width

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/react/application/src/components/header/Header.tsx

@@ -30,23 +30,13 @@ export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTyp
         >
           <ThemeSwitcher />
         </Item>
-        <Item
-          location={'after'}
-          locateInMenu={'auto'}
-          menuItemTemplate={'userPanelTemplate'}
-        >
-          <Button
-            className={'user-button authorization'}
-            width={210}
-            height={'100%'}
-            stylingMode={'text'}
-          >
-            <UserPanel menuMode={'context'} />
-          </Button>
+        <Item location='after' locateInMenu='auto' menuItemTemplate='userPanelTemplate'>
+          <UserPanel menuMode='context' />
         </Item>
-        <Template name={'userPanelTemplate'}>
-          <UserPanel menuMode={'list'} />
+        <Template name='userPanelTemplate'>
+          <UserPanel menuMode='list' />
         </Template>
+
       </Toolbar>
     </header>
 )}

packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
+import * as events from 'devextreme/events';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
 import './SideNavigationMenu.scss';
 <%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>
 
-import * as events from 'devextreme/events';
+import { ThemeContext } from '../../theme';
 
 export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
   const {
@@ -17,6 +18,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
     onMenuReady
   } = props;
 
+  const theme = useContext(ThemeContext);
   const { isLarge } = useScreenSize();
   function normalizePath () {
     return navigation.map((item) => (
@@ -64,7 +66,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
 
   return (
     <div
-      className={'dx-swatch-additional side-navigation-menu'}
+      className={`dx-swatch-additional${theme.isDark() ? '-dark' : ''} side-navigation-menu`}
       ref={getWrapperRef}
     >
       {children}

packages/devextreme-cli/src/templates/react/application/src/components/theme-switcher/ThemeSwitcher.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useContext } from 'react';
 import Button from 'devextreme-react/button';
-import {useThemeContext} from '../../theme';
+import { ThemeContext } from '../../theme';
 
 export const ThemeSwitcher = () => {
-  const themeContext = useThemeContext();
+  const themeContext = useContext(ThemeContext);
 
   const onButtonClick = useCallback(() => {
     themeContext?.switchTheme();

packages/devextreme-cli/src/templates/react/application/src/components/user-panel/UserPanel.scss

@@ -1,66 +1,51 @@
-@import "../../themes/generated/variables.base.scss";
+.app .header-toolbar .user-panel .user-button.dx-dropdownbutton img.dx-icon {
+  height: 100%;
+  width: auto;
 
-.user-info {
+  .dx-theme-generic & {
+    max-height: 32px;
+  }
+}
+
+.user-panel  {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+
+  .user-button.dx-dropdownbutton {
+    margin-left: 5px;
+
+    img.dx-icon {
+      border-radius: 50%;
+      margin: 0;
+      width: auto;
+      aspect-ratio: 1 / 1;
+      box-sizing: border-box;
+      border: 1px solid var(--dx-color-border);
+      object-fit: cover;
+      object-position: top;
+      background: rgb(255, 255, 255);
+      background-clip: padding-box;
+    }
 
-  .dx-toolbar-menu-section & {
-    padding: 10px 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
 
-  .image-container {
-    overflow: hidden;
-    border-radius: 50%;
-    height: 30px;
-    width: 30px;
-    margin: 0 4px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 
-    .user-image {
-      width: 100%;
-      height: 100%;
-      background: url("https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png")
-      no-repeat #fff;
-      background-size: cover;
-    }
-  }
+    .dx-buttongroup {
+      vertical-align: middle;
 
-  .user-name {
-    font-size: 14px;
-    color: var(--base-text-color);
-    margin: 0 9px;
-  }
-}
+      .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
+        .dx-button-content {
+          padding: 0;
+        }
 
-.user-panel {
-  .dx-list-item .dx-icon {
-    vertical-align: middle;
-    color: $base-text-color;
-    margin-right: 16px;
-  }
-  .dx-rtl .dx-list-item .dx-icon {
-    margin-right: 0;
-    margin-left: 16px;
-  }
-}
+        &.dx-state-hover,
+        &.dx-state-focused {
+          background-color: transparent;
 
-.dx-context-menu.user-menu.dx-menu-base {
-  &.dx-rtl {
-    .dx-submenu .dx-menu-items-container .dx-icon {
-      margin-left: 16px;
+          img.dx-icon {
+            border-color: var(--dx-color-primary);
+          }
+        }
+      }
     }
   }
-  .dx-submenu .dx-menu-items-container .dx-icon {
-    margin-right: 16px;
-  }
-  .dx-menu-item .dx-menu-item-content {
-    padding: 3px 15px 4px;
-  }
-}
-
-.dx-theme-generic .user-menu .dx-menu-item-content .dx-menu-item-text {
-  padding-left: 4px;
-  padding-right: 4px;
 }

packages/devextreme-cli/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -1,18 +1,19 @@
 import React, { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
-import ContextMenu, { Position } from 'devextreme-react/context-menu';
+import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
 import './UserPanel.scss';
 <%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 
 export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
-  const { user, signOut } = useAuth();
+  const { signOut } = useAuth();
   const navigate = useNavigate();
 
   const navigateToProfile = useCallback(() => {
     navigate("/profile");
   }, [navigate]);
+
   const menuItems = useMemo(() => ([
     {
       text: 'Profile',
@@ -25,34 +26,29 @@ export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps
       onClick: signOut
     }
   ]), [navigateToProfile, signOut]);
-  return (
-    <div className={'user-panel'}>
-      <div className={'user-info'}>
-        <div className={'image-container'}>
-          <div
-            style={{
-              background: `url(${user<%=#isTypeScript%>!<%=/isTypeScript%>.avatarUrl}) no-repeat #fff`,
-              backgroundSize: 'cover'
-            }}
-            className={'user-image'} />
-        </div>
-        <div className={'user-name'}>{user<%=#isTypeScript%>!<%=/isTypeScript%>.email}</div>
-      </div>
 
+  const dropDownButtonAttributes = {
+    class: 'user-button'
+  };
+
+  const buttonDropDownOptions = {
+    width: '150px'
+  };
+
+  return (
+    <div className='user-panel'>
       {menuMode === 'context' && (
-        <ContextMenu
-          items={menuItems}
-          target={'.user-button'}
-          showEvent={'dxclick'}
-          width={210}
-          cssClass={'user-menu'}
-        >
-          <Position my={{ x: 'center', y: 'top' }} at={{ x: 'center', y: 'bottom' }} />
-        </ContextMenu>
+        <DropDownButton stylingMode='text'
+                        icon='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+                        showArrowIcon={false}
+                        elementAttr={dropDownButtonAttributes}
+                        dropDownOptions={buttonDropDownOptions}
+                        items={menuItems}>
+        </DropDownButton>
       )}
       {menuMode === 'list' && (
-        <List className={'dx-toolbar-menu-action'} items={menuItems} />
+        <List items={menuItems} />
       )}
     </div>
   );
-}
+};

packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss

@@ -8,6 +8,10 @@ body {
 }
 
 .dx-viewport {
+  .dx-popup-wrapper {
+    z-index: 1510 !important;
+  }
+
   #root {
     height: 100%;
   }
@@ -17,6 +21,7 @@ body {
   }
 
   .app {
+    background-color: var(--base-bg-darken-5);
     display: flex;
     height: 100%;
     width: 100%;

packages/devextreme-cli/src/templates/react/application/src/theme.tsx

@@ -1,21 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 const themes = ['light', 'dark'];
 const themeClassNamePrefix = 'dx-swatch-';
+let currentTheme =  getNextTheme();
 
-function getNextTheme(theme?) {
+function getNextTheme(theme = null) {
   return themes[themes.indexOf(theme) + 1] || themes[0];
 }
 
 function getCurrentTheme() {
-  return getNextTheme();
+  return currentTheme;
 }
 
-function toggleTheme(currentTheme) {
-  const prevTheme = currentTheme;
+function toggleTheme(prevTheme) {
   const isCurrentThemeDark = prevTheme === 'dark';
 
-  const newTheme = getNextTheme(currentTheme);
+  const newTheme = getNextTheme(prevTheme);
 
   document.body.classList.replace(
     themeClassNamePrefix + prevTheme,
@@ -30,18 +30,24 @@ function toggleTheme(currentTheme) {
     .querySelector(`.${additionalClassName}`)?.classList
     .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
 
+  currentTheme = newTheme;
+
   return newTheme;
 }
 
 export function useThemeContext() {
   const [theme, setTheme] = useState(getCurrentTheme());
   const switchTheme = useCallback(() => setTheme((currentTheme) => toggleTheme(currentTheme)), []);
 
+  const isDark = useCallback(()<%=#isTypeScript%>: boolean<%=/isTypeScript%> => {
+    return currentTheme === 'dark';
+  }, []);
+
   if (!document.body.className.includes(themeClassNamePrefix)) {
     document.body.classList.add(themeClassNamePrefix + theme);
   }
 
-  return useMemo(()=> ({ theme, switchTheme }), [theme]);
+  return useMemo(()=> ({ theme, switchTheme, isDark }), [theme]);
 }
 
 export const ThemeContext = React.createContext(null);