Skip to content

Commit 2e04950

Browse files
w3bdesignw3bdesign
committed
Improve responsive header design
1 parent 3d76afb commit 2e04950

File tree

5 files changed

+139
-58
lines changed

5 files changed

+139
-58
lines changed

‎components/Cart/Cart.component.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const Cart = ({ stickyNav }) => {
1616

1717
return (
1818
<>
19+
{stickyNav &&
20+
(
21+
1922
<Link href="/handlekurv">
2023
<a
2124
className="pl-4 mt-4 no-underline inline-block"
@@ -38,15 +41,23 @@ const Cart = ({ stickyNav }) => {
3841
</svg>
3942
</a>
4043
</Link>
41-
{/*Cart quantity */}
42-
{productsCount && (
44+
)}
45+
46+
47+
48+
49+
{productsCount && stickyNav && (
4350
<span
4451
className={`w-6 h-6 pb-2 -mt-5 text-center rounded-full
4552
${stickyNav ? 'text-black bg-white' : 'text-white bg-black'}`}
4653
>
4754
{productsCount}
4855
</span>
4956
)}
57+
58+
59+
60+
5061
</>
5162
);
5263
};

components/Header/Hamburger.component.jsx renamed to components/Footer/Hamburger.component.jsx

File renamed without changes.

‎components/Footer/Stickynav.component.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Cart from '../Cart/Cart.component';
44
import Search from '../AlgoliaSearch/AlgoliaSearchBox.component';
55
import SVGMobileSearchIcon from '../SVG/SVGMobileSearchIcon.component';
66

7-
import Hamburger from '../Header/Hamburger.component';
7+
import Hamburger from './Hamburger.component';
88

99
/**
1010
* Navigation for the application.

‎components/Header/Navbar.component.jsx‎

Lines changed: 60 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,72 @@ import Cart from '../Cart/Cart.component';
44
import Search from '../AlgoliaSearch/AlgoliaSearchBox.component';
55
import MobileSearch from '../AlgoliaSearch/MobileSearch.component';
66

7-
7+
import { useResponsive } from '../../utils/hooks/useResponsive';
88

99
/**
1010
* Navigation for the application.
1111
* Includes mobile menu.
1212
*/
13-
const Navbar = () => (
14-
<header>
15-
<nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
16-
<div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
17-
<div
18-
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
19-
id="menu"
20-
>
21-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
22-
<li>
23-
<Link href="/produkter">
24-
<a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
25-
Produkter
26-
</a>
27-
</Link>
28-
</li>
29-
<li>
30-
<Link href="/kategorier">
31-
<a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
32-
Kategorier
33-
</a>
34-
</Link>
35-
</li>
36-
</ul>
37-
</div>
38-
<div className="order-1 md:order-2">
39-
<Link href="/">
40-
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
41-
<svg
42-
className="mr-2 text-gray-800 fill-current"
43-
xmlns="https://www.w3.org/2000/svg"
44-
width="24"
45-
height="24"
46-
viewBox="0 0 24 24"
47-
aria-label="Nettbutikk logo"
48-
>
49-
<path
50-
d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
51-
aria-label="Nettbutikk logo"
52-
/>
53-
</svg>
54-
NETTBUTIKK
55-
</a>
56-
</Link>
57-
</div>
58-
<div className="flex items-center order-2 md:order-3" id="nav-content">
59-
<Search />
60-
61-
<MobileSearch />
13+
const Navbar = () => {
14+
const responsive = useResponsive();
6215

63-
<Cart />
16+
return (
17+
<header>
18+
<nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
19+
<div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
20+
<div
21+
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
22+
id="menu"
23+
>
24+
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
25+
<li>
26+
<Link href="/produkter">
27+
<a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
28+
Produkter
29+
</a>
30+
</Link>
31+
</li>
32+
<li>
33+
<Link href="/kategorier">
34+
<a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
35+
Kategorier
36+
</a>
37+
</Link>
38+
</li>
39+
</ul>
40+
</div>
41+
<div className="order-1 md:order-2">
42+
<Link href="/">
43+
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
44+
<svg
45+
className="mr-2 text-gray-800 fill-current"
46+
xmlns="https://www.w3.org/2000/svg"
47+
width="24"
48+
height="24"
49+
viewBox="0 0 24 24"
50+
aria-label="Nettbutikk logo"
51+
>
52+
<path
53+
d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
54+
aria-label="Nettbutikk logo"
55+
/>
56+
</svg>
57+
NETTBUTIKK
58+
</a>
59+
</Link>
60+
</div>
61+
<div
62+
className="flex items-center order-2 md:order-3"
63+
id="nav-content"
64+
>
65+
<Search />
66+
<MobileSearch />
67+
{!responsive.isMobile && <Cart />}
68+
</div>
6469
</div>
65-
</div>
66-
</nav>
67-
</header>
68-
);
70+
</nav>
71+
</header>
72+
);
73+
};
6974

7075
export default Navbar;

‎utils/hooks/useResponsive.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import * as React from 'react';
2+
3+
export const useResponsive = () => {
4+
const size = {
5+
mobileS: 320,
6+
mobileM: 375,
7+
mobileL: 425,
8+
tablet: 768, // 768 <= tablet size < 1024
9+
laptop: 1024,
10+
laptopL: 1440,
11+
desktop: 2560,
12+
};
13+
14+
const [currentScreenSize, setScreenSize] = React.useState({});
15+
16+
React.useEffect(() => {
17+
setScreenSize({
18+
currentScreenWidth: window.innerWidth,
19+
currentScreenHeight: window.innerHeight,
20+
isMobile: window.innerWidth < size.tablet,
21+
isTablet:
22+
size.tablet <= window.innerWidth && window.innerWidth < size.laptop,
23+
isLaptop:
24+
size.laptop <= window.innerWidth && window.innerWidth < size.desktop,
25+
isDesktop: size.desktop <= window.innerWidth,
26+
isLTETablet: window.innerWidth < size.laptop,
27+
isLTELaptop: window.innerWidth < size.desktop,
28+
isLandscape: window.innerWidth > window.innerHeight,
29+
isTouchDevice:
30+
'ontouchstart' in window ||
31+
navigator.maxTouchPoints > 0 ||
32+
navigator.msMaxTouchPoints > 0,
33+
});
34+
}, [size.desktop, size.laptop, size.tablet]);
35+
36+
React.useEffect(() => {
37+
function handleScreenWidth() {
38+
setScreenSize({
39+
currentScreenWidth: window.innerWidth,
40+
currentScreenHeight: window.innerHeight,
41+
isMobile: window.innerWidth < size.tablet,
42+
isTablet:
43+
size.tablet <= window.innerWidth && window.innerWidth < size.laptop,
44+
isLaptop:
45+
size.laptop <= window.innerWidth && window.innerWidth < size.desktop,
46+
isDesktop: size.desktop <= window.innerWidth,
47+
isLTETablet: window.innerWidth < size.laptop,
48+
isLTELaptop: window.innerWidth < size.desktop,
49+
isLandscape: window.innerWidth > window.innerHeight,
50+
isTouchDevice:
51+
'ontouchstart' in window ||
52+
navigator.maxTouchPoints > 0 ||
53+
navigator.msMaxTouchPoints > 0,
54+
});
55+
}
56+
57+
window.addEventListener('resize', handleScreenWidth);
58+
59+
return () => {
60+
window.removeEventListener('resize', handleScreenWidth);
61+
};
62+
}, [size.desktop, size.laptop, size.tablet]);
63+
64+
return currentScreenSize;
65+
};

0 commit comments

Comments
 (0)