Skip to content
This repository has been archived by the owner on Apr 25, 2024. It is now read-only.

Commit

Permalink
make breadcrumb and lead navigation sticky
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielamormocea
danielamormocea committed Jan 18, 2022
1 parent bec1694 commit d7eff97
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 90 deletions.
180 changes: 101 additions & 79 deletions src/components/theme/Header/HeaderNavigation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ import downIcon from '@plone/volto/icons/down-key.svg';
import closeIcon from '@plone/volto/icons/clear.svg';
import { Icon } from '@plone/volto/components';
import { connect } from 'react-redux';
import Sticky from 'react-stickynode';
import { Icon as IconSemantic, Popup } from 'semantic-ui-react';
import { Breadcrumbs } from '@plone/volto/components';



import circleLeft from '@plone/volto/icons/circle-left.svg';
import circleRight from '@plone/volto/icons/circle-right.svg';
Expand All @@ -19,61 +24,67 @@ const MobileNav = ({ items, activeItem }) => {
}, [activeItem]);

return (
<div className="lead-mobile-nav">
{expanded ? (
<div className="nav-items-container">
{items &&
items.length > 0 &&
items.map((item, i) => (
<Link key={i} to={item.url}>
<p
className={`lead-nav-item ${
activeItem.title === item.title ? 'active-mobile-nav' : ''
}`}
>
{item.title}
{item.url === activeItem.url && (
<Icon
className="lead-nav-icon"
name={closeIcon}
size="35px"
onClick={() => setExpanded(false)}
/>
)}
</p>
</Link>
))}
</div>
) : (
<div className="nav-items-container">
<p
onClick={() => setExpanded(true)}
className="lead-nav-item active-mobile-nav"
>
{activeItem.title}
<Icon
className="lead-nav-icon"
name={downIcon}
size="35px"
<Sticky enabled={true} top={78} className="lead-mobile-nav">
<div>
{expanded ? (
<div className="nav-items-container">
{items &&
items.length > 0 &&
items.map((item, i) => (
<Link key={i} to={item.url}>
<p
className={`lead-nav-item ${
activeItem.title === item.title ? 'active-mobile-nav' : ''
}`}
>
{item.title}
{item.url === activeItem.url && (
<Icon
className="lead-nav-icon"
name={closeIcon}
size="35px"
onClick={() => setExpanded(false)}
/>
)}
</p>
</Link>
))}
</div>
) : (
<div className="nav-items-container">
<p
onClick={() => setExpanded(true)}
/>
</p>
</div>
)}
</div>
className="lead-nav-item active-mobile-nav"
>
{activeItem.title}
<Icon
className="lead-nav-icon"
name={downIcon}
size="35px"
onClick={() => setExpanded(true)}
/>
</p>
</div>
)}
</div>
</Sticky>

);
};

const HeaderNavigation = ({ items, pageWidth }) => {
const [activeItem, setActiveItem] = React.useState('');
const [isMobile, setIsMobile] = React.useState(false);
const [isTablet, setIsTablet] = React.useState(false);
const [itemsIncrement, setItemsIncrement] = React.useState(0);
const [itemsPerPage, setItemsPerPage] = React.useState(
items && items.length < 4 ? items.length : 4,
);


const [displayedItems, setDisplayedItems] = React.useState([]);
const history = useHistory();
const pathname = history.location.pathname;

const noPrev = displayedItems && items && items[0] === displayedItems[0];
const noNext =
Expand Down Expand Up @@ -105,10 +116,17 @@ const HeaderNavigation = ({ items, pageWidth }) => {
}
if (pageWidth && pageWidth <= 768) {
setIsMobile(true);
setIsTablet(false);
}
if (pageWidth && pageWidth > 768) {
setIsMobile(false);
}
if (pageWidth && pageWidth <= 1300 && pageWidth > 768) {
setIsTablet(true);
}
if (pageWidth && pageWidth > 1300) {
setIsTablet(false);
}
if (pageWidth && pageWidth > 1240) {
if (items.length >= 6) {
setItemsPerPage(6);
Expand All @@ -133,45 +151,49 @@ const HeaderNavigation = ({ items, pageWidth }) => {
{isMobile ? (
<MobileNav activeItem={activeItem} items={items} />
) : (
<div className="header-navigation-lead">
{displayedItems.length > 0 &&
displayedItems.map((item, index) => (
<Link
style={{
width: `${
items.length < itemsPerPage
? 100 / items.length
: 100 / itemsPerPage
}%`,
}}
className={`lead-navigation-item ${
activeItem.title === item.title ? 'active-lead-nav' : ''
}`}
key={index}
to={item.url}
title={item.title}
>
{item.title}
</Link>
))}
{!noPrev && (
<Icon
className="navigation-prev"
name={circleLeft}
size="34px"
onClick={handlePrev}
/>
)}
{!noNext && (
<Icon
className="navigation-next"
name={circleRight}
size="34px"
onClick={handleNext}
/>
)}
</div>
<Sticky enabled={true} top={isTablet ? 75 : 102} className="sticky-header-nav">
<div className="header-navigation-lead">
<Popup basic size={"mini"} style={{boxShadow:"none"}} hoverable position="bottom right" trigger={<div className="lead-navigation-item custom" ><IconSemantic size='large' name="home"></IconSemantic> <p>/...</p></div>}> <Popup.Content className="custom-breadcrumb"><Breadcrumbs pathname={pathname} /></Popup.Content> </Popup>
{displayedItems.length > 0 &&
displayedItems.map((item, index) => (
<Link
style={{
width: `${
items.length < itemsPerPage
? 100 / items.length - 1
: 100 / itemsPerPage - 1
}%`,
}}
className={`lead-navigation-item ${
activeItem.title === item.title ? 'active-lead-nav' : ''
}`}
key={index}
to={item.url}
title={item.title}
>
{item.title}
</Link>
))}
{!noPrev && (
<Icon
className="navigation-prev"
name={circleLeft}
size="34px"
onClick={handlePrev}
/>
)}
{!noNext && (
<Icon
className="navigation-next"
name={circleRight}
size="34px"
onClick={handleNext}
/>
)}
</div>
</Sticky>
)}

</React.Fragment>
);
};
Expand Down
10 changes: 7 additions & 3 deletions src/customizations/volto/components/theme/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const Header = (props) => {
const [inheritedImage, setInheritedImage] = React.useState('');
const [leadCaptionText, setLeadCaptionText] = React.useState('');
const [navigationItems, setNavigationItems] = React.useState('');
const [disableSticky, setDisableSticky] = React.useState(false);

React.useEffect(() => {
if (leadNavigation || inheritLeadingData) {
Expand Down Expand Up @@ -71,6 +72,9 @@ const Header = (props) => {
const pathName = props.pathname;
const hideSearch = ['/header', '/head', '/footer'].includes(pathName);




return (
<div className="header-wrapper" role="banner">
<Sticky enabled={true} top={0}>
Expand Down Expand Up @@ -104,10 +108,10 @@ const Header = (props) => {
<HomepageSlider items={props.frontpage_slides} />
) : (
<div style={{ position: 'relative' }}>
<Breadcrumbs pathname={props.pathname} />

<Sticky key={props.pathname} enabled={true} top={102} className="sticky-breadcrumbs" bottomBoundary={".sticky-header-nav"}>
<Breadcrumbs pathname={props.pathname} />
</Sticky>
<HeaderImage
pathname={props.pathname}
bigImage={bigLeading}
leadNavigation={leadNavigation}
navigationItems={navigationItems}
Expand Down
54 changes: 46 additions & 8 deletions theme/site/globals/site.overrides
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,14 +174,29 @@ body.has-toolbar {
}
}

.header-navigation-lead {
position: absolute;
.sticky-breadcrumbs {
position: inherit;
z-index: 1;
bottom: 0;
left: 5px;
display: flex;
.sticky-inner-wrapper {
}
}

.sticky-header-nav {

position: absolute;
top: 235px;
z-index: 2;
width: 99%;
color: white;
.sticky-inner-wrapper {
box-shadow: none !important;
background: none !important;
}
}


.header-navigation-lead {



.navigation-prev {
position: absolute;
Expand Down Expand Up @@ -221,9 +236,8 @@ body.has-toolbar {
.lead-navigation-item {
overflow: hidden;
padding: 12px 20px;

display: inline-block;
border: 2px solid #f7f7f5;

margin: 0 2px;

background-color: #f7f7f5;
Expand All @@ -244,6 +258,20 @@ body.has-toolbar {
padding: 8px 10px;
font-size: 14px;
}
&.custom {
position: absolute;
left: -90px;
padding: 12px 10px;
display: flex;
background: white;
box-shadow: 0 -1px 2px 0 #cd4200;
color: #cd4200;
p {
position: relative;
top: 2px;
left: -7px;
}
}
}

.lead-navigation-item:hover {
Expand All @@ -254,6 +282,13 @@ body.has-toolbar {
}
}

.custom-breadcrumb{
position: relative;
left: -160px;
top: -18px;
white-space: nowrap;
}

.header-image-wrapper {
position: relative;
display: flex;
Expand Down Expand Up @@ -2377,6 +2412,9 @@ main {
height: auto !important;
background: transparent;
box-shadow: none;
@media (max-width: 1200px) {
top: 75px !important;
}
}

.sticky-inner-wrapper {
Expand Down

0 comments on commit d7eff97

Please sign in to comment.