Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2022-066
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
2022-066
2022-066
Commits
6a5cff62
Commit
6a5cff62
authored
May 07, 2022
by
Navodya Pasqual
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Styled navbar
parent
72e8f32d
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
55 additions
and
16 deletions
+55
-16
frontend/src/components/navBar/navbar.css
frontend/src/components/navBar/navbar.css
+27
-3
frontend/src/components/navBar/navbar.js
frontend/src/components/navBar/navbar.js
+23
-12
frontend/src/index.css
frontend/src/index.css
+5
-1
No files found.
frontend/src/components/navBar/navbar.css
View file @
6a5cff62
...
@@ -112,15 +112,39 @@ a {
...
@@ -112,15 +112,39 @@ a {
.navbar-menu_container
button
{
.navbar-menu_container
button
{
padding
:
0.5rem
1rem
;
padding
:
0.5rem
1rem
;
color
:
#fff
;
color
:
#fff
;
background
:
#
FF4820
;
background
:
#
fd603d
;
font-family
:
var
(
--font-family
);
font-family
:
var
(
--font-family
);
font-weight
:
50
0
;
font-weight
:
45
0
;
font-size
:
18px
;
font-size
:
18px
;
line-height
:
25px
;
line-height
:
25px
;
border
:
none
;
border
:
none
;
outline
:
none
;
outline
:
none
;
cursor
:
pointer
;
cursor
:
pointer
;
border-radius
:
5px
;
border-radius
:
20px
;
}
.navbar-sign
button
:hover
,
.navbar-menu_container
button
:hover
{
background-color
:
#ff3f14
;
color
:
#ffffff
;
}
.navbar-sign
button
:hover
,
.navbar-menu_container
button
:hover
{
-webkit-transform
:
scale
(
1.1
);
-moz-transform
:
scale
(
1.1
);
-o-transform
:
scale
(
1.1
);
}
.navbar-sign
button
,
.navbar-menu_container
button
{
-webkit-transform
:
scale
(
1
);
/* Browser Variations: */
-moz-transform
:
scale
(
1
);
-o-transform
:
scale
(
1
);
-webkit-transition-duration
:
0.5s
;
-moz-transition-duration
:
0.5s
;
-o-transition-duration
:
0.5s
;
}
}
.navbar-menu
{
.navbar-menu
{
...
...
frontend/src/components/navBar/navbar.js
View file @
6a5cff62
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
RiMenu3Line
,
RiCloseLine
}
from
'
react-icons/ri
'
;
import
{
RiMenu3Line
,
RiCloseLine
}
from
'
react-icons/ri
'
;
import
{
useHistory
,
useLocation
,
Link
}
from
"
react-router-dom
"
;
import
logo
from
'
./images/logo.svg
'
;
import
logo
from
'
./images/logo.svg
'
;
import
'
./navbar.css
'
;
import
'
./navbar.css
'
;
const
Navbar
=
()
=>
{
const
Navbar
=
()
=>
{
const
[
toggleMenu
,
setToggleMenu
]
=
useState
(
false
);
const
[
toggleMenu
,
setToggleMenu
]
=
useState
(
false
);
const
history
=
useHistory
();
const
location
=
useLocation
();
const
isActive
=
(
history
,
path
)
=>
{
if
(
history
.
location
.
pathname
===
path
)
{
return
{
color
:
"
#F05454
"
}
}
else
{
return
{
color
:
"
#ffffff
"
}
}
};
return
(
return
(
<
div
className
=
"
gradient_background
"
>
<
div
className
=
"
gradient_background
"
>
...
@@ -14,15 +25,15 @@ const Navbar = () => {
...
@@ -14,15 +25,15 @@ const Navbar = () => {
<
img
src
=
{
logo
}
/
>
<
img
src
=
{
logo
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
navbar-links_container
"
>
<
div
className
=
"
navbar-links_container
"
>
<
p
><
a
href
=
"
/
"
>
Home
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
/
'
)}
to
=
"
/
"
>
Home
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Video
summarizer
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Video
summarizer
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Digital
human
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Digital
human
<
/Link
></
p
>
<
p
><
a
href
=
"
/about-us
"
>
About
us
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
/about-us
'
)}
to
=
"
/about-us
"
>
About
us
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Contact
us
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Contact
us
<
/Link
></
p
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
navbar-sign
"
>
<
div
className
=
"
navbar-sign
"
>
<
p
>
Sign
in
<
/p
>
<
p
>
<
Link
style
=
{
isActive
(
history
,
'
/login
'
)}
to
=
"
/login
"
>
Sign
in
<
/Link>
</
p
>
<
button
type
=
"
button
"
>
Sign
up
<
/button
>
<
button
type
=
"
button
"
>
Sign
up
<
/button
>
<
/div
>
<
/div
>
<
div
className
=
"
navbar-menu
"
>
<
div
className
=
"
navbar-menu
"
>
...
@@ -32,11 +43,11 @@ const Navbar = () => {
...
@@ -32,11 +43,11 @@ const Navbar = () => {
{
toggleMenu
&&
(
{
toggleMenu
&&
(
<
div
className
=
"
navbar-menu_container scale-up-center
"
>
<
div
className
=
"
navbar-menu_container scale-up-center
"
>
<
div
className
=
"
navbar-menu_container-links
"
>
<
div
className
=
"
navbar-menu_container-links
"
>
<
p
><
a
href
=
"
/
"
>
Home
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
/
'
)}
to
=
"
/
"
>
Home
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Video
summarizer
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Video
summarizer
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Digital
human
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Digital
human
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
About
us
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
/about-us
'
)}
to
=
"
/about-us
"
>
About
us
<
/Link
></
p
>
<
p
><
a
href
=
"
#
"
>
Contact
us
<
/a
></
p
>
<
p
><
Link
style
=
{
isActive
(
history
,
'
#
'
)}
to
=
"
#
"
>
Contact
us
<
/Link
></
p
>
<
/div
>
<
/div
>
<
div
className
=
"
navbar-menu_container-links-sign
"
>
<
div
className
=
"
navbar-menu_container-links-sign
"
>
<
p
>
Sign
in
<
/p
>
<
p
>
Sign
in
<
/p
>
...
...
frontend/src/index.css
View file @
6a5cff62
@import
url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap')
;
@import
url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap')
;
@import
url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap')
;
@import
url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap')
;
:root
{
:root
{
--font-family
:
'Manrope'
,
sans-serif
;
/*--font-family: 'Manrope', sans-serif;*/
--font-family
:
'Open Sans'
,
sans-serif
;
/*--font-family: 'Space Mono', monospace;*/
--gradient-text
:
linear-gradient
(
89.97deg
,
#AE67FA
1.84%
,
#F49867
102.67%
);
--gradient-text
:
linear-gradient
(
89.97deg
,
#AE67FA
1.84%
,
#F49867
102.67%
);
--gradient-bar
:
linear-gradient
(
103.22deg
,
#AE67FA
-13.86%
,
#F49867
99.55%
);
--gradient-bar
:
linear-gradient
(
103.22deg
,
#AE67FA
-13.86%
,
#F49867
99.55%
);
...
...
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