Skip to content

Commit b3b6fb8

Browse files
author
Herman Starikov
committed
refactoring
1 parent 4dc96c6 commit b3b6fb8

File tree

5 files changed

+100
-47
lines changed

5 files changed

+100
-47
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@
7070
"node-sass-chokidar": "0.0.3"
7171
},
7272
"scripts": {
73-
"build-css": "node-sass-chokidar src/ -o public/",
74-
"watch-css": "npm run build-css && node-sass-chokidar src/ -o public/ --watch --recursive",
73+
"build-css": "node-sass-chokidar src/ -o src/",
74+
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
7575
"start": "node scripts/start.js",
7676
"build": "node scripts/build.js && ./after-build.sh",
7777
"test": "node scripts/test.js --env=jsdom --coverage",

‎public/index.html

+65-32
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Off-canvas Navbar for React Bootstrap</title>
2323
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
2424
<link rel="stylesheet" href="/offcanvas.css">
2525
</head>
@@ -45,41 +45,74 @@
4545
<script type="text/babel">
4646
const { Navbar, Nav, NavItem, MenuItem, NavDropdown, FormGroup, Button, FormControl } = ReactBootstrap
4747
const { default: NavbarOffcanvas } = window["react-bootstrap-navbar-offcanvas"]
48+
const repo = 'https://github.com/Hermanya/react-bootstrap-navbar-offcanvas'
4849
class App extends React.Component {
4950
render() {
5051
return (
5152
<div className="App">
52-
<Navbar collapseOnSelect staticTop>
53-
<Navbar.Header>
54-
<Navbar.Brand>
55-
<a href="#">React-Bootstrap</a>
56-
</Navbar.Brand>
57-
<Navbar.Toggle />
58-
</Navbar.Header>
59-
<NavbarOffcanvas side="left">
60-
<Nav>
61-
<NavItem eventKey={1} href="#">Link</NavItem>
62-
<NavItem eventKey={2} href="#">Link</NavItem>
63-
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
64-
<MenuItem eventKey={3.1}>Action</MenuItem>
65-
<MenuItem eventKey={3.2}>Another action</MenuItem>
66-
<MenuItem eventKey={3.3}>Something else here</MenuItem>
67-
<MenuItem divider />
68-
<MenuItem eventKey={3.3}>Separated link</MenuItem>
69-
</NavDropdown>
70-
</Nav>
71-
<Navbar.Form pullRight>
72-
<FormGroup>
73-
<FormControl type="text" placeholder="Search" />
74-
</FormGroup>
75-
{' '}
76-
<Button type="submit" bsStyle="success">Submit</Button>
77-
</Navbar.Form>
78-
</NavbarOffcanvas>
79-
</Navbar>
80-
<p className="App-intro">
81-
To get started, edit <code>src/App.js</code> and save to reload.
82-
</p>
53+
<Navbar collapseOnSelect staticTop>
54+
<Navbar.Header>
55+
<Navbar.Brand>
56+
<a href={repo}>Off-canvas Navbar</a>
57+
</Navbar.Brand>
58+
<Navbar.Toggle />
59+
</Navbar.Header>
60+
<NavbarOffcanvas side="left">
61+
<Nav>
62+
<NavItem active>Exhibit A</NavItem>
63+
<NavDropdown title="Github" id="basic-nav-dropdown">
64+
<MenuItem href={repo}>Code</MenuItem>
65+
<MenuItem href={repo + '/issues'}>Issues</MenuItem>
66+
<MenuItem>Something else here</MenuItem>
67+
<MenuItem divider />
68+
<MenuItem>Separated link</MenuItem>
69+
</NavDropdown>
70+
</Nav>
71+
<Navbar.Text pullRight>
72+
I am responsive!
73+
</Navbar.Text>
74+
<Navbar.Form pullRight>
75+
<FormGroup>
76+
<FormControl type="text" placeholder="Search" />
77+
</FormGroup>
78+
</Navbar.Form>
79+
</NavbarOffcanvas>
80+
</Navbar>
81+
<pre className="container">
82+
<code>{`
83+
import NavbarOffcanvas from 'react-bootstrap-navbar-offcanvas'
84+
import { /* everything else */ } from 'react-bootstrap'
85+
86+
<Navbar collapseOnSelect staticTop>
87+
<Navbar.Header>
88+
<Navbar.Brand>
89+
<a href={repo}>Off-canvas Navbar</a>
90+
</Navbar.Brand>
91+
<Navbar.Toggle />
92+
</Navbar.Header>
93+
<NavbarOffcanvas side="left">
94+
<Nav>
95+
<NavItem active>Exhibit A</NavItem>
96+
<NavDropdown title="Github" id="basic-nav-dropdown">
97+
<MenuItem href={repo}>Code</MenuItem>
98+
<MenuItem href={repo + '/issues'}>Issues</MenuItem>
99+
<MenuItem>Something else here</MenuItem>
100+
<MenuItem divider />
101+
<MenuItem>Separated link</MenuItem>
102+
</NavDropdown>
103+
</Nav>
104+
<Navbar.Text pullRight>
105+
I am responsive!
106+
</Navbar.Text>
107+
<Navbar.Form pullRight>
108+
<FormGroup>
109+
<FormControl type="text" placeholder="Search" />
110+
</FormGroup>
111+
</Navbar.Form>
112+
</NavbarOffcanvas>
113+
</Navbar>
114+
`}</code>
115+
</pre>
83116
</div>
84117
)
85118
}

‎src/Offcanvas.js

+3-7
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,12 @@ class Collapse extends React.Component {
4444
: this.props.side
4545
}
4646

47-
/* -- Expanding -- */
4847
handleEnter(elem) {
49-
elem.style[this._side()] = '0'
50-
elem.style.opacity = 1
48+
elem.classList.add('in')
5149
}
5250

53-
/* -- Collapsing -- */
5451
handleExit(elem) {
55-
elem.style[this._side()] = '-100px'
56-
elem.style.opacity = 0
52+
elem.classList.remove('in')
5753
}
5854

5955
render() {
@@ -70,7 +66,7 @@ class Collapse extends React.Component {
7066

7167
const classes = {
7268
'navbar-offcanvas-left': this._side() === 'left',
73-
'navbar-offcanvas-right': this._side() === 'right',
69+
'navbar-offcanvas-right': this._side() === 'right'
7470
}
7571

7672
return (

‎src/offcanvas.css

+11-3
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,26 @@
55
padding-left: 15px;
66
padding-right: 15px;
77
position: absolute;
8-
transition: 0.5s ease;
8+
transition: transform 0.5s ease, opacity 0.5s ease;
99
z-index: 999; }
10+
.navbar-offcanvas.in {
11+
opacity: 1; }
1012
.navbar-default .navbar-offcanvas {
1113
background-color: #f8f8f8; }
1214
.navbar-default .navbar-offcanvas-right {
1315
border-left: 1px solid #e7e7e7; }
1416
.navbar-default .navbar-offcanvas-left {
1517
border-right: 1px solid #e7e7e7; }
1618
.navbar-offcanvas-left {
17-
left: -100%; }
19+
left: 0;
20+
transform: translateX(-100%); }
21+
.navbar-offcanvas-left.in {
22+
transform: translateX(0); }
1823
.navbar-offcanvas-right {
19-
right: -100px; }
24+
right: 0;
25+
transform: translateX(100%); }
26+
.navbar-offcanvas-right.in {
27+
transform: translateX(0); }
2028
.navbar-inverse .navbar-offcanvas {
2129
background-color: #222; }
2230
.navbar-inverse .navbar-offcanvas-right {

‎src/offcanvas.scss

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
@import 'vars';
22

3+
34
@media (max-width: $offcanvas-media) {
45
.navbar-offcanvas {
56
min-height: calc(100vh - 50px);
67
opacity: 0;
78
padding-left: $navbar-padding-horizontal;
89
padding-right: $navbar-padding-horizontal;
910
position: absolute;
10-
transition: $offcanvas-animation-time ease;
11+
transition: transform $offcanvas-animation-time ease,
12+
opacity $offcanvas-animation-time ease;
1113
z-index: 999;
14+
15+
&.in {
16+
opacity: 1;
17+
}
1218
}
1319

1420
.navbar-default {
@@ -26,11 +32,21 @@
2632
}
2733

2834
.navbar-offcanvas-left {
29-
left: -100%;
35+
left: 0;
36+
transform: translateX(-100%);
37+
38+
&.in {
39+
transform: translateX(0);
40+
}
3041
}
3142

3243
.navbar-offcanvas-right {
33-
right: -100px;
44+
right: 0;
45+
transform: translateX(100%);
46+
47+
&.in {
48+
transform: translateX(0);
49+
}
3450
}
3551

3652
.navbar-inverse {

0 commit comments

Comments
 (0)