add Light/Dard switch

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -27,20 +27,30 @@ const PersonalDropdown = (props) => {
 
   return (
     <>
+      {/* Button */}
       <a className="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
         <UserPicture user={user} withoutLink />&nbsp;{user.name}
       </a>
+
+      {/* Menu */}
       <div className="dropdown-menu dropdown-menu-right">
+
         <a className="dropdown-item" href={`/user/${user.username}`}><i className="icon-fw icon-user"></i>{ t('User\'s Home') }</a>
         <a className="dropdown-item" href="/me"><i className="icon-fw icon-wrench"></i>{ t('User Settings') }</a>
+
         <div className="dropdown-divider"></div>
+
         <a className="dropdown-item" href={`/user/${user.username}#user-draft-list`}><i className="icon-fw icon-docs"></i>{ t('List Drafts') }</a>
         <a className="dropdown-item" href="/trash"><i className="icon-fw icon-trash"></i>{ t('Deleted Pages') }</a>
+
         <div className="dropdown-divider"></div>
-        <div>
+
+        <h6 className="dropdown-header">Switching Mode</h6>
+        <form className="px-4 form-inline">
           Light
-          <div className="custom-control custom-switch checkbox-secondary">
+          <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
             <input
+              id="isDarkMode"
               className="custom-control-input"
               type="checkbox"
               checked={appContainer.state.isDarkMode}
@@ -48,12 +58,16 @@ const PersonalDropdown = (props) => {
                 appContainer.changeColorScheme(e.target.checked);
               }}
             />
+            <label className="custom-control-label" htmlFor="isDarkMode"></label>
           </div>
           Dark
-        </div>
+        </form>
+
         <div className="dropdown-divider"></div>
+
         <a className="dropdown-item" type="button" onClick={logoutHandler}><i className="icon-fw icon-power"></i>{ t('Sign out') }</a>
       </div>
+
     </>
   );