Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
go
Commits
45d8e5c7
Commit
45d8e5c7
authored
Feb 11, 2019
by
David Haynes
🙆
Browse files
Transform NavBar into React Hooks for funsies
- wow that is simpler
parent
9c8061e2
Pipeline
#3859
passed with stage
in 1 minute and 27 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
go/go_ahead/src/Components/Organisms/NavBar.jsx
View file @
45d8e5c7
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
Container
,
Navbar
,
...
...
@@ -11,61 +11,49 @@ import {
}
from
"
reactstrap
"
;
import
{
AuthButton
}
from
"
../
"
;
c
lass
NavBar
extends
React
.
Component
{
const
ructor
(
props
)
{
super
(
props
)
;
c
onst
NavBar
=
props
=>
{
const
[
collapsed
,
setCollapsed
]
=
useState
(
true
);
const
{
pathname
}
=
props
.
location
;
this
.
toggleNavbar
=
this
.
toggleNavbar
.
bind
(
this
);
this
.
state
=
{
collapsed
:
true
};
}
toggleNavbar
()
{
this
.
setState
({
collapsed
:
!
this
.
state
.
collapsed
});
}
render
()
{
const
{
pathname
}
=
this
.
props
.
location
;
return
(
<
Navbar
dark
color
=
"dark"
expand
=
"md"
>
<
Container
>
<
NavbarBrand
href
=
"#/"
>
<
img
src
=
"static/go.svg"
className
=
"d-inline-block align-top"
width
=
"42"
height
=
"42"
alt
=
"SRCT Go"
/>
</
NavbarBrand
>
<
NavbarToggler
onClick
=
{
this
.
toggleNavbar
}
className
=
"ml-auto"
/>
<
Collapse
isOpen
=
{
!
this
.
state
.
collapsed
}
navbar
>
<
Nav
className
=
"mx-auto"
navbar
>
<
NavItem
>
<
NavLink
href
=
"#/dhaynes"
active
=
{
pathname
==
"
/dhaynes
"
}
>
Dhaynes
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/about"
active
=
{
pathname
==
"
/about
"
}
>
About
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/debug"
active
=
{
pathname
==
"
/debug
"
}
>
Debug
</
NavLink
>
</
NavItem
>
</
Nav
>
<
AuthButton
className
=
"ml-auto"
/>
</
Collapse
>
</
Container
>
</
Navbar
>
);
}
}
return
(
<
Navbar
dark
color
=
"dark"
expand
=
"md"
>
<
Container
>
<
NavbarBrand
href
=
"#/"
>
<
img
src
=
"static/go.svg"
className
=
"d-inline-block align-top"
width
=
"42"
height
=
"42"
alt
=
"SRCT Go"
/>
</
NavbarBrand
>
<
NavbarToggler
onClick
=
{
()
=>
setCollapsed
(
!
collapsed
)
}
className
=
"ml-auto"
/>
<
Collapse
isOpen
=
{
!
collapsed
}
navbar
>
<
Nav
className
=
"mx-auto"
navbar
>
<
NavItem
>
<
NavLink
href
=
"#/dhaynes"
active
=
{
pathname
==
"
/dhaynes
"
}
>
Dhaynes
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/about"
active
=
{
pathname
==
"
/about
"
}
>
About
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/debug"
active
=
{
pathname
==
"
/debug
"
}
>
Debug
</
NavLink
>
</
NavItem
>
</
Nav
>
<
AuthButton
className
=
"ml-auto"
/>
</
Collapse
>
</
Container
>
</
Navbar
>
);
};
export
default
NavBar
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment