Skip to content

Commit a5347c0

Browse files
awran5awran5
committed
Initial commit
1 parent 5942535 commit a5347c0

File tree

5 files changed

+225
-2
lines changed

5 files changed

+225
-2
lines changed

‎README.md‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "sidebar-navigation-toggle-react-fontawesome",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"@fortawesome/fontawesome-svg-core": "1.2.25",
9+
"@fortawesome/free-solid-svg-icons": "5.11.2",
10+
"@fortawesome/react-fontawesome": "0.1.8",
11+
"react": "16.12.0",
12+
"react-dom": "16.12.0",
13+
"react-scripts": "3.0.1"
14+
},
15+
"devDependencies": {
16+
"typescript": "3.3.3"
17+
},
18+
"scripts": {
19+
"start": "react-scripts start",
20+
"build": "react-scripts build",
21+
"test": "react-scripts test --env=jsdom",
22+
"eject": "react-scripts eject"
23+
},
24+
"browserslist": [
25+
">0.2%",
26+
"not dead",
27+
"not ie <= 11",
28+
"not op_mini all"
29+
]
30+
}

‎public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎src/index.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { useState } from "react";
2+
import ReactDOM from "react-dom";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import {
5+
faBars,
6+
faTimes,
7+
faCogs,
8+
faTable,
9+
faList,
10+
faUser
11+
} from "@fortawesome/free-solid-svg-icons";
12+
13+
import "./styles.css";
14+
15+
function App() {
16+
const [isOpen, setIsOpen] = useState(false);
17+
18+
const handleTrigger = () => setIsOpen(!isOpen);
19+
20+
return (
21+
<div className="App">
22+
<div className="page">
23+
<div className="content">
24+
<a
25+
target="_blank"
26+
rel="noopener noreferrer"
27+
href="https://codepen.io/mejdej93/pen/eYYJGjd"
28+
>
29+
original Pen
30+
</a>
31+
</div>
32+
33+
<div className={`sidebar ${isOpen ? "sidebar--open" : ""}`}>
34+
<div className="trigger" onClick={handleTrigger}>
35+
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} />
36+
</div>
37+
38+
<div className="sidebar-position">
39+
<FontAwesomeIcon icon={faUser} />
40+
<span>Home</span>
41+
</div>
42+
<div className="sidebar-position">
43+
<FontAwesomeIcon icon={faCogs} />
44+
<span>Menu item 2</span>
45+
</div>
46+
<div className="sidebar-position">
47+
<FontAwesomeIcon icon={faTable} />
48+
<span>Menu item 3</span>
49+
</div>
50+
51+
<div className="sidebar-position">
52+
<FontAwesomeIcon icon={faList} />
53+
<span>Position 4</span>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}
60+
61+
const rootElement = document.getElementById("root");
62+
ReactDOM.render(<App />, rootElement);

‎src/styles.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
body {
5+
width: 100vw;
6+
height: 100vh;
7+
padding: 0;
8+
margin: 0;
9+
}
10+
11+
.App {
12+
font-family: sans-serif;
13+
text-align: center;
14+
}
15+
16+
.page {
17+
width: 100%;
18+
height: 100%;
19+
}
20+
21+
.content {
22+
width: calc(100% - 50px);
23+
margin-left: auto;
24+
padding: 15px;
25+
height: 100%;
26+
word-break: break-word;
27+
}
28+
29+
.sidebar {
30+
position: fixed;
31+
top: 0;
32+
width: 50px;
33+
height: 100%;
34+
background-color: #2a363b;
35+
transition: width 0.3s ease;
36+
border-right: 1px #4d606e solid;
37+
padding-top: 15px;
38+
}
39+
40+
.sidebar .sidebar-position {
41+
height: 50px;
42+
cursor: pointer;
43+
display: flex;
44+
align-items: center;
45+
padding: 0 12px;
46+
text-align: left;
47+
}
48+
49+
.sidebar .sidebar-position:hover {
50+
background-color: #3f5159;
51+
border-right: 5px #e84a5f solid;
52+
}
53+
54+
.sidebar svg {
55+
color: #e84a5f;
56+
min-width: 25px;
57+
}
58+
59+
.sidebar span {
60+
width: 0;
61+
height: 0;
62+
padding: 0 15px;
63+
transition: width 0.3s ease;
64+
color: #c9c9c9;
65+
text-transform: uppercase;
66+
white-space: nowrap;
67+
overflow: hidden;
68+
text-overflow: ellipsis;
69+
}
70+
71+
.sidebar--open {
72+
width: 250px;
73+
transition: width 0.3s ease;
74+
}
75+
76+
.sidebar--open .sidebar-position span {
77+
display: block;
78+
width: 100%;
79+
height: auto;
80+
}
81+
82+
.trigger {
83+
height: 50px;
84+
font-size: 24px;
85+
cursor: pointer;
86+
display: flex;
87+
align-items: center;
88+
justify-content: flex-end;
89+
padding: 0 12px 15px;
90+
}

0 commit comments

Comments
 (0)