Skip to content
This repository was archived by the owner on Feb 27, 2024. It is now read-only.

Commit 61655ff

Browse files
dcooneydcooney
committed
Style update fro header/footer
1 parent 54a5c7a commit 61655ff

File tree

6 files changed

+154
-132
lines changed

6 files changed

+154
-132
lines changed

‎components/molecules/Navigation/Navigation.module.css

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,12 @@
22
& > ul {
33
@apply flex;
44

5-
/* Nested ul */
6-
& ul {
7-
@apply hidden absolute left-0 z-50 p-16 shadow-sm;
8-
9-
top: 100%;
10-
background-color: #fff;
11-
}
12-
135
& > li {
14-
@apply relative ml-20;
6+
@apply relative ml-10;
157

168
& a {
9+
@apply block;
10+
1711
&:hover,
1812
&:focus {
1913
@apply underline;
@@ -31,5 +25,22 @@
3125
}
3226
}
3327
}
28+
29+
/* Nested ul / Drop Menu */
30+
& ul {
31+
@apply hidden absolute left-0 z-50 p-2 shadow-sm rounded border;
32+
33+
top: 100%;
34+
width: 220px;
35+
background-color: #fff;
36+
37+
& > li {
38+
@apply text-sm;
39+
40+
& > a {
41+
@apply p-2;
42+
}
43+
}
44+
}
3445
}
3546
}

‎components/organisms/Footer/Footer.js

Lines changed: 97 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import PropTypes from 'prop-types'
1+
import Container from '@/components/atoms/Container'
22
import {MenuContext} from '@/components/common/MenuProvider'
3-
import cn from 'classnames'
3+
import {seoSocialPropTypes} from '@/functions/getPagePropTypes'
44
import Link from 'next/link'
5+
import PropTypes from 'prop-types'
56
import {useContext} from 'react'
67
import styles from './Footer.module.css'
7-
import {seoSocialPropTypes} from '@/functions/getPagePropTypes'
88

99
// TODO: Create Storybook for this component.
1010

@@ -21,99 +21,101 @@ export default function Footer({social, siteTitle}) {
2121
const {menus} = useContext(MenuContext)
2222
return (
2323
<footer className={styles.footer}>
24-
{!!menus?.footer_menu && (
25-
<nav className={cn('container', styles.footerMenu)}>
26-
<ul>
27-
{menus?.footer_menu.map((item, index) => {
28-
return (
29-
<li key={index}>
30-
<Link href={item.path}>
31-
<a target={item.target ? item.target : '_self'}>
32-
{item.label}
33-
</a>
34-
</Link>
35-
</li>
36-
)
37-
})}
38-
</ul>
39-
</nav>
40-
)}
41-
42-
<div className={cn('container', styles.copyright)}>
43-
&copy; {new Date().getFullYear()} {siteTitle}
44-
{!!social?.facebook && (
45-
<>
46-
{' '}
47-
&middot;{' '}
48-
<Link href={social.facebook}>
49-
<a>Facebook</a>
50-
</Link>
51-
</>
52-
)}
53-
{!!social?.instagram && (
54-
<>
55-
{' '}
56-
&middot;{' '}
57-
<Link href={social.instagram}>
58-
<a>Instagram</a>
59-
</Link>
60-
</>
61-
)}
62-
{!!social?.linkedIn && (
63-
<>
64-
{' '}
65-
&middot;{' '}
66-
<Link href={social.linkedIn}>
67-
<a>LinkedIn</a>
68-
</Link>
69-
</>
24+
<Container>
25+
{!!menus?.footer_menu && (
26+
<nav className={styles.footerMenu}>
27+
<ul>
28+
{menus?.footer_menu.map((item, index) => {
29+
return (
30+
<li key={index}>
31+
<Link href={item.path}>
32+
<a target={item.target ? item.target : '_self'}>
33+
{item.label}
34+
</a>
35+
</Link>
36+
</li>
37+
)
38+
})}
39+
</ul>
40+
</nav>
7041
)}
71-
{!!social?.mySpace && (
72-
<>
73-
{' '}
74-
&middot;{' '}
75-
<Link href={social.mySpace}>
76-
<a>MySpace</a>
77-
</Link>
78-
</>
79-
)}
80-
{!!social?.pinterest && (
81-
<>
82-
{' '}
83-
&middot;{' '}
84-
<Link href={social.pinterest}>
85-
<a>Pinterest</a>
86-
</Link>
87-
</>
88-
)}
89-
{!!social?.twitter && (
90-
<>
91-
{' '}
92-
&middot;{' '}
93-
<Link href={social.twitter}>
94-
<a>Twitter</a>
95-
</Link>
96-
</>
97-
)}
98-
{!!social?.wikipedia && (
99-
<>
100-
{' '}
101-
&middot;{' '}
102-
<Link href={social.wikipedia}>
103-
<a>Wikipedia</a>
104-
</Link>
105-
</>
106-
)}
107-
{!!social?.youTube && (
108-
<>
109-
{' '}
110-
&middot;{' '}
111-
<Link href={social.youTube}>
112-
<a>Youtube</a>
113-
</Link>
114-
</>
115-
)}
116-
</div>
42+
43+
<div className={styles.copyright}>
44+
&copy; {new Date().getFullYear()} {siteTitle}
45+
{!!social?.facebook && (
46+
<>
47+
{' '}
48+
&middot;{' '}
49+
<Link href={social.facebook}>
50+
<a>Facebook</a>
51+
</Link>
52+
</>
53+
)}
54+
{!!social?.instagram && (
55+
<>
56+
{' '}
57+
&middot;{' '}
58+
<Link href={social.instagram}>
59+
<a>Instagram</a>
60+
</Link>
61+
</>
62+
)}
63+
{!!social?.linkedIn && (
64+
<>
65+
{' '}
66+
&middot;{' '}
67+
<Link href={social.linkedIn}>
68+
<a>LinkedIn</a>
69+
</Link>
70+
</>
71+
)}
72+
{!!social?.mySpace && (
73+
<>
74+
{' '}
75+
&middot;{' '}
76+
<Link href={social.mySpace}>
77+
<a>MySpace</a>
78+
</Link>
79+
</>
80+
)}
81+
{!!social?.pinterest && (
82+
<>
83+
{' '}
84+
&middot;{' '}
85+
<Link href={social.pinterest}>
86+
<a>Pinterest</a>
87+
</Link>
88+
</>
89+
)}
90+
{!!social?.twitter && (
91+
<>
92+
{' '}
93+
&middot;{' '}
94+
<Link href={social.twitter}>
95+
<a>Twitter</a>
96+
</Link>
97+
</>
98+
)}
99+
{!!social?.wikipedia && (
100+
<>
101+
{' '}
102+
&middot;{' '}
103+
<Link href={social.wikipedia}>
104+
<a>Wikipedia</a>
105+
</Link>
106+
</>
107+
)}
108+
{!!social?.youTube && (
109+
<>
110+
{' '}
111+
&middot;{' '}
112+
<Link href={social.youTube}>
113+
<a>Youtube</a>
114+
</Link>
115+
</>
116+
)}
117+
</div>
118+
</Container>
117119
</footer>
118120
)
119121
}

‎components/organisms/Footer/Footer.module.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
.footer {
2-
@apply py-8 border-t;
2+
@apply border-t;
33

44
& .footerMenu {
55
& > ul {
6-
@apply flex justify-center mb-12;
6+
@apply flex justify-center mb-8;
77

88
& > li {
99
@apply mx-8;
10-
11-
& a {
12-
&:hover,
13-
&:focus {
14-
@apply underline;
15-
}
16-
}
1710
}
1811
}
1912
}
2013

14+
& a {
15+
&:hover,
16+
&:focus {
17+
@apply underline;
18+
}
19+
}
20+
2121
& .copyright {
22-
@apply py-4 text-center;
22+
@apply text-center text-xs;
2323
}
2424
}

‎components/organisms/Header/Header.js

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Container from '@/components/atoms/Container'
12
import Logo from '@/components/atoms/Logo'
23
import {MenuContext} from '@/components/common/MenuProvider'
34
import AlgoliaSearch from '@/components/molecules/AlgoliaSearch'
@@ -18,21 +19,23 @@ export default function Header() {
1819
const {menus} = useContext(MenuContext)
1920
return (
2021
<header className={styles.header}>
21-
<div className={styles.search}>
22-
<AlgoliaSearch
23-
useHistory={true}
24-
usePlaceholder={true}
25-
className="ml-auto"
26-
/>
27-
</div>
28-
<div className={styles.navigation}>
29-
<Logo />
30-
<Navigation
31-
menu={menus?.primary_menu}
32-
styles={styles}
33-
className={styles.primaryMenu}
34-
/>
35-
</div>
22+
<Container paddingTop={false} paddingBtm={false}>
23+
<div className={styles.search}>
24+
<AlgoliaSearch
25+
useHistory={true}
26+
usePlaceholder={true}
27+
className="ml-auto"
28+
/>
29+
</div>
30+
<div className={styles.navigation}>
31+
<Logo />
32+
<Navigation
33+
menu={menus?.primary_menu}
34+
styles={styles}
35+
className={styles.primaryMenu}
36+
/>
37+
</div>
38+
</Container>
3639
</header>
3740
)
3841
}

‎components/organisms/Header/Header.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@apply sticky top-0 py-4 transition-all z-50 border-b shadow bg-gray-100;
33

44
& .search {
5-
@apply container mb-8;
5+
@apply mb-4;
66
}
77

88
& .navigation {
9-
@apply container px-4 lg:px-0 flex items-center justify-between;
9+
@apply flex items-center justify-between;
1010
}
1111
}

‎tailwind.config.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ module.exports = {
1010
extend: {
1111
container: {
1212
center: true,
13-
margin: 'auto'
13+
margin: 'auto',
14+
screens: {
15+
sm: '100%',
16+
md: '100%',
17+
lg: '1024px',
18+
xl: '1280px'
19+
}
1420
}
1521
}
1622
},

0 commit comments

Comments
 (0)