Skip to content

Commit d363e93

Browse files
lazycipherlazycipher
committed
navigation unnecessary div removed
1 parent a117602 commit d363e93

File tree

2 files changed

+151
-165
lines changed

2 files changed

+151
-165
lines changed

‎src/user/dashboard/navigation/navigation.js‎

Lines changed: 137 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ class Navigation extends Component {
2525
logout: false,
2626
org: false,
2727
userId: "",
28-
sidebar: false,
29-
backdrop: false
28+
sidebar: false
3029
};
3130
this.setWrapperRef = this.setWrapperRef.bind(this);
3231
this.setMenuRef = this.setMenuRef.bind(this);
@@ -59,7 +58,6 @@ class Navigation extends Component {
5958
if (this.wrapperRef && !this.wrapperRef.contains(event.target) && this.menuRef && !this.menuRef.contains(event.target)) {
6059
this.setState({
6160
sidebar: false,
62-
backdrop: false
6361
})
6462
} else {
6563
return;
@@ -115,16 +113,14 @@ class Navigation extends Component {
115113
const handleSidebarClick = () => {
116114
this.setState({
117115
sidebar: true,
118-
backdrop: true
119116
})
120117
}
121118
const { logout } = this.props;
122119
return (
123120
<>
124-
<Backdrop show={this.state.backdrop} />
125-
<Desktop>
126-
<div className="navigation">
127-
<div className="main-navigation">
121+
<Backdrop show={this.state.sidebar} />
122+
<Desktop>
123+
<div className="navigation">
128124
<ListGroup className="list-group">
129125
<ListGroup.Item style={{ marginLeft: "15px" }}>
130126
<NavLink to="/dashboard">
@@ -189,44 +185,43 @@ class Navigation extends Component {
189185
link="/org-settings"
190186
name="Org settings"
191187
/>
192-
</ListGroup>
193-
<hr />
194-
<ListGroup className="list-group-integrations">
195-
<ListGroup.Item>
196-
<div className="integration-text">
197-
Your Integrations
198-
<img
199-
src={Plus}
200-
alt="add integration"
201-
className="integration-add"
202-
></img>
203-
</div>
204-
</ListGroup.Item>
205-
<ListGroup.Item
206-
className="inactive"
207-
onClick={() => this.setState({ open: true })}
208-
>
209-
<SVGIcon name="JitsiMeet" />
210-
<span style={{ color: "rgba(0, 0, 0, 0.5)" }}>Jitsi Meet</span>
211-
</ListGroup.Item>
188+
</ListGroup>
189+
<hr />
190+
<ListGroup className="list-group-integrations">
191+
<ListGroup.Item>
192+
<div className="integration-text">
193+
Your Integrations
194+
<img
195+
src={Plus}
196+
alt="add integration"
197+
className="integration-add"
198+
></img>
199+
</div>
200+
</ListGroup.Item>
201+
<ListGroup.Item
202+
className="inactive"
203+
onClick={() => this.setState({ open: true })}
204+
>
205+
<SVGIcon name="JitsiMeet" />
206+
<span style={{ color: "rgba(0, 0, 0, 0.5)" }}>Jitsi Meet</span>
207+
</ListGroup.Item>
212208

213-
{this.state.open ? (
214-
<Info show={this.state.open} onHide={close} />
215-
) : null}
216-
</ListGroup>
217-
<hr />
218-
<ListGroup>
219-
<LogoutButton />
220-
<Logout show={this.state.logout} handleClose={cancel} />
221-
</ListGroup>
222-
<hr />
223-
<ListGroup className="codeuino">
224-
<ListGroup.Item>
225-
<div className="codeuino-text">CODEUINO</div>
226-
</ListGroup.Item>
227-
</ListGroup>
209+
{this.state.open ? (
210+
<Info show={this.state.open} onHide={close} />
211+
) : null}
212+
</ListGroup>
213+
<hr />
214+
<ListGroup>
215+
<LogoutButton />
216+
<Logout show={this.state.logout} handleClose={cancel} />
217+
</ListGroup>
218+
<hr />
219+
<ListGroup className="codeuino">
220+
<ListGroup.Item>
221+
<div className="codeuino-text">CODEUINO</div>
222+
</ListGroup.Item>
223+
</ListGroup>
228224
</div>
229-
</div>
230225
</Desktop>
231226

232227
{/* <Tablet>
@@ -375,109 +370,107 @@ class Navigation extends Component {
375370
</Row>
376371
</Nav>
377372
</Navbar>
378-
<div ref={this.setWrapperRef} className={this.state.sidebar?"mobile-nav":"mobile-nav hide-nav"}>
379-
<div className="main-navigation">
380-
<ListGroup className="list-group">
381-
<ListGroup.Item style={{ marginLeft: "15px" }}>
382-
<NavLink to="/dashboard">
383-
<div className="donut-title">
384-
<DonutTitleSmall />
385-
</div>
386-
</NavLink>
387-
</ListGroup.Item>
388-
<hr />
373+
<div ref={this.setWrapperRef} className={this.state.sidebar?"navigation mobile-nav":"navigation mobile-nav hide-nav"}>
374+
<ListGroup className="list-group">
375+
<ListGroup.Item style={{ marginLeft: "15px" }}>
376+
<NavLink to="/dashboard">
377+
<div className="donut-title">
378+
<DonutTitleSmall />
379+
</div>
380+
</NavLink>
381+
</ListGroup.Item>
382+
<hr />
389383

390-
<ListItem
391-
name="Dashboard"
392-
className={this.props.dashboard ? "active" : "inactive"}
393-
link="/dashboard"
394-
/>
395-
{/* <ListItem
396-
name="Pinned Posts"
397-
className={this.props.posts ? "active" : "inactive"}
398-
link="/pinned-posts"
399-
/> */}
400-
<ListItem
401-
name="Organization"
402-
className={this.props.org ? "active" : "inactive"}
403-
link="/organization"
404-
/>
405-
<ListItem
406-
name="Wikis"
407-
className={this.props.wikis ? "active" : "inactive"}
408-
link="/wikis"
409-
/>
410-
<ListItem
411-
name="Events"
412-
className={this.props.event ? "active" : "inactive"}
413-
link="/events"
414-
/>
384+
<ListItem
385+
name="Dashboard"
386+
className={this.props.dashboard ? "active" : "inactive"}
387+
link="/dashboard"
388+
/>
389+
{/* <ListItem
390+
name="Pinned Posts"
391+
className={this.props.posts ? "active" : "inactive"}
392+
link="/pinned-posts"
393+
/> */}
394+
<ListItem
395+
name="Organization"
396+
className={this.props.org ? "active" : "inactive"}
397+
link="/organization"
398+
/>
399+
<ListItem
400+
name="Wikis"
401+
className={this.props.wikis ? "active" : "inactive"}
402+
link="/wikis"
403+
/>
404+
<ListItem
405+
name="Events"
406+
className={this.props.event ? "active" : "inactive"}
407+
link="/events"
408+
/>
415409

416-
<ListItem
417-
name="Projects"
418-
className={this.props.proj ? "active" : "inactive"}
419-
link="/projects"
420-
/>
421-
<ListItem
422-
name="Tickets"
423-
className={this.props.ticket ? "active" : "inactive"}
424-
link="/tickets"
425-
/>
426-
<ListItem
427-
name="Account"
428-
className={this.props.profile ? "active" : "inactive"}
429-
link={`/profile/${
430-
this.state.userId || this.props.user.userProfile._id
431-
}`}
432-
/>
433-
<ListItem
434-
name="Settings"
435-
className={this.props.settings ? "active" : "inactive"}
436-
link="/settings"
437-
/>
438-
<ListItem
439-
className={this.props.orgSettings ? "active" : "inactive"}
440-
link="/org-settings"
441-
name="Org settings"
442-
/>
443-
</ListGroup>
444-
<hr />
445-
<ListGroup className="list-group-integrations">
446-
<ListGroup.Item>
447-
<div className="integration-text">
448-
Your Integrations
449-
<img
450-
src={Plus}
451-
alt="add integration"
452-
className="integration-add"
453-
></img>
454-
</div>
455-
</ListGroup.Item>
456-
<ListGroup.Item
457-
className="inactive"
458-
onClick={() => this.setState({ open: true })}
459-
>
460-
<SVGIcon name="JitsiMeet" />
461-
<span style={{ color: "rgba(0, 0, 0, 0.5)" }}>Jitsi Meet</span>
462-
</ListGroup.Item>
410+
<ListItem
411+
name="Projects"
412+
className={this.props.proj ? "active" : "inactive"}
413+
link="/projects"
414+
/>
415+
<ListItem
416+
name="Tickets"
417+
className={this.props.ticket ? "active" : "inactive"}
418+
link="/tickets"
419+
/>
420+
<ListItem
421+
name="Account"
422+
className={this.props.profile ? "active" : "inactive"}
423+
link={`/profile/${
424+
this.state.userId || this.props.user.userProfile._id
425+
}`}
426+
/>
427+
<ListItem
428+
name="Settings"
429+
className={this.props.settings ? "active" : "inactive"}
430+
link="/settings"
431+
/>
432+
<ListItem
433+
className={this.props.orgSettings ? "active" : "inactive"}
434+
link="/org-settings"
435+
name="Org settings"
436+
/>
437+
</ListGroup>
438+
<hr />
439+
<ListGroup className="list-group-integrations">
440+
<ListGroup.Item>
441+
<div className="integration-text">
442+
Your Integrations
443+
<img
444+
src={Plus}
445+
alt="add integration"
446+
className="integration-add"
447+
></img>
448+
</div>
449+
</ListGroup.Item>
450+
<ListGroup.Item
451+
className="inactive"
452+
onClick={() => this.setState({ open: true })}
453+
>
454+
<SVGIcon name="JitsiMeet" />
455+
<span style={{ color: "rgba(0, 0, 0, 0.5)" }}>Jitsi Meet</span>
456+
</ListGroup.Item>
463457

464-
{this.state.open ? (
465-
<Info show={this.state.open} onHide={close} />
466-
) : null}
467-
</ListGroup>
468-
<hr />
469-
<ListGroup>
470-
<LogoutButton />
471-
<Logout show={this.state.logout} handleClose={cancel} />
472-
</ListGroup>
473-
<hr />
474-
<ListGroup className="codeuino">
475-
<ListGroup.Item>
476-
<div className="codeuino-text">CODEUINO</div>
477-
</ListGroup.Item>
478-
</ListGroup>
479-
</div>
480-
</div>
458+
{this.state.open ? (
459+
<Info show={this.state.open} onHide={close} />
460+
) : null}
461+
</ListGroup>
462+
<hr />
463+
<ListGroup>
464+
<LogoutButton />
465+
<Logout show={this.state.logout} handleClose={cancel} />
466+
</ListGroup>
467+
<hr />
468+
<ListGroup className="codeuino">
469+
<ListGroup.Item>
470+
<div className="codeuino-text">CODEUINO</div>
471+
</ListGroup.Item>
472+
</ListGroup>
473+
</div>
481474
</Mobile>
482475
</>
483476
);

0 commit comments

Comments
 (0)