Skip to content

Commit

Permalink
Remove OverlayTrigger from Sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
Evgeny Kuzyakov committed Dec 1, 2022
1 parent f429e4c commit eb7164f
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 134 deletions.
5 changes: 3 additions & 2 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,13 @@ a {
&> div {
border-right: 1px solid #e5e5e5;
text-align: center;
min-height: 4em;
min-height: 4rem;
max-height: 4rem;
display: flex;
}

&> div:not(.apps) {
min-width: 4em;
min-width: 4rem;
align-items: center !important;
justify-content: center !important;
}
Expand Down
247 changes: 115 additions & 132 deletions src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,163 +23,146 @@ export function Sidebar(props) {
<>
<div
className="navbar p-0 bg-light fixed-top w-100 border-bottom"
style={{ height: "4em", zIndex: 1100 }}
style={{ height: "4em" }}
>
<div className="w-100 sidebar-items d-flex flex-row">
<OverlayTrigger
placement="bottom"
overlay={<Tooltip>Near Social</Tooltip>}
>
<div>
<Link className="d-block link-dark" to="/">
<img
src={Logo}
alt="Near Social logo horizontal"
className="d-inline-block"
style={{ height: "1.5rem" }}
/>
</Link>{" "}
</div>
</OverlayTrigger>
<div title="Near Social">
<Link className="d-block link-dark" to="/">
<img
src={Logo}
alt="Near Social logo horizontal"
className="d-inline-block"
style={{ height: "1.5rem" }}
/>
</Link>
</div>

<div className="apps flex-grow-1 flex-shrink-1 overflow-hidden flex-row sidebar-items">
{NearConfig.widgets.navigationApps && (
<Widget src={NearConfig.widgets.navigationApps} />
)}
</div>
<OverlayTrigger
placement="bottom"
overlay={<Tooltip>Notifications</Tooltip>}
>
<div>
<Widget src={NearConfig.widgets.notificationButton} />
</div>
</OverlayTrigger>
<OverlayTrigger
placement="bottom"
overlay={<Tooltip>Widget</Tooltip>}
>
<div className="nav-item">
<div className="dropdown d-flex align-items-center justify-content-center ">
<a
href="#"
className="link-dark text-decoration-none dropdown-toggle"
id="dropdownWidgets"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bi bi-gear-fill fs-4"></i>
</a>

<ul
className="dropdown-menu shadow dropdown-menu-end"
aria-labelledby="dropdownWidgets"
>
<div title="Notifications">
<Widget src={NearConfig.widgets.notificationButton} />
</div>

<div className="nav-item" title="Widget">
<div className="dropdown d-flex align-items-center justify-content-center ">
<a
href="#"
className="link-dark text-decoration-none dropdown-toggle"
id="dropdownWidgets"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bi bi-gear-fill fs-4"></i>
</a>

<ul
className="dropdown-menu shadow dropdown-menu-end"
aria-labelledby="dropdownWidgets"
>
<li>
<Link className="dropdown-item" to="/edit/new">
New widget
</Link>
</li>
{widgetSrc?.edit && (
<li>
<Link
className="dropdown-item"
to={`/edit/${widgetSrc.edit}`}
>
{widgetSrc.edit.startsWith(
`${props.signedAccountId}/widget/`
)
? "Edit widget"
: "Fork widget"}
</Link>
</li>
)}
{widgetSrc?.view && (
<li>
<Link className="dropdown-item" to="/edit/new">
New widget
<Link
className="dropdown-item"
to={`/${NearConfig.widgets.viewSource}?src=${widgetSrc?.view}`}
>
View source
</Link>
</li>
{widgetSrc?.edit && (
)}
</ul>
</div>
</div>

<div className="border-0" title="Account">
<div className="dropdown">
<a
href="#"
className="d-flex align-items-center justify-content-center link-dark text-decoration-none dropdown-toggle"
id="dropdownUser"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<div
className="d-inline-block"
style={{ width: "2em", height: "2em" }}
>
<Widget
src={NearConfig.widgets.profileImage}
props={{
accountId,
className: "d-inline-block",
style: { width: "2em", height: "2em" },
}}
/>
</div>
</a>

<ul
className="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="dropdownUser"
>
{props.signedIn ? (
<>
<li>
<Link
<button
className="dropdown-item"
to={`/edit/${widgetSrc.edit}`}
onClick={(e) => withdrawStorage(e)}
title={`Withdraw all available storage`}
>
{widgetSrc.edit.startsWith(
`${props.signedAccountId}/widget/`
)
? "Edit widget"
: "Fork widget"}
</Link>
Withdraw{" "}
{props.availableStorage &&
props.availableStorage.div(1000).toFixed(2)}
kb
</button>
</li>
)}
{widgetSrc?.view && (
<li>
<Link
className="dropdown-item"
to={`/${NearConfig.widgets.viewSource}?src=${widgetSrc?.view}`}
>
View source
</Link>
<hr className="dropdown-divider" />
</li>
)}
</ul>
</div>
</div>
</OverlayTrigger>
<OverlayTrigger
placement="bottom"
overlay={<Tooltip>Account</Tooltip>}
>
<div className="border-0">
<div className="dropdown">
<a
href="#"
className="d-flex align-items-center justify-content-center link-dark text-decoration-none dropdown-toggle"
id="dropdownUser"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<div
className="d-inline-block"
style={{ width: "2em", height: "2em" }}
>
<Widget
src={NearConfig.widgets.profileImage}
props={{
accountId,
className: "d-inline-block",
style: { width: "2em", height: "2em" },
}}
/>
</div>
</a>

<ul
className="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="dropdownUser"
>
{props.signedIn ? (
<>
<li>
<button
className="dropdown-item"
onClick={(e) => withdrawStorage(e)}
title={`Withdraw all available storage`}
>
Withdraw{" "}
{props.availableStorage &&
props.availableStorage.div(1000).toFixed(2)}
kb
</button>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<button
className="dropdown-item"
onClick={(e) => props.logOut(e)}
>
Sign out {props.signedAccountId}
</button>
</li>
</>
) : (
<li>
<button
className="dropdown-item"
onClick={(e) => props.requestSignIn(e)}
onClick={(e) => props.logOut(e)}
>
Sign in with NEAR Wallet
Sign out {props.signedAccountId}
</button>
</li>
)}
</ul>
</div>
</>
) : (
<li>
<button
className="dropdown-item"
onClick={(e) => props.requestSignIn(e)}
>
Sign in with NEAR Wallet
</button>
</li>
)}
</ul>
</div>
</OverlayTrigger>
</div>
</div>
</div>
<div style={{ paddingTop: "4.5em" }}>{props.children}</div>
Expand Down

0 comments on commit eb7164f

Please sign in to comment.