Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit 667ddb29bc9b5e4f68dea71cc1d129c66185e5d9

Authored by Deepak
1 parent f3432726ef
Exists in master

burger menu

Showing 2 changed files with 27 additions and 22 deletions   Show diff stats
imports/client/views/org/app/module/navigation/AuthenticatedNavigation.js
Diff comments   View file @667ddb2
... ... @@ -3,21 +3,24 @@ import { browserHistory } from 'react-router';
3 3 import { LinkContainer } from 'react-router-bootstrap';
4 4 import { logout } from '/imports/client/app/utils/loginMethods';
5 5 import { Navbar,Modal, Nav, NavItem,
6   - Glyphicon, Collapse,
  6 + Glyphicon, Collapse,
7 7 NavbarToggler, NavbarBrand,
8 8 NavLink, DropdownItem, DropdownToggle, DropdownMenu,
9 9 NavDropdown, MenuItem } from 'react-bootstrap';
10 10 import { Meteor } from 'meteor/meteor';
  11 +import $ from 'jquery';
  12 +
11 13  
12 14 const handleLogout = () => Meteor.logout(() => browserHistory.push('/login'));
13 15  
14 16 export class AuthenticatedNavigation extends Component {
15 17 constructor(props) {
16 18 super(props);
17   -
18 19 this.toggle = this.toggle.bind(this);
  20 + this.changeBodyClass = this.changeBodyClass.bind(this);
19 21 this.state = {
20   - dropdownOpen: false
  22 + dropdownOpen: false,
  23 + burgerMenu: false
21 24 };
22 25 }
23 26 toggle() {
... ... @@ -25,13 +28,22 @@ export class AuthenticatedNavigation extends Component {
25 28 dropdownOpen: !this.state.dropdownOpen
26 29 });
27 30 }
  31 + changeBodyClass(){
  32 + if(this.state.burgerMenu){
  33 + $('body').addClass('sidebar-xs');
  34 + this.setState({burgerMenu: false});
  35 + }else{
  36 + $('body').removeClass('sidebar-xs');
  37 + this.setState({burgerMenu: true});
  38 + }
  39 + }
28 40 render(){
29 41 const {user, org} = this.props.data;
30 42 return(
31 43 <Navbar inverse collapseOnSelect className="bg-crimson">
32 44 <Navbar.Header>
33 45 <Navbar.Brand>
34   - <a href="#"><Glyphicon glyph="link" />
  46 + <a href="#"><Glyphicon glyph="link" />
35 47 {org.name} </a>
36 48 </Navbar.Brand>
37 49 <ul className="nav navbar-nav visible-xs-block">
... ... @@ -43,9 +55,12 @@ export class AuthenticatedNavigation extends Component {
43 55 <Navbar.Collapse id="navbar-mobile">
44 56 <ul className="nav navbar-nav">
45 57 <NavItem eventKey={1} href="#" className="sidebar-control sidebar-main-toggle hidden-xs">
46   - <i className="icon-paragraph-justify3"/>
  58 + <i
  59 + className="icon-paragraph-justify3 burgerMenu"
  60 + onClick = {this.changeBodyClass}
  61 + />
47 62 </NavItem>
48   -
  63 +
49 64 <NavDropdown title="Dropdown" id="update">
50 65 <div className="dropdown-content">
51 66 <div className="dropdown-content-heading">
... ... @@ -53,7 +68,7 @@ export class AuthenticatedNavigation extends Component {
53 68 <ul className="icons-list">
54 69 <li><a href="#"><i className="icon-sync"></i></a></li>
55 70 </ul>
56   -
  71 +
57 72 </div>
58 73 <ul className="media-list dropdown-content-body width-350">
59 74 <li className="media">
... ... @@ -208,7 +223,7 @@ export class AuthenticatedNavigation extends Component {
208 223 <ul className="media-list dropdown-content-body">
209 224 <li className="media">
210 225 <div className="media-left">
211   -
  226 +
212 227 <span className="badge bg-danger-400 media-badge">5</span>
213 228 </div>
214 229  
... ... @@ -224,7 +239,7 @@ export class AuthenticatedNavigation extends Component {
224 239  
225 240 <li className="media">
226 241 <div className="media-left">
227   -
  242 +
228 243 <span className="badge bg-danger-400 media-badge">4</span>
229 244 </div>
230 245  
... ... @@ -258,13 +273,13 @@ export class AuthenticatedNavigation extends Component {
258 273 <span className="media-annotation pull-right">Tue</span>
259 274 </a>
260 275  
261   - <span className="text-muted">What a strenuous career it is that I've chosen...</span>
  276 + <span className="text-muted">What a strenuous career it is that I have chosen...</span>
262 277 </div>
263 278 </li>
264 279  
265 280 <li className="media">
266 281 <div className="media-left">
267   -
  282 +
268 283 </div>
269 284 <div className="media-body">
270 285 <a href="#" className="media-heading">
... ... @@ -282,19 +297,8 @@ export class AuthenticatedNavigation extends Component {
282 297 </div>
283 298 </div>
284 299 </NavDropdown>
285   -
286   - {/* <NavItem eventKey={2} href="#">
287   - <div
288   - className = "appLayout-topItem"
289   - onClick = {() => logout()}
290   - >
291   - logout
292   - </div>
293   - </NavItem>*/}
294   -
295 300 </Nav>
296 301 </div>
297   -
298 302 </Navbar.Collapse>
299 303 </Navbar>
300 304 );
... ...
... ... @@ -80,6 +80,7 @@
80 80 "react-addons-transition-group": "^15.4.2",
81 81 "react-bootstrap": "^0.30.8",
82 82 "react-bootstrap-date-picker": "^4.0.0",
  83 + "react-burger-menu": "^1.10.14",
83 84 "react-dom": "^15.4.2",
84 85 "react-fontawesome": "^1.5.0",
85 86 "react-komposer": "^1.13.1",
... ...