Skip to content

Commit 7e5a38a

Browse files
GokulnathPGokulnathP
committed
Sidebar added
1 parent 7ec4673 commit 7e5a38a

File tree

10 files changed

+179
-36
lines changed

10 files changed

+179
-36
lines changed

‎src/App.js

+3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
33

44
import Navbar from './Layout/Navbar/Navbar';
55
import Footer from './Layout/Footer/Footer';
6+
67
import Home from './pages/Home/Home';
8+
import GetStarted from './pages/GetStarted/GetStarted';
79

810
const App = () => {
911
return (
1012
<Router>
1113
<Navbar />
1214
<Switch>
15+
<Route path='/get-started' component={GetStarted} />
1316
<Route path='/' component={Home} />
1417
</Switch>
1518
<Footer />

‎src/Layout/Footer/Footer.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { Link } from 'react-router-dom';
23

34
import classes from './Footer.module.css';
45

@@ -17,8 +18,12 @@ const Footer = () => {
1718
</div>
1819
<ul className={classes.Docs}>
1920
<li className={classes.Head}>Docs</li>
20-
<li className={classes.Item}>User Guide</li>
21-
<li className={classes.Item}>References</li>
21+
<li className={classes.Item}>
22+
<Link className={classes.Link} to='/get-started'>User Guide</Link>
23+
</li>
24+
<li className={classes.Item}>
25+
<Link className={classes.Link} to='/get-started'>References</Link>
26+
</li>
2227
</ul>
2328
<ul className={classes.References}>
2429
<li className={classes.Head}>Repositories</li>

‎src/Layout/Navbar/Navbar.js

+83-31
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { Link } from 'react-router-dom';
33

44
import classes from './Navbar.module.css';
@@ -7,40 +7,92 @@ import Logo from '../../img/gitcocommit.png';
77
import Github from '../../img/github.png';
88
import Npm from '../../img/npm.jpg'
99

10+
import Sidebar from '../Sidebar/Sidebar';
1011
import SidebarLogo from '../SidebarLogo/SidebarLogo';
1112

1213
const Navbar = () => {
14+
15+
const [sidebarCss, setSidebarCss] = useState({
16+
display: "none",
17+
position: "fixed",
18+
top: "0",
19+
left: "0",
20+
height: "100vh",
21+
overflowY: "scroll",
22+
zIndex: "5",
23+
backgroundColor: "#ebeaea"
24+
});
25+
26+
const [modelCss, setModelCss] = useState({
27+
display: "none",
28+
zIndex: "4",
29+
backgroundColor: "rgba(0,0,0,0.5)",
30+
position: "fixed",
31+
top: "0",
32+
left: "0",
33+
width: "100%",
34+
height: "100vh"
35+
});
36+
37+
const onClickSidebar = () => {
38+
setModelCss({
39+
...modelCss,
40+
display: "block"
41+
});
42+
setSidebarCss({
43+
...sidebarCss,
44+
display: "block"
45+
});
46+
}
47+
48+
const onClickModel = () => {
49+
setModelCss({
50+
...modelCss,
51+
display: "none"
52+
});
53+
setSidebarCss({
54+
...sidebarCss,
55+
display: "none"
56+
});
57+
}
58+
1359
return (
14-
<nav className={classes.Navbar}>
15-
<ul className={[classes.Nav, classes.NavLeft].join(' ')}>
16-
<li className={[classes.NavItem, classes.Sidebar].join(' ')}>
17-
<SidebarLogo />
18-
</li>
19-
<li className={classes.NavItem}>
20-
<Link to='/' className={classes.NavLink}>
21-
<img src={Logo} className={classes.Logo} alt="Git co commit" />
22-
</Link>
23-
</li>
24-
<li className={classes.NavItem}>
25-
<Link to='/' className={[classes.NavLink, classes.Brand].join(' ')}>Git Co Commit</Link>
26-
</li>
27-
</ul>
28-
<ul className={[classes.Nav, classes.NavRight].join(' ')}>
29-
<li className={classes.NavItem}>
30-
<a href='https://www.npmjs.com/package/git-co-commit' rel="noopener noreferrer" target='_blank' className={classes.NavLink}>
31-
<img src={Npm} className={classes.Npm} alt='Npm' />
32-
</a>
33-
</li>
34-
<li className={classes.NavItem}>
35-
<a href='https://github.com/GokulnathP/git-co-commit' rel="noopener noreferrer" target="_blank" className={classes.NavLink}>
36-
<img src={Github} className={classes.Github} alt='Github' />
37-
</a>
38-
</li>
39-
<li className={[classes.NavItem, classes.Btn_cta].join(' ')}>
40-
<Link to='/' className={classes.NavLink}>Get started</Link>
41-
</li>
42-
</ul>
43-
</nav>
60+
<>
61+
<nav className={classes.Navbar}>
62+
<ul className={[classes.Nav, classes.NavLeft].join(' ')}>
63+
<li className={[classes.NavItem, classes.Sidebar].join(' ')} onClick={onClickSidebar}>
64+
<SidebarLogo />
65+
</li>
66+
<li className={classes.NavItem}>
67+
<Link to='/' className={classes.NavLink}>
68+
<img src={Logo} className={classes.Logo} alt="Git co commit" />
69+
</Link>
70+
</li>
71+
<li className={classes.NavItem}>
72+
<Link to='/' className={[classes.NavLink, classes.Brand].join(' ')}>Git Co Commit</Link>
73+
</li>
74+
</ul>
75+
<ul className={[classes.Nav, classes.NavRight].join(' ')}>
76+
<li className={classes.NavItem}>
77+
<a href='https://www.npmjs.com/package/git-co-commit' rel="noopener noreferrer" target='_blank' className={classes.NavLink}>
78+
<img src={Npm} className={classes.Npm} alt='Npm' />
79+
</a>
80+
</li>
81+
<li className={classes.NavItem}>
82+
<a href='https://github.com/GokulnathP/git-co-commit' rel="noopener noreferrer" target="_blank" className={classes.NavLink}>
83+
<img src={Github} className={classes.Github} alt='Github' />
84+
</a>
85+
</li>
86+
<li className={[classes.NavItem, classes.Btn_cta].join(' ')}>
87+
<Link to='/get-started' className={classes.NavLink}>Get started</Link>
88+
</li>
89+
</ul>
90+
</nav>
91+
<div style={modelCss} onClick={onClickModel}></div>
92+
<div style={sidebarCss}>
93+
<Sidebar />
94+
</div>
95+
</>
4496
)
4597
}
4698

‎src/Layout/Sidebar/Sidebar.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
import classes from './Sidebar.module.css';
5+
6+
const Sidebar = () => {
7+
return (
8+
<div className={classes.Sidebar}>
9+
<Link to='/get-started' className={classes.Head}>Getting started</Link>
10+
<Link to='/get-started' className={classes.Body}>What is pair programming?</Link>
11+
<Link to='/get-started' className={classes.Body}>Why we need pair programming?</Link>
12+
<Link to='/get-started' className={classes.Body}>What is git co commit?</Link>
13+
<Link to='/get-started' className={classes.Body}>Installing node js</Link>
14+
<Link to='/get-started' className={classes.Body}>Installing and using git co commit</Link>
15+
<Link to='/get-started' className={classes.Body}>Setup git co commit for node project</Link>
16+
<Link to='/get-started' className={classes.Head}>References</Link>
17+
<Link to='/get-started' className={classes.Body}>Co authored by in git commit</Link>
18+
<Link to='/get-started' className={classes.Body}>Dependencies used</Link>
19+
<Link to='/get-started' className={classes.Body}>Concept of git co commit</Link>
20+
</div>
21+
)
22+
}
23+
24+
export default Sidebar;

‎src/Layout/Sidebar/Sidebar.module.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.Sidebar {
2+
width: 250px;
3+
background-color: #ebeaea;
4+
padding: 20px 10px;
5+
height: 100%;
6+
}
7+
8+
.Head,
9+
.Body {
10+
text-decoration: none;
11+
display: block;
12+
color: black;
13+
font-size: 16px;
14+
padding: 10px;
15+
font-weight: lighter;
16+
}
17+
18+
.Head {
19+
font-size: 20px;
20+
padding: 20px 10px;
21+
font-weight: bold;
22+
}
23+
24+
.Body:hover {
25+
color: #009790;
26+
text-decoration: underline;
27+
}

‎src/pages/GetStarted/GetStarted.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import classes from './GetStarted.module.css'
4+
5+
import Sidebar from '../../Layout/Sidebar/Sidebar';
6+
7+
const GetStarted = () => {
8+
return (
9+
<div className={classes.Docs}>
10+
<div className={classes.Sidebar}>
11+
<Sidebar />
12+
</div>
13+
<div className={classes.Content}></div>
14+
</div>
15+
)
16+
}
17+
18+
export default GetStarted;

‎src/pages/GetStarted/GetStarted.module.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.Docs {
2+
display: flex;
3+
}
4+
5+
.Content {
6+
width: 100%;
7+
height: 700px;
8+
}
9+
10+
@media (max-width: 800px) {
11+
.Sidebar {
12+
display: none;
13+
}
14+
}

‎src/pages/Home/Body1/Body1.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Body1 = () => {
1111
<h1 className={classes.Heading}>Commit with multiple authors in fast & simple way</h1>
1212
<p className={classes.Para}>Install git-co-commit package to use just a single commit to add all the team members that worked in the project as co-authors.</p>
1313
<div className={classes.Btns}>
14-
<Link to='/' className={[classes.Btn, classes.Start].join(' ')}>Get started</Link>
14+
<Link to='/get-started' className={[classes.Btn, classes.Start].join(' ')}>Get started</Link>
1515
<Link to='/' className={[classes.Btn, classes.Download].join(' ')}>Download</Link>
1616
</div>
1717
</div>

‎src/pages/Home/Body2/Body2.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Body2 = () => {
1717
<h1 className={classes.Heading}>Collabrate</h1>
1818
<p className={classes.Para}>Want to collabrate with code and improve the package, complete documentation of of code is available. Click below buttons to view documentation or start improving</p>
1919
<div className={classes.Btns}>
20-
<Link to='/' className={[classes.Btn, classes.Start].join(' ')} >References</Link>
20+
<Link to='/get-started' className={[classes.Btn, classes.Start].join(' ')} >References</Link>
2121
<a href="https://github.com/git-co-commit/git-co-commit" target="_blank" rel="noopener noreferrer" className={[classes.Btn, classes.Download].join(' ')} >
2222
<img src={Github} alt="Github" className={classes.Github} /> <span className={classes.View}>View Code</span>
2323
</a>

‎src/pages/Home/Body3/Body3.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Body3 = () => {
88
<div className={classes.Body}>
99
<h1 className={classes.Title}>Install Git Co Commit Today</h1>
1010
<h2 className={classes.SubTitle}>It's free and open source</h2>
11-
<Link className={classes.Button} to='/'>Get started</Link>
11+
<Link className={classes.Button} to='/get-started'>Get started</Link>
1212
</div>
1313
);
1414
}

0 commit comments

Comments
 (0)