Skip to content

Commit

Permalink
[Feat] Modify NavBar
Browse files Browse the repository at this point in the history
- NavBar가 스크롤을 내려도 상단에 고정되도록 수정하였습니다.
- NavBar가 가장 앞에 위치하도록 z-index를 수정하였습니다.
- NavBar의 글자 부분을 클릭하면 메인 페이지로 리다이렉트 되도록 구현하였습니다.
issue #47
  • Loading branch information
seungriyou committed Jun 3, 2022
1 parent 54415c6 commit 67753cc
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 17 deletions.
9 changes: 3 additions & 6 deletions serving/frontend/src/App.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
/* eslint-disable */
// import "antd/dist/antd.css";
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Message, NavBar } from './components';
import { UploadVideo, SelectPerson, SelectVideo, SelectVideoTmp } from './pages';
import { NavBar } from './components';
import { UploadVideo, SelectPerson, SelectVideo } from './pages';


function App() {
return (
<div className="App">
{/* NavBar, Message는 어디에다가 둬야 하지? */}
<div className="App" style={{paddingTop: "50px"}}>
<BrowserRouter>
<NavBar />
{/*<Message />*/}
<Routes>
<Route path="/" element={<UploadVideo />} />
<Route path="/select-person" element={<SelectPerson />} />
Expand Down
30 changes: 19 additions & 11 deletions serving/frontend/src/components/NavBar.js
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;
`;

0 comments on commit 67753cc

Please sign in to comment.