Skip to content

Commit a7542dc

Browse files
petro97petro97
authored
MT-2822 Navigation menu (#27)
* Create Navigation component * Update mobile navigation menu * Refreshing mobile navigation * Updated class names. Added category title * Updated navigation menu styles * Fix axe errors. Align navigation * Updated class names according to BEM naming scheme. * Updated displayName in header * Removed links from top-menu * Added hover for first level categories * Revert clientId
1 parent c61ba0f commit a7542dc

File tree

13 files changed

+590
-68
lines changed

13 files changed

+590
-68
lines changed

‎src/AccountDropdown.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
right: 0;
3838
top: 100%;
3939
background-color: $mainBackgroundColor;
40-
z-index: 1;
40+
z-index: 2;
4141
min-width: 200px;
4242
border: 1px solid $secondComplimentColor;
4343
}

‎src/App.scss‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,7 @@
99
&__header {
1010
height: 60px;
1111
flex: 0 0 auto;
12-
background-color: white;
13-
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
14-
}
15-
16-
&__navmenu {
17-
flex: 0 0 48px;
18-
background-color: black;
19-
text-align: center;
20-
display: flex;
21-
flex-direction: row;
22-
justify-content: center;
23-
padding-left: $maxScrollWidth;
24-
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
12+
background-color: $mainBackgroundColor;
2513
}
2614

2715
&__main {

‎src/App.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { config } from './config';
66
import { AppStateProvider } from './app-state';
77
import { AppHeader } from './AppHeader';
88
import { AppFooter } from './AppFooter';
9-
import { NavMenu } from './NavMenu';
109
import { CompareOverlay } from './CompareOverlay';
1110
import './App.scss';
1211

@@ -24,9 +23,6 @@ const App: React.FC = () => {
2423
<header className="app__header">
2524
<AppHeader />
2625
</header>
27-
<nav className="app__navmenu">
28-
<NavMenu />
29-
</nav>
3026
<main className="app__main">
3127
<Switch>
3228
{routes.map(route => (

‎src/AppHeader.scss‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22

33
.appheader {
44
position: relative;
5-
display: flex;
6-
flex-direction: row;
75
height: 100%;
8-
align-items: center;
6+
7+
&__container {
8+
display: flex;
9+
flex-direction: row;
10+
height: 100%;
11+
align-items: center;
12+
}
913

1014
&__logo {
1115
flex: 1;
@@ -22,6 +26,26 @@
2226

2327
&__moltincartcontainer {
2428
flex: 0 0 auto;
29+
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
30+
}
31+
32+
.toggle-btn {
33+
display: none;
34+
}
35+
36+
&__navigation {
37+
z-index: 1;
38+
width: 100%
39+
}
40+
41+
@media(max-width: $tabletWidth) {
42+
.toggle-btn {
43+
display: inline-block;
44+
}
45+
46+
&__logo {
47+
padding-left: 50px;
48+
}
2549
}
2650

2751
&__networkoffline {

‎src/AppHeader.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,32 @@ import { Offline } from 'react-detect-offline';
55
import { ImageContainer } from './ImageContainer';
66
import { useTranslation } from './app-state';
77
import { LanguageDropdown } from './LanguageDropdown';
8-
98
import './AppHeader.scss';
109
import { AccountDropdown } from './AccountDropdown';
1110
import headerLogo from './images/site-images/Company-Logo.svg';
12-
13-
11+
import { Navigation } from "./Navigation";
1412
export const AppHeader: React.FC = () => {
1513
const { t } = useTranslation();
16-
1714
return (
1815
<div className="appheader">
19-
<div className="appheader__logo">
20-
<Link to="/" aria-label={t('bellvie-logo')}>
21-
<ImageContainer imgUrl={headerLogo} imgClassName="logo-image" alt="logoImage"/>
22-
</Link>
23-
</div>
24-
<div className="appheader__account">
25-
<AccountDropdown />
26-
</div>
27-
<div className="appheader__language">
28-
<LanguageDropdown />
16+
<div className="appheader__container">
17+
<div className="appheader__logo">
18+
<Link to="/" aria-label={t('bellvie-logo')}>
19+
<ImageContainer imgUrl={headerLogo} imgClassName="logo-image" alt="logoImage"/>
20+
</Link>
21+
</div>
22+
<div className="appheader__account">
23+
<AccountDropdown />
24+
</div>
25+
<div className="appheader__language">
26+
<LanguageDropdown />
27+
</div>
28+
<div className="appheader__moltincartcontainer">
29+
<span className="moltin-cart-button"></span>
30+
</div>
2931
</div>
30-
<div className="appheader__moltincartcontainer">
31-
<span className="moltin-cart-button"></span>
32+
<div className="appheader__navigation">
33+
<Navigation />
3234
</div>
3335
<Offline>
3436
<div className="appheader__networkoffline">

‎src/NavMenu.scss‎

Lines changed: 150 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,164 @@
1+
@import './theme/common';
12

23
.navmenu {
4+
padding-bottom: 20px;
35

4-
.navmenu__sub {
5-
padding-left: 20px;
6+
&__li {
7+
width: 290px;
8+
}
69

7-
.navmenu__link {
8-
height: 48px;
9-
display: flex;
10-
align-items: center;
11-
padding: 0px 20px;
12-
font-size: 13px;
13-
font-weight: bold;
14-
text-decoration: none;
15-
color: white;
10+
&__nextbutton {
11+
display: none;
12+
}
13+
14+
&__link {
15+
&.--haschildren {
16+
border-bottom: 1px solid $secondBorderColor;
17+
text-transform: uppercase;
18+
19+
&:hover {
20+
color: $firstComplimentColor;
21+
}
22+
}
23+
}
24+
25+
&__sub {
26+
.navmenu {
27+
&__link {
28+
height: 48px;
29+
display: flex;
30+
align-items: center;
31+
font-size: 13px;
32+
font-weight: bold;
33+
text-decoration: none;
34+
text-align: center;
35+
color: $secondComplimentTextColor;
36+
margin-left: 60px;
37+
padding-left: 0;
38+
width: 76%;
39+
}
1640
}
1741

18-
&--level-0 {
42+
&.--level-0 {
1943
display: flex;
20-
padding-left: 0px;
44+
justify-content: center;
45+
padding-left: 0;
46+
text-transform: uppercase;
47+
flex-direction: row;
48+
flex-wrap: wrap;
49+
width: 100%;
2150
}
2251

23-
&--level-1, &--level-2, &--level-3 {
52+
&.--level-1, &.--level-2, &.--level-3 {
2453
.navmenu__link {
2554
height: 30px;
55+
color: $mainTextColor;
56+
margin-left: 60px;
57+
text-transform: none;
58+
59+
&:hover {
60+
color: $firstComplimentColor
61+
}
62+
}
63+
}
64+
}
65+
66+
@media (max-width: $tabletWidth) {
67+
&__li {
68+
display: flex;
69+
width: 100%;
70+
border-bottom: 1px solid $fifthComplimentTextColor;
71+
}
72+
73+
&__link {
74+
&.--haschildren {
75+
border: none;
76+
}
77+
}
78+
79+
&__nextbutton {
80+
display: inline-block;
81+
82+
&.--haschildren {
83+
border: none;
84+
}
85+
}
86+
87+
&__sub {
88+
display: block;
89+
position: absolute;
90+
top: 0;
91+
left: 0;
92+
width: 100%;
93+
height: 100%;
94+
background-color: $mainBackgroundColor;
95+
transition: 0.5s;
96+
97+
&.--show {
98+
transform: translateX(0);
99+
visibility: visible;
100+
}
101+
}
102+
103+
.navmenu {
104+
&__sub {
105+
overflow: hidden;
106+
107+
&.--level-0 {
108+
display: block;
109+
}
110+
111+
&.--level-1 {
112+
z-index: 1;
113+
visibility: hidden;
114+
transform: translateX(100%);
115+
}
116+
117+
&.--show {
118+
visibility: visible;
119+
transform: translateX(0);
120+
}
121+
122+
.navmenu {
123+
&__nextbutton {
124+
&.--haschildren {
125+
height: 48px;
126+
position: relative;
127+
flex: 1;
128+
129+
130+
&:after {
131+
display: inline-block;
132+
position: absolute;
133+
right: 28px;
134+
content: ' ';
135+
width: 8px;
136+
height: 8px;
137+
border: none;
138+
border-left: 2px solid $firstComplimentColor;
139+
border-bottom: 2px solid $firstComplimentColor;
140+
transform-origin: center;
141+
transform: rotate(-135deg);
142+
vertical-align: middle;
143+
}
144+
}
145+
}
146+
147+
&__link {
148+
cursor: pointer;
149+
height: 48px;
150+
align-items: center;
151+
margin: 0;
152+
padding-left: 40px;
153+
font-size: 14px;
154+
font-weight: 500;
155+
color: $thirdComplimentColor;
156+
text-transform: none;
157+
display: inline-block;
158+
text-align: left;
159+
width: auto;
160+
}
161+
}
26162
}
27163
}
28164
}

‎src/NavMenu.tsx‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,44 @@ import { useCategories } from './app-state';
66

77
import './NavMenu.scss';
88

9-
function renderCategories(categories: Category[], level: number = 0): React.ReactElement {
10-
return (
11-
<ul className={`navmenu__sub navmenu__sub--level-${level}`}>
12-
{categories?.map(category => (
13-
<li key={category.id} className={`navmenu__li navmenu__li--level-${level}`}>
14-
<Link
15-
className={`navmenu__link navmenu__link--level-${level}`}
16-
to={createCategoryUrl(category.slug)}
17-
>
18-
{category.name}
19-
</Link>
20-
{category.children && renderCategories(category.children, level + 1)}
21-
</li>
22-
))}
23-
</ul>
24-
);
9+
interface NavMenuProps {
10+
categoryHistory: string[];
11+
handleCloseNavigation: () => void;
12+
handleCategoryClick: (id: string, name: string) => void;
2513
}
2614

27-
export const NavMenu: React.FC = () => {
15+
export const NavMenu: React.FC<NavMenuProps> = (props) => {
16+
const { handleCloseNavigation, categoryHistory, handleCategoryClick } = props;
2817
const { categoriesTree } = useCategories();
2918

19+
const handleCloseMenu = () => {
20+
handleCloseNavigation();
21+
};
22+
23+
const handleShow = (category: Category) => {
24+
handleCategoryClick(category.id, category.name);
25+
};
26+
27+
function renderCategories(categories: Category[], level: number = 0, isVisible: boolean = false): React.ReactElement {
28+
return (
29+
<ul className={`navmenu__sub --level-${level} ${isVisible ? '--show' : ''}`}>
30+
{categories?.map(category => (
31+
<li key={category.id} className="navmenu__li">
32+
<Link
33+
onClick={handleCloseMenu}
34+
className={`navmenu__link ${category.children ? '--haschildren' : ''}`}
35+
to={createCategoryUrl(category.slug)}
36+
>
37+
{category.name}
38+
</Link>
39+
<button type="button" className={`navmenu__nextbutton ${category.children ? '--haschildren' : ''}`} onClick={() => handleShow(category)} />
40+
{category.children && renderCategories(category.children, level + 1, categoryHistory.includes(category.id))}
41+
</li>
42+
))}
43+
</ul>
44+
);
45+
}
46+
3047
return (
3148
<div className="navmenu">
3249
{categoriesTree && renderCategories(categoriesTree)}

0 commit comments

Comments
 (0)