General browser fixes for collapsed sidebar (#914)

* General browser fixes for collapsed sidebar * Formatted using Prettier * Added EOS Keyboard Double Arrow Right icon * Changed position of title tag for Sidebar menu items * Added three const values for sidebar icon color, size and classname
trento-project · Oct 19, 2022 · 36be7ad · 36be7ad
1 parent cfebd0a
commit 36be7ad
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 38 deletions.
diff --git a/assets/js/components/Layout/EosKeyboardDoubleArrowLeft.jsx b/assets/js/components/Layout/EosKeyboardDoubleArrowLeft.jsx
diff --git a/assets/js/components/Layout/Layout.jsx b/assets/js/components/Layout/Layout.jsx
@@ -10,10 +10,11 @@ import {
   EOS_STORAGE,
   EOS_LIST,
   EOS_SETTINGS,
+  EOS_KEYBOARD_DOUBLE_ARROW_LEFT,
+  EOS_KEYBOARD_DOUBLE_ARROW_RIGHT,
 } from 'eos-icons-react';
 
 import TrentoLogo from '../../../static/trento-logo-stacked.svg';
-import EosKeyboardDoubleArrowLeft from './EosKeyboardDoubleArrowLeft';
 
 import classNames from 'classnames';
 
@@ -68,6 +69,10 @@ const Layout = () => {
     '[name~=csrf-token][content]'
   ).content;
 
+  const sidebarIconColor = 'currentColor';
+  const sidebarIconClassName = 'text-gray-400 hover:text-gray-300';
+  const sidebarIconSize = '24';
+
   return (
     <>
       <main className="bg-gray-100 dark:bg-gray-800 relative">
@@ -89,23 +94,30 @@ const Layout = () => {
                 onClick={handleSidebar}
                 title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
               >
-                <EosKeyboardDoubleArrowLeft
-                  className="text-gray-400 hover:text-gray-300"
-                  flip={isCollapsed}
-                />
+                {isCollapsed ? (
+                  <EOS_KEYBOARD_DOUBLE_ARROW_RIGHT
+                    size={sidebarIconSize}
+                    color={sidebarIconColor}
+                    className={sidebarIconClassName}
+                  />
+                ) : (
+                  <EOS_KEYBOARD_DOUBLE_ARROW_LEFT
+                    size={sidebarIconSize}
+                    color={sidebarIconColor}
+                    className={sidebarIconClassName}
+                  />
+                )}
               </button>
             </div>
             <div className="bg-white h-full dark:bg-gray-700">
               <div className="flex items-center justify-center pt-6">
-                <div className="self-center">
-                  <img
-                    className={classNames(
-                      'h-auto transition-scale duration-100',
-                      { 'w-12': isCollapsed, 'w-24': !isCollapsed }
-                    )}
-                    src={TrentoLogo}
-                  />{' '}
-                </div>
+                <img
+                  className={classNames(
+                    'h-auto transition-scale duration-100',
+                    { 'w-12': isCollapsed, 'w-24': !isCollapsed }
+                  )}
+                  src={TrentoLogo}
+                />{' '}
               </div>
               <nav className="mt-6">
                 <div>
@@ -122,11 +134,9 @@ const Layout = () => {
                         }
                         to={item.href}
                         end={item.href == '/'}
+                        title={item.name}
                       >
-                        <span
-                          className="text-left"
-                          title={isCollapsed && item.name}
-                        >
+                        <span className="text-left">
                           <item.icon />
                         </span>
                         <span