refactor

packages/app/src/components/Navbar/AppearanceModeDropdown.tsx

@@ -11,7 +11,7 @@ import SunIcon from '../Icons/SunIcon';
 type AppearanceModeDropdownProps = {
   isAuthenticated: boolean,
 }
-const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: AppearanceModeDropdownProps) => {
+export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: AppearanceModeDropdownProps) => {
 
   const { t } = useTranslation();
 
@@ -122,5 +122,3 @@ const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Appearanc
   );
 
 };
-
-export default AppearanceModeDropdown;

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ import GrowiLogo from '../Icons/GrowiLogo';
 import InAppNotificationDropdown from '../InAppNotification/InAppNotificationDropdown';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
-import AppearanceModeDropdown from './AppearanceModeDropdown';
+import { AppearanceModeDropdown } from './AppearanceModeDropdown';
 import GlobalSearch from './GlobalSearch';
 import PersonalDropdown from './PersonalDropdown';
 
@@ -30,7 +30,7 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
   const { currentUser } = props;
   const isAuthenticated = currentUser != null;
 
-  const authenticatedNavItem = () => {
+  const authenticatedNavItem = useMemo(() => {
     return (
       <>
         <li className="nav-item">
@@ -54,11 +54,11 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
         </li>
       </>
     );
-  };
+  }, [t, currentPagePath, openCreateModal]);
 
-  const notAuthenticatedNavItem = () => {
+  const notAuthenticatedNavItem = useMemo(() => {
     return <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>;
-  };
+  }, []);
 
   return (
     <>
@@ -66,7 +66,7 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
         <AppearanceModeDropdown isAuthenticated={isAuthenticated} />
       </li>
 
-      {isAuthenticated ? authenticatedNavItem() : notAuthenticatedNavItem()}
+      {isAuthenticated ? authenticatedNavItem : notAuthenticatedNavItem}
     </>
   );
 });

packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -121,6 +121,98 @@ const PersonalDropdown = () => {
 
         <div className="dropdown-divider"></div>
 
+        {/* Sidebar Mode */}
+        {/* <h6 className="dropdown-header">{t('personal_dropdown.sidebar_mode')}</h6>
+        <form className="px-4">
+          <div className="form-row justify-content-center">
+            <div className="form-group col-auto mb-0 d-flex align-items-center">
+              <IconWithTooltip id="iwt-sidebar-drawer" label="Drawer">
+                <SidebarDrawerIcon />
+              </IconWithTooltip>
+              <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+                <input
+                  id="swSidebarMode"
+                  className="custom-control-input"
+                  type="checkbox"
+                  checked={!isPreferDrawerMode}
+                  onChange={e => preferDrawerModeSwitchModifiedHandler(!e.target.checked)}
+                />
+                <label className="custom-control-label" htmlFor="swSidebarMode"></label>
+              </div>
+              <IconWithTooltip id="iwt-sidebar-dock" label="Dock">
+                <SidebarDockIcon />
+              </IconWithTooltip>
+            </div>
+          </div>
+        </form> */}
+
+        {/* Sidebar Mode on Editor */}
+        {/* <h6 className="dropdown-header">{t('personal_dropdown.sidebar_mode_editor')}</h6>
+        <form className="px-4">
+          <div className="form-row justify-content-center">
+            <div className="form-group col-auto mb-0 d-flex align-items-center">
+              <IconWithTooltip id="iwt-sidebar-editor-drawer" label="Drawer">
+                <SidebarDrawerIcon />
+              </IconWithTooltip>
+              <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+                <input
+                  id="swSidebarModeOnEditor"
+                  className="custom-control-input"
+                  type="checkbox"
+                  checked={!isPreferDrawerModeOnEdit}
+                  onChange={e => preferDrawerModeOnEditSwitchModifiedHandler(!e.target.checked)}
+                />
+                <label className="custom-control-label" htmlFor="swSidebarModeOnEditor"></label>
+              </div>
+              <IconWithTooltip id="iwt-sidebar-editor-dock" label="Dock">
+                <SidebarDockIcon />
+              </IconWithTooltip>
+            </div>
+          </div>
+        </form> */}
+
+        {/* <div className="dropdown-divider"></div> */}
+
+        {/* Color Mode */}
+        {/* <h6 className="dropdown-header">{t('personal_dropdown.color_mode')}</h6>
+        <form className="px-4">
+          <div className="form-row">
+            <div className="form-group col-auto">
+              <div className="custom-control custom-checkbox">
+                <input
+                  id="cbFollowOs"
+                  className="custom-control-input"
+                  type="checkbox"
+                  checked={useOsSettings}
+                  onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
+                />
+                <label className="custom-control-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
+              </div>
+            </div>
+          </div>
+          <div className="form-row justify-content-center">
+            <div className="form-group col-auto mb-0 d-flex align-items-center">
+              <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-icon-container-muted' : ''}>
+                <SunIcon />
+              </IconWithTooltip>
+              <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+                <input
+                  id="swUserPreference"
+                  className="custom-control-input"
+                  type="checkbox"
+                  checked={isDarkMode}
+                  disabled={useOsSettings}
+                  onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
+                />
+                <label className="custom-control-label" htmlFor="swUserPreference"></label>
+              </div>
+              <IconWithTooltip id="iwt-dark" label="Dark" additionalClasses={useOsSettings ? 'grw-icon-container-muted' : ''}>
+                <MoonIcon />
+              </IconWithTooltip>
+            </div>
+          </div>
+        </form> */}
+
         <button type="button" className="dropdown-item" onClick={logoutHandler}><i className="icon-fw icon-power"></i>{ t('Sign out') }</button>
       </div>