Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

General browser fixes for collapsed sidebar #914

Merged
merged 5 commits into from
Oct 19, 2022
Merged

General browser fixes for collapsed sidebar #914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
06643ae
General browser fixes for collapsed sidebar
jagabomb Oct 19, 2022
a4f1f64
Formatted using Prettier
jagabomb Oct 19, 2022
8d39b79
Added EOS Keyboard Double Arrow Right icon
jagabomb Oct 19, 2022
6bf8274
Changed position of title tag for Sidebar menu items
jagabomb Oct 19, 2022
7c7be7e
Added three const values for sidebar icon color, size and classname
jagabomb Oct 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 0 additions & 20 deletions assets/js/components/Layout/EosKeyboardDoubleArrowLeft.jsx
View file
Open in desktop

This file was deleted.

46 changes: 28 additions & 18 deletions assets/js/components/Layout/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ import {
EOS_STORAGE,
EOS_LIST,
EOS_SETTINGS,
EOS_KEYBOARD_DOUBLE_ARROW_LEFT,
jagabomb marked this conversation as resolved.
Show resolved Hide resolved
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';

Expand Down Expand Up @@ -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">
Expand All @@ -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 ? (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dottorblaster So I am now using two implementations of the EOS Keyboard Double Arrow icons but it @arbulu89 had a suggestion to create a React component for both icons so that we can reduce the repeated attributes for size, color and classname. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jagabomb a component would be an overkill to me, maybe we can try just defining these things as const?

Copy link
Contributor Author

@jagabomb jagabomb Oct 19, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dottorblaster Cool, I have defined the three const values in a new commit.

<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>
Expand All @@ -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
Expand Down