-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- NavBar가 스크롤을 내려도 상단에 고정되도록 수정하였습니다. - NavBar가 가장 앞에 위치하도록 z-index를 수정하였습니다. - NavBar의 글자 부분을 클릭하면 메인 페이지로 리다이렉트 되도록 구현하였습니다. issue #47
- Loading branch information
1 parent
54415c6
commit 67753cc
Showing
2 changed files
with
22 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,30 @@ | ||
import styled from "styled-components"; | ||
import { Link } from 'react-router-dom'; | ||
|
||
const StyledNavBar = styled.nav` | ||
display: flex; | ||
background: #0279C1; | ||
width: 100%; | ||
height: 50px; | ||
color: white; | ||
justify-content: center; | ||
align-items: center; | ||
position: 'fixed'; | ||
`; | ||
|
||
function NavBar() { | ||
|
||
return ( | ||
<StyledNavBar> | ||
<span style={{fontSize: '20px', fontWeight: 'bold'}}>예능 하이라이트 <span style={{backgroundColor: 'white', color: '#0279C1', borderRadius: '2.5px'}}>#눈#사람</span> 에서 생성하세요!</span> | ||
<Link to="/" style={{color: "white", fontSize: '20px', fontWeight: 'bold'}}> | ||
예능 하이라이트 <span style={{padding: "0.5px", backgroundColor: 'white', color: '#0279C1', borderRadius: '2.5px'}}>#눈#사람</span> 에서 생성하세요! | ||
</Link> | ||
</StyledNavBar> | ||
); | ||
} | ||
|
||
export default NavBar; | ||
|
||
const StyledNavBar = styled.nav` | ||
display: flex; | ||
background: #0279C1; | ||
width: 100%; | ||
height: 50px; | ||
justify-content: center; | ||
align-items: center; | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
z-index: 1; | ||
`; |