Skip to content

Commit e7cdec2

Browse files
RodrigoECRodrigoEC
authored
Merge pull request #70 from OCA-UFCG/feat/header-v2
Feat: Adds Header version 2.0
2 parents e7e07a6 + f416f15 commit e7cdec2

File tree

14 files changed

+672
-198
lines changed

14 files changed

+672
-198
lines changed

‎public/sprite.svg

Lines changed: 296 additions & 95 deletions
Loading

‎src/components/Dropdown/Dropdown.styles.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import styled from "styled-components";
2+
3+
export const NavItem = styled.li`
4+
position: relative;
5+
transition: 0.3s;
6+
line-height: 1.5rem;
7+
list-style: none;
8+
border-left: thin solid transparent;
9+
margin: 0;
10+
11+
a {
12+
display: block;
13+
text-decoration: none;
14+
width: 100%;
15+
font-weight: normal;
16+
font-style: none;
17+
}
18+
19+
@media screen and (max-width: 1000px) {
20+
width: 100%;
21+
22+
&:hover {
23+
padding-left: 0.5rem;
24+
border-left: thin solid ${({ theme }) => theme.colors.black};
25+
}
26+
}
27+
`;
28+
29+
export const ItemContent = styled.div`
30+
display: flex;
31+
gap: 0.25rem;
32+
align-items: center;
33+
transition: 0.3s;
34+
35+
a {
36+
display: block;
37+
text-decoration: none;
38+
width: max-content;
39+
font-weight: normal;
40+
font-style: none;
41+
}
42+
43+
&:hover {
44+
opacity: 0.6;
45+
}
46+
`;
47+
48+
export const Wrapper = styled.div`
49+
padding-top: 1rem;
50+
51+
position: absolute;
52+
background-color: transparent;
53+
width: 100%;
54+
height: 100%;
55+
`;
56+
57+
export const ChildrenWrapper = styled.ul`
58+
margin: 0;
59+
position: absolute;
60+
border-radius: 4px;
61+
width: fit-content;
62+
padding: 0.75rem 1rem;
63+
flex-flow: column;
64+
gap: 0.5rem;
65+
display: none;
66+
box-shadow: 0px 0px 4px #00000015;
67+
68+
&::before {
69+
border-radius: 4px;
70+
width: 100%;
71+
height: 100%;
72+
backdrop-filter: blur(40px);
73+
position: absolute;
74+
background-color: #ffffff;
75+
top: 0;
76+
left: 0;
77+
content: "";
78+
}
79+
80+
${NavItem}:hover & {
81+
display: flex;
82+
}
83+
`;

‎src/components/Dropdown/Dropdown.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ISection } from "@/utils/interfaces";
2+
import {
3+
ChildrenWrapper,
4+
ItemContent,
5+
NavItem,
6+
Wrapper,
7+
} from "./Dropdown.styles";
8+
import { Icon } from "../Icon/Icon";
9+
10+
export const Dropdown = ({ item }: { item: ISection }) => {
11+
const { name, path, children } = item;
12+
13+
if (!children) {
14+
return (
15+
<NavItem>
16+
<ItemContent>
17+
<a href={path}>{name}</a>
18+
</ItemContent>
19+
</NavItem>
20+
);
21+
}
22+
23+
return (
24+
<NavItem>
25+
<ItemContent>
26+
<a href={path}>{name}</a>
27+
<Icon id="arrow-head" width={11} height={9} />
28+
</ItemContent>
29+
{children && (
30+
<Wrapper>
31+
<ChildrenWrapper>
32+
{Object.entries(children).map(([key, item]) => (
33+
<Dropdown key={key} item={item} />
34+
))}
35+
</ChildrenWrapper>
36+
</Wrapper>
37+
)}
38+
</NavItem>
39+
);
40+
};

‎src/components/Footer/Footer.styles.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const Sections = styled(Link)`
5454
export const SocialMediasContainer = styled.div`
5555
display: flex;
5656
gap: 1rem;
57+
align-items: center;
5758
`;
5859

5960
export const SocialMedia = styled(Link)`

‎src/components/Footer/Footer.tsx

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { ISection, IOCAChannel } from "@/utils/interfaces";
2-
import { sections } from "@/utils/constants";
1+
import { channels, sections } from "@/utils/constants";
32
import {
43
Wrapper,
54
Divider,
@@ -12,33 +11,20 @@ import {
1211
import { Icon } from "../Icon/Icon";
1312

1413
const Footer = () => {
15-
const channels: IOCAChannel[] = [
16-
{
17-
name: "GitHub",
18-
href: "https://github.com/OCA-UFCG",
19-
icon: "github",
20-
},
21-
{
22-
name: "White instagram icon with a camera drawing",
23-
href: "https://www.instagram.com/observatorio.caatinga/",
24-
icon: "instagram",
25-
},
26-
];
27-
2814
return (
2915
<Wrapper>
3016
<LogoImage id="logo-oca-white" width={150} height={150} />
3117
<References>
32-
{sections.map(({ href, name }: ISection, index: number) => (
33-
<Sections key={index} href={href}>
34-
{name}
18+
{Object.entries(sections).map(([key, item]) => (
19+
<Sections key={key} href={item.path}>
20+
{item.name}
3521
</Sections>
3622
))}
3723
<Divider />
3824
<SocialMediasContainer>
39-
{channels.map(({ name, href, icon }, index) => (
25+
{channels.map(({ name, href, icon, size }, index) => (
4026
<SocialMedia target="_blank" key={index} title={name} href={href}>
41-
<Icon id={icon} size={24} />
27+
<Icon id={icon} size={size} />
4228
</SocialMedia>
4329
))}
4430
</SocialMediasContainer>

‎src/components/Header/Header.styles.ts

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,14 @@ import { Icon } from "../Icon/Icon";
33

44
export const Wrapper = styled.div`
55
display: flex;
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
padding: 1rem 1.5rem;
10+
z-index: 50;
611
justify-content: space-between;
712
align-items: center;
8-
width: 100%;
13+
width: 100vw;
914
box-sizing: border-box;
1015
1116
@media screen and (max-width: 1000px) {
@@ -16,16 +21,24 @@ export const Wrapper = styled.div`
1621

1722
export const LogoImage = styled(Icon)`
1823
height: 4rem;
19-
width: fit-content;
24+
width: 8rem;
2025
2126
@media screen and (max-width: 1000px) {
2227
display: none;
2328
}
2429
`;
2530

2631
export const Navbar = styled.nav`
32+
backdrop-filter: blur(40px);
33+
padding: 0.5rem 0.75rem;
34+
background-color: #ffffff98;
35+
border: 1px solid #44444410;
36+
border-radius: 4px;
37+
box-shadow: 0px 0px 4px #00000015;
38+
2739
@media screen and (max-width: 1000px) {
2840
width: 100%;
41+
display: none;
2942
}
3043
`;
3144

@@ -43,38 +56,24 @@ export const NavList = styled.ul`
4356
}
4457
`;
4558

46-
export const NavItem = styled.li`
47-
transition: 0.3s;
48-
line-height: 1.5rem;
49-
list-style: none;
50-
border-bottom: thin solid transparent;
51-
border-left: thin solid transparent;
52-
margin: 0;
59+
export const SocialMedia = styled.div`
60+
display: flex;
61+
gap: 0.75rem;
62+
align-items: center;
63+
justify-content: center;
64+
backdrop-filter: blur(40px);
65+
padding: 0.3rem 0.5rem;
66+
border-radius: 4px;
67+
background-color: #ffffff60;
68+
`;
5369

54-
a {
55-
display: block;
56-
text-decoration: none;
57-
width: 100%;
58-
font-style: none;
59-
}
70+
export const MediaWrapper = styled.a`
71+
display: flex;
72+
align-items: center;
73+
color: ${({ theme }) => theme.colors.black}90;
74+
transition: 300ms;
6075
6176
&:hover {
62-
opacity: 0.6;
63-
}
64-
65-
@media screen and (min-width: 1001px) {
66-
&:hover {
67-
translate: 0 -0.25rem;
68-
border-bottom: thin solid ${({ theme }) => theme.colors.black};
69-
}
70-
}
71-
72-
@media screen and (max-width: 1000px) {
73-
width: 100%;
74-
75-
&:hover {
76-
padding-left: 0.5rem;
77-
border-left: thin solid ${({ theme }) => theme.colors.black};
78-
}
77+
transform: scale(110%);
7978
}
8079
`;

‎src/components/Header/Header.tsx

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
1-
import { ISection } from "@/utils/interfaces";
2-
import { LogoImage, NavItem, NavList, Navbar, Wrapper } from "./Header.styles";
3-
import { sections } from "@/utils/constants";
41
import Link from "next/link";
2+
import {
3+
LogoImage,
4+
MediaWrapper,
5+
NavList,
6+
Navbar,
7+
SocialMedia,
8+
Wrapper,
9+
} from "./Header.styles";
10+
import { channels, sections } from "@/utils/constants";
11+
import { Dropdown } from "@/components/Dropdown/Dropdown";
12+
import { Icon } from "../Icon/Icon";
513

6-
const Header = (props: any) => {
14+
const SocialMediaIem = ({
15+
href,
16+
icon,
17+
size,
18+
}: {
19+
href: string;
20+
icon: string;
21+
size: number;
22+
}) => {
23+
return (
24+
<MediaWrapper href={href} target="_blank" title={icon}>
25+
<Icon id={icon} size={size} />
26+
</MediaWrapper>
27+
);
28+
};
29+
30+
const Header = (props?: any) => {
731
return (
832
<Wrapper {...props}>
933
<Link href="/">
1034
<LogoImage id="logo-oca-full" />
1135
</Link>
1236
<Navbar>
1337
<NavList>
14-
{sections.map(({ href, name }: ISection, index: number) => (
15-
<NavItem key={index}>
16-
<Link href={href}>{name}</Link>
17-
</NavItem>
38+
{Object.entries(sections).map(([key, item]) => (
39+
<Dropdown item={item} key={key} />
1840
))}
1941
</NavList>
2042
</Navbar>
21-
<div style={{ cursor: "not-allowed" }}>pt-br</div>{" "}
22-
{/* TODO: ADD language component */}
43+
<SocialMedia>
44+
{channels.map(({ name, icon, href, size }) => (
45+
<SocialMediaIem
46+
key={name.toLocaleLowerCase().replace(" ", "-")}
47+
icon={icon}
48+
href={href}
49+
size={size || 24}
50+
/>
51+
))}
52+
</SocialMedia>
2353
</Wrapper>
2454
);
2555
};

0 commit comments

Comments
 (0)