Display Sidebar Mode Icons in Personal Dropdown

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

@@ -20,7 +20,9 @@ import {
 
 import UserPicture from '../User/UserPicture';
 
-import GrowiLogo from '../GrowiLogo';
+import SidebarDrawerIcon from '../SidebarDrawerIcon';
+import SidebarDockIcon from '../SidebarDockIcon';
+
 
 const PersonalDropdown = (props) => {
 
@@ -83,14 +85,14 @@ const PersonalDropdown = (props) => {
   /* eslint-disable react/prop-types */
   const DrawerIcon = props => (
     <>
-      <div id={props.id} className="px-2"><GrowiLogo /></div>
+      <div id={props.id} className="px-2"><SidebarDrawerIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   const DockIcon = props => (
     <>
-      <i id={props.id} className="ti-layout-sidebar-left px-2"></i>
-      <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
+      <div id={props.id} className="px-2"><SidebarDockIcon /></div>
+      <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   /* eslint-enable react/prop-types */

src/client/js/components/SidebarDockIcon.jsx

@@ -3,51 +3,17 @@ import React from 'react';
 const SidebarDockIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 226.44 196.11"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
+    className="sidebar-mode-icon"
   >
-    <path
-      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
-      className="group2"
-    >
-    </path>
-    <path
-      // eslint-disable-next-line max-len
-      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
-      className="group1"
-    >
-    </path>
+    <rect className="svg icon-collision" width="23" height="23" />
+    <path d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z" />
+    <rect x="7.49" y="3.05" width="1.2" height="16.91" />
   </svg>
+
 );
 
-//   <svg
-//   xmlns="http://www.w3.org/2000/svg"
-//   viewBox="0 0 23 23"
-//   className="sidebar-mode-icon"
-//   width="14"
-//   height="14"
-//   >
-//   <defs>
-//     <style>.cls-1{fill:none;}</style>
-//   </defs>
-//   <g id="レイヤー_2" data-name="レイヤー 2">
-//     <g id="レイヤー_1-2" data-name="レイヤー 1">
-//       <rect class="cls-1" width="23" height="23"/>
-//       <path d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z"/>
-//       <rect x="7.49" y="3.05" width="1.2" height="16.91"/>
-//     </g>
-//   </g>
-// </svg>
 
 export default SidebarDockIcon;

src/client/js/components/SidebarDrawerIcon.jsx

@@ -3,48 +3,27 @@ import React from 'react';
 const SidebarDrawerIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 226.44 196.11"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
   >
-    <path
-      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
-      className="group2"
-    >
-    </path>
-    <path
-      // eslint-disable-next-line max-len
-      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
-      className="group1"
-    >
-    </path>
+    <g>
+      <rect className="svg icon-collision" width="23" height="23" />
+      <path d="M20.9,3.9c0.3,0,0.6,0.3,0.6,0.6v13.9c0,0.3-0.3,0.6-0.6,0.6H2.1c-0.3,0-0.6-0.3-0.6-0.6V4.5c0-0.3,0.3-0.6,0.6-0.6H20.9
+        M20.9,2.4H2.1C1,2.4,0,3.4,0,4.5c0,0,0,0,0,0v13.9c0,1.2,1,2.1,2.1,2.1c0,0,0,0,0,0h18.7c1.2,0,2.1-0.9,2.1-2.1c0,0,0,0,0,0V4.5
+        C23,3.4,22,2.4,20.9,2.4C20.9,2.4,20.9,2.4,20.9,2.4z"
+      />
+      <rect x="7.5" y="3.9" width="1.2" height="0.8" />
+      <rect x="7.5" y="15.3" width="1.2" height="1.5" />
+      <rect x="7.5" y="12.3" width="1.2" height="1.5" />
+      <rect x="7.5" y="9.2" width="1.2" height="1.6" />
+      <rect x="7.5" y="6.1" width="1.2" height="1.6" />
+      <rect x="7.5" y="18.4" width="1.2" height="0.8" />
+      <path d="M15.1,14.9c-0.2,0-0.3-0.1-0.4-0.2l-2.8-2.8c-0.2-0.2-0.2-0.6,0-0.8l2.8-2.8c0.2-0.2,0.6-0.2,0.9,0s0.2,0.6,0,0.9l-2.4,2.4
+        l2.4,2.4c0.2,0.2,0.2,0.6,0,0.9C15.4,14.8,15.3,14.9,15.1,14.9z"
+      />
+    </g>
   </svg>
 );
 
-
-// const SidebarDrawerIcon = () => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     viewBox="0 0 14 14"
-//     width="20"
-//     height="20"
-//     >
-//     <defs><style>.cls-1{fill:none;}</style></defs>
-//     <rect class="cls-1" width="23" height="23"/>
-//     <path d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z"/><rect x="7.49" y="3.87" width="1.2" height="0.75"/><path d="M8.69,16.85H7.49V15.32h1.2Zm0-3.06H7.49V12.26h1.2Zm0-3H7.49V9.21h1.2Zm0-3.06H7.49V6.15h1.2Z"/>
-//     <rect x="7.49" y="18.38" width="1.2" height="0.75"/><path d="M15.09,14.88a.58.58,0,0,1-.42-.17l-2.79-2.79a.6.6,0,0,1,0-.84l2.79-2.79a.6.6,0,0,1,.85.85L13.16,11.5l2.36,2.36a.61.61,0,0,1,0,.85A.59.59,0,0,1,15.09,14.88Z"/>
-//   </svg>
-);
-
 export default SidebarDrawerIcon;
-

src/client/styles/scss/theme/_apply-colors.scss

@@ -424,3 +424,7 @@ mark.rbt-highlight-text {
 .bg-box {
   background-color: $bgcolor-global;
 }
+
+.svg.icon-collision {
+  fill: transparent;
+}