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

Changes from 1 commit
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
21 changes: 14 additions & 7 deletions assets/js/components/Layout/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
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';
Expand Down Expand Up @@ -89,13 +90,19 @@ const Layout = () => {
onClick={handleSidebar}
title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
>
<EOS_KEYBOARD_DOUBLE_ARROW_LEFT
size="24"
color="currentColor"
className={classNames('text-gray-400 hover:text-gray-300', {
'-scale-100': 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="24"
color="currentColor"
className={classNames('text-gray-400 hover:text-gray-300')}
/>
) : (
<EOS_KEYBOARD_DOUBLE_ARROW_LEFT
size="24"
color="currentColor"
className={classNames('text-gray-400 hover:text-gray-300')}
/>
)}
</button>
</div>
<div className="bg-white h-full dark:bg-gray-700">
Expand Down