Skip to content

Commit

Permalink
#3698: Fix navigation bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@asafkaganbezgin
asafkaganbezgin committed Aug 6, 2021
1 parent f29229e commit 87420ee
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 133 deletions.
2 changes: 1 addition & 1 deletion client/src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Header = ({ minimalHeader, onHomeClick, toggleMenuAction }) => (
</span>
) : (
<Link
className="logo d-xs-none d-sm-block"
className="logo d-none d-sm-block"
to="/"
onClick={onHomeClick}
>
Expand Down
127 changes: 77 additions & 50 deletions client/src/components/Nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Collapse } from "@blueprintjs/core"
import { clearSearchQuery, resetPages } from "actions"
import AppContext from "components/AppContext"
import ResponsiveLayoutContext from "components/ResponsiveLayoutContext"
Expand All @@ -7,7 +6,7 @@ import { INSIGHTS, INSIGHT_DETAILS } from "pages/insights/Show"
import pluralize from "pluralize"
import PropTypes from "prop-types"
import React, { useContext, useEffect, useMemo, useState } from "react"
import { Badge, Nav, NavDropdown } from "react-bootstrap"
import { Badge, Collapse, Nav, NavDropdown } from "react-bootstrap"
import { connect } from "react-redux"
import {
IndexLinkContainer as Link,
Expand All @@ -20,7 +19,7 @@ import Settings from "settings"
import utils from "utils"

export const AnchorNavItem = ({ to, disabled, children }) => {
const ScrollLinkNavItem = ScrollLink(Nav.Item)
const ScrollLinkNavItem = ScrollLink(Nav.Link)
return (
<ResponsiveLayoutContext.Consumer>
{context => (
Expand Down Expand Up @@ -58,22 +57,25 @@ const SidebarLink = ({
id,
setIsMenuLinksOpened
}) => (
<Link
to={linkTo}
<Nav.Item
onClick={() => {
handleOnClick()
setIsMenuLinksOpened && setIsMenuLinksOpened()
}}
>
<Nav.Item id={id}>{children}</Nav.Item>
</Link>
<Link to={linkTo}>
<Nav.Link eventKey={id}>
<span>{children}</span>
</Nav.Link>
</Link>
</Nav.Item>
)
SidebarLink.propTypes = {
linkTo: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
children: PropTypes.node,
handleOnClick: PropTypes.func,
setIsMenuLinksOpened: PropTypes.func,
id: PropTypes.string
id: PropTypes.string.isRequired
}

const Navigation = ({
Expand Down Expand Up @@ -125,6 +127,7 @@ const Navigation = ({
return (
<Nav variant="pills" id="leftNav" className="flex-column hide-for-print">
<SidebarLink
id="nav-home-button"
linkTo="/"
handleOnClick={resetPages}
setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
Expand All @@ -135,27 +138,30 @@ const Navigation = ({
<Nav id="search-nav" />

<Nav.Item
id={isMenuLinksOpened ? "nav-links-opened" : ""}
active={isMenuLinksOpened ? 1 : 0}
id="nav-links-button"
style={{ paddingTop: "2px" }}
onClick={() => setIsMenuLinksOpened(!isMenuLinksOpened)}
>
{Settings?.menuOptions?.menuLinksDropdownTitle ?? "My Work"}
<span
className={isMenuLinksOpened ? "caret caret-rotate" : "caret"}
style={{ marginLeft: "0.5rem" }}
>
</span>
<Nav.Link>
{Settings?.menuOptions?.menuLinksDropdownTitle ?? "My Work"}
<span
className={
isMenuLinksOpened
? "dropdown-toggle dropdown-toggle-rotate"
: "dropdown-toggle"
}
style={{ marginLeft: "0.255em" }}
>
</span>
</Nav.Link>
</Nav.Item>

<Collapse isOpen={isMenuLinksOpened}>
<Nav
variant="pills"
className="flex-column"
style={{ paddingLeft: "1rem", paddingTop: "2px" }}
>
<Collapse in={isMenuLinksOpened}>
<div style={{ marginLeft: "1rem" }}>
{currentUser.uuid && (
<SidebarLink
id="my-reports-nav"
linkTo={{ pathname: "/reports/mine" }}
handleOnClick={resetPages}
>
Expand All @@ -168,9 +174,9 @@ const Navigation = ({
{isAdvisor && currentUser.position?.uuid && (
<>
<SidebarLink
id="my-tasks-nav"
linkTo={{ pathname: "/tasks/mine" }}
handleOnClick={resetPages}
id="my-tasks-nav"
>
{`My ${pluralize(taskShortLabel)}`}
{notifications?.tasksWithPendingAssessments?.length ? (
Expand All @@ -180,9 +186,9 @@ const Navigation = ({
) : null}
</SidebarLink>
<SidebarLink
id="my-counterparts-nav"
linkTo={{ pathname: "/positions/counterparts" }}
handleOnClick={resetPages}
id="my-counterparts-nav"
>
My Counterparts
{notifications?.counterpartsWithPendingAssessments?.length ? (
Expand All @@ -196,15 +202,15 @@ const Navigation = ({

{myOrg && (
<SidebarLink
id="my-organization-nav"
linkTo={Organization.pathFor(myOrg)}
handleOnClick={resetPages}
id="my-organization"
>
My Organization <br />
<small>{myOrg.shortName}</small>
</SidebarLink>
)}
</Nav>
</div>
</Collapse>

<NavDropdown
Expand Down Expand Up @@ -252,6 +258,7 @@ const Navigation = ({
<Nav id="principal-org-nav" />

<SidebarLink
id="daily-rollup-nav"
linkTo="/rollup"
handleOnClick={resetPages}
setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
Expand All @@ -260,34 +267,53 @@ const Navigation = ({
</SidebarLink>

{currentUser.isAdmin() && (
<LinkContainer
to="/admin"
onClick={() => {
clearSearchQuery()
setIsMenuLinksOpened(false)
}}
>
<Nav.Item>Admin</Nav.Item>
</LinkContainer>
<Nav.Item>
<LinkContainer
to="/admin"
onClick={() => {
clearSearchQuery()
setIsMenuLinksOpened(false)
}}
>
<Nav.Link>Admin</Nav.Link>
</LinkContainer>
</Nav.Item>
)}

{inAdmin && (
<Nav>
<LinkContainer to="/admin/mergePeople" onClick={resetPages}>
<Nav.Item>Merge people</Nav.Item>
</LinkContainer>
<LinkContainer to="/admin/mergePositions" onClick={resetPages}>
<Nav.Item>Merge positions</Nav.Item>
</LinkContainer>
<LinkContainer to="/admin/mergeLocations" onClick={resetPages}>
<Nav.Item>Merge locations</Nav.Item>
</LinkContainer>
<LinkContainer to="/admin/authorizationGroups" onClick={resetPages}>
<Nav.Item>Authorization groups</Nav.Item>
</LinkContainer>
<SidebarLink linkTo="/admin/graphiql" handleOnClick={resetPages}>
GraphQL
</SidebarLink>
<Nav className="flex-column">
<span id="style-nav">
<Nav.Item>
<LinkContainer to="/admin/mergePeople" onClick={resetPages}>
<Nav.Link>Merge people</Nav.Link>
</LinkContainer>
</Nav.Item>
<Nav.Item>
<LinkContainer to="/admin/mergePositions" onClick={resetPages}>
<Nav.Link>Merge positions</Nav.Link>
</LinkContainer>
</Nav.Item>
<Nav.Item>
<LinkContainer to="/admin/mergeLocations" onClick={resetPages}>
<Nav.Link>Merge locations</Nav.Link>
</LinkContainer>
</Nav.Item>
<Nav.Item>
<LinkContainer
to="/admin/authorizationGroups"
onClick={resetPages}
>
<Nav.Link>Authorization groups</Nav.Link>
</LinkContainer>
</Nav.Item>
<SidebarLink
id="grapgQL-nav"
linkTo="/admin/graphiql"
handleOnClick={resetPages}
>
GraphQL
</SidebarLink>
</span>
</Nav>
)}

Expand All @@ -298,6 +324,7 @@ const Navigation = ({
)}

<SidebarLink
id="help-nav"
linkTo="/help"
handleOnClick={resetPages}
setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
Expand Down
56 changes: 43 additions & 13 deletions client/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,38 @@ fieldset.danger {
background-color: #e0e0e0;
}

.nav > li > a:hover,
.nav .open > a:focus {
.nav-pills .nav-link:hover {
background-color: #e0e0e0;
text-decoration: none;
color: #337ab7;
}

.nav #style-nav .nav-item .nav-link {
margin: 2px 0 2px 1rem;
}

.nav #style-nav .nav-item .nav-link.active {
margin-left: 1rem;
background-color: transparent;
color: #337ab7;
border-left: 5px solid #337ab7;
border-radius: 0;
padding-left: 10px;
}

.nav #style-nav .nav-item .nav-link.active:hover {
background-color: #e0e0e0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}

.dropdown-item {
white-space: normal;
word-break: normal;
}

.dropdown-item:hover {
text-decoration: none;
}

.header .logo img,
Expand Down Expand Up @@ -324,11 +353,11 @@ button.home-tile.btn {
text-align: center;
}

.caret {
.dropdown-toggle::after {
transition: 0.3s ease;
}

.caret-rotate {
.dropdown-toggle-rotate::after {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
Expand All @@ -338,17 +367,18 @@ button.home-tile.btn {
margin-right: 6px;
}

.nav-pills li.active > #nav-links-button {
#nav-links-opened {
background-color: #e0e0e0;
color: #337ab7;
border-radius: 0.25rem;
}

.nav > .nav > li > a {
border-left: 4px solid rgba(0, 0, 0, 0);
border-left: 4px solid rgba(155, 145, 145, 0);
padding: 4px 4px 4px 38px;
}

.nav .nav > li.active > a {
.nav .nav-link > .active > a {
border-left: 4px solid #1772b8;
}

Expand Down Expand Up @@ -888,21 +918,21 @@ header.searchPagination {
}

.advanced-select-popover .bp3-popover2-content-sizing {
width: 100% !important;
width: 100% !important;
}

.advanced-select-popover span.bp3-popover2-target {
display: block;
width: 100%;
display: block;
width: 100%;
}

.advanced-select-popover .bp3-popover2-transition-container {
top: 50px !important;
top: 50px !important;
}

.advanced-select-popover .bp3-popover2-content {
min-width: 400px;
max-width: 90vw !important;
min-width: 400px;
max-width: 90vw !important;
}

.advanced-search {
Expand Down
Loading

0 comments on commit 87420ee

Please sign in to comment.