Skip to content

Commit b79c317

Browse files
Namanv0509Namanv0509
authored
Merge pull request #6915 from Namanv0509/legal-style
Legal Navigation and style update
2 parents 4790f8e + 10cb4af commit b79c317

File tree

14 files changed

+1144
-739
lines changed

14 files changed

+1144
-739
lines changed

‎src/components/legal-navigation/TocPagination.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
import { content } from "./content";
4+
import Button from "../../reusecore/Button";
5+
import TocPaginationWrapper from "./TocPagination.style";
6+
7+
const TocPagination = () => {
8+
const [currentPage, setCurrentPage] = useState(0);
9+
10+
useEffect(() => {
11+
const path = window.location.pathname;
12+
const index = content.findIndex((x) => x.link === path);
13+
setCurrentPage(index);
14+
}, []);
15+
16+
return (
17+
<TocPaginationWrapper>
18+
{currentPage > 0 ? (
19+
<Button $secondary $url={content[currentPage - 1]?.link}>
20+
&larr; Previous
21+
</Button>
22+
) : null}
23+
24+
{currentPage < content.length - 1 ? (
25+
<Button $primary $url={content[currentPage + 1]?.link}>
26+
Next &rarr;
27+
</Button>
28+
) : null}
29+
</TocPaginationWrapper>
30+
);
31+
};
32+
33+
export default TocPagination;

‎src/components/legal-navigation/TocPagination.style.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from "styled-components";
2+
3+
const TocPaginationWrapper = styled.div`
4+
display: flex;
5+
gap: 1rem;
6+
justify-content: center;
7+
margin: 3rem 2rem 4rem 2rem;
8+
9+
@media screen and (max-width: 540px) {
10+
margin: 0 0 2rem 0;
11+
flex-flow: row wrap;
12+
gap: 0.3rem;
13+
}
14+
`;
15+
16+
export default TocPaginationWrapper;

‎src/components/legal-navigation/content.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const content = [
2+
{ id: 0, link: "/company/legal/privacy", text: "Privacy" },
3+
{ id: 1, link: "/company/legal/code-of-conduct", text: "Code Of Conduct" },
4+
{ id: 2, link: "/company/legal/sub-processors", text: "Sub-Processors" },
5+
{ id: 3, link: "/company/legal/terms-of-service", text: "Terms of Service" },
6+
{ id: 4, link: "/company/legal/cookie-notice", text: "Cookie Notice" },
7+
{ id: 5, link: "/company/legal/digital-service", text: "Digital Service" },
8+
];

‎src/components/legal-navigation/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useState } from "react";
2+
import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
3+
import { Link } from "gatsby";
4+
import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
5+
import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
6+
7+
import TOCWrapper from "./toc.style";
8+
import { content } from "./content";
9+
10+
const TOC = () => {
11+
const [expand, setExpand] = useState(false);
12+
return (
13+
<TOCWrapper>
14+
<div className="go-back">
15+
<Link to="/company/legal">
16+
<HiOutlineChevronLeft />
17+
<h4>Table of Contents</h4>
18+
</Link>
19+
<div className="toc-toggle-btn">
20+
{expand ? (
21+
<IoMdClose
22+
className="toc-menu-icon"
23+
onClick={function () {
24+
setExpand(!expand);
25+
}}
26+
/>
27+
) : (
28+
<IoIosArrowDropdownCircle
29+
className="toc-menu-icon"
30+
onClick={function () {
31+
setExpand(!expand);
32+
}}
33+
/>
34+
)}
35+
</div>
36+
</div>
37+
<div className="toc-list">
38+
<ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
39+
{content.map((x) => (
40+
<li key={x.id}>
41+
<Link
42+
to={x.link}
43+
key={x.id}
44+
className="toc-sub-heading toc-sub-inline"
45+
activeClassName="active"
46+
>
47+
{x.text}
48+
</Link>
49+
</li>
50+
))}
51+
</ul>
52+
</div>
53+
</TOCWrapper>
54+
);
55+
};
56+
57+
export default TOC;

‎src/components/legal-navigation/intra-page.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { useEffect, useState } from "react";
2+
import { Link } from "gatsby";
3+
import styled from "styled-components";
4+
5+
const JoinCommunityWrapper = styled.div`
6+
@media screen and (min-width: 300px) and (max-width: 1279px) {
7+
display: none;
8+
}
9+
.intra-page {
10+
position: sticky;
11+
top: 10rem;
12+
right: 0rem;
13+
margin-right: 1rem;
14+
padding-bottom: 5rem;
15+
padding-right: 2rem;
16+
align-items: left;
17+
justify-content: space-around;
18+
display: flex;
19+
flex-direction: column;
20+
overflow: hidden;
21+
22+
.list {
23+
color: #000000;
24+
}
25+
.active {
26+
font-weight: 5000;
27+
color: #000000;
28+
}
29+
30+
ul {
31+
list-style: none;
32+
top: 3rem;
33+
li {
34+
padding-bottom: 0.5rem;
35+
padding-top: 0.5rem;
36+
}
37+
}
38+
@media only screen and (min-width: 1280px) and (max-width: 1350px) {
39+
padding-right: 0rem;
40+
margin-right: 0rem;
41+
}
42+
@media only screen and (max-width: 950px) {
43+
width: 0;
44+
opacity: 0;
45+
height: 0;
46+
transition: none;
47+
visibility: hidden;
48+
}
49+
}
50+
51+
.learn {
52+
width: 10rem;
53+
}
54+
`;
55+
56+
function IntraPage({ contents }) {
57+
const [intapath, setIntapath] = useState(null);
58+
useEffect(() => {
59+
const path = window.location.pathname;
60+
setIntapath(path);
61+
}, []);
62+
63+
return (
64+
<JoinCommunityWrapper>
65+
<div className="intra-page">
66+
<ul>
67+
{contents.map((x) => (
68+
<li key={x.id} className="list">
69+
<Link
70+
to={`${intapath}${x.link}`}
71+
key={x.id}
72+
activeClassName="active"
73+
>
74+
{x.text}
75+
</Link>
76+
</li>
77+
))}
78+
</ul>
79+
</div>
80+
</JoinCommunityWrapper>
81+
);
82+
}
83+
84+
export default IntraPage;

‎src/components/legal-navigation/toc.style.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import styled from "styled-components";
2+
3+
const TOCWrapper = styled.div`
4+
5+
position: sticky;
6+
top: 10rem;
7+
left: 0rem;
8+
margin-left: 3rem;
9+
margin-top: 3rem;
10+
margin-bottom : 3rem;
11+
width:15rem;
12+
word-break: break-word;
13+
overflow-wrap: break-word;
14+
white-space: normal;
15+
max-width: 15rem;
16+
padding-bottom: 2rem;
17+
18+
@media screen and (min-width: 1280px) and (max-width: 1350px) {
19+
margin-left:0.2rem;
20+
}
21+
22+
.go-back {
23+
margin-left: 1rem;
24+
display:flex;
25+
justify-content:space-between;
26+
align-items:center;
27+
a {
28+
display: inline-flex;
29+
svg {
30+
align-self: center;
31+
font-size: 1.5rem;
32+
color: rgb(177, 182, 184);
33+
width: 100%;
34+
max-width: 1.5rem;
35+
}
36+
h4 {
37+
font-weight: 500;
38+
text-transform: capitalize;
39+
font-size: 1.25rem;
40+
white-space: nowrap;
41+
}
42+
&:hover {
43+
svg,
44+
h4 {
45+
color: #3c494f;
46+
}
47+
}
48+
}
49+
margin-bottom: 1rem;
50+
}
51+
52+
.toc-sub-heading {
53+
color: ${(props) => props.theme.text};
54+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
55+
margin-top: 1rem;
56+
font-weight: 300;
57+
font-size: 1.15rem;
58+
}
59+
60+
.toc-sub-inline{
61+
display: inline-block;
62+
}
63+
64+
.active{
65+
font-weight:500;
66+
color: ${(props) => props.theme.secondaryColor};
67+
}
68+
69+
ul{
70+
display:flex;
71+
flex-direction:column;
72+
white-space: nowrap;
73+
}
74+
75+
.toc-ul{
76+
display: flex;
77+
flex-direction: column;
78+
margin-top: 0rem;
79+
list-style: none;
80+
}
81+
82+
.toc-toggle-btn{
83+
display:none;
84+
}
85+
86+
.toc-ul-open{
87+
display: flex;
88+
flex-direction: column;
89+
margin-top: 0rem;
90+
list-style: none;
91+
height:auto !important;
92+
opacity:1 !important;
93+
margin-bottom: 2rem;
94+
transition:all .4s !important;
95+
}
96+
97+
.toc-menu-icon{
98+
width: 1.5rem;
99+
height: 1.5rem;
100+
cursor: pointer;
101+
fill: ${props => props.theme.menuColor};
102+
}
103+
104+
.toc-sub-heading:hover {
105+
color: ${(props) => props.theme.secondaryColor};
106+
}
107+
108+
@media only screen and (max-width: 750px){
109+
position: initial;
110+
margin-right: 3rem;
111+
width: auto;
112+
.toc-toggle-btn{
113+
display:inline-block;
114+
}
115+
.go-back{
116+
margin-left:0;
117+
}
118+
119+
.toc-ul{
120+
opacity:0;
121+
height:0;
122+
transition:none;
123+
visibility:hidden;
124+
}
125+
126+
.toc-ul-open{
127+
visibility:visible;
128+
}
129+
}
130+
`;
131+
132+
export default TOCWrapper;

0 commit comments

Comments
 (0)