Skip to content

Commit cfef789

Browse files
awran5awran5
committed
update dependencies
0 parents  commit cfef789

File tree

6 files changed

+10655
-0
lines changed

6 files changed

+10655
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎package.json‎

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

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