Woojin Lee

Add right sidebar

...@@ -13,7 +13,7 @@ const NavBar = () => { ...@@ -13,7 +13,7 @@ const NavBar = () => {
13 ); 13 );
14 } 14 }
15 15
16 -const SideBar = () => { 16 +const LeftSideBar = () => {
17 return ( 17 return (
18 <nav class="col-md-2 d-none d-md-block bg-light sidebar"> 18 <nav class="col-md-2 d-none d-md-block bg-light sidebar">
19 <div class="sidebar-sticky"> 19 <div class="sidebar-sticky">
...@@ -70,12 +70,49 @@ const SideBar = () => { ...@@ -70,12 +70,49 @@ const SideBar = () => {
70 ); 70 );
71 } 71 }
72 72
73 +const RightSideBar = () => {
74 + return (
75 + <nav class="col-md-2 d-none d-md-block bg-light sidebar">
76 + <div class="sidebar-sticky">
77 + <ul class="nav flex-column">
78 + <li class="nav-item">
79 + <a class="nav-link active" href="#">
80 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
81 + Dashboard <span class="sr-only">(current)</span>
82 + </a>
83 + </li>
84 + <li class="nav-item">
85 + <a class="nav-link" href="#">
86 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
87 + 파일 업로드
88 + </a>
89 + </li>
90 + <li class="nav-item">
91 + <a class="nav-link" href="#">
92 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
93 + 폴더 업로드
94 + </a>
95 + </li>
96 + <li class="nav-item">
97 + <a class="nav-link" href="#">
98 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
99 + 폴더
100 + </a>
101 + </li>
102 + </ul>
103 + </div>
104 + </nav>
105 +
106 + );
107 +}
108 +
73 function App() { 109 function App() {
74 return ( 110 return (
75 <div className="App"> 111 <div className="App">
76 <NavBar /> 112 <NavBar />
77 <div class="row"> 113 <div class="row">
78 - <SideBar /> 114 + <LeftSideBar />
115 + <RightSideBar />
79 </div> 116 </div>
80 </div> 117 </div>
81 ); 118 );
......
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
2 import ReactDOM from 'react-dom'; 2 import ReactDOM from 'react-dom';
3 import './index.css'; 3 import './index.css';
4 import App from './App'; 4 import App from './App';
5 -import * as serviceWorker from './serviceWorker';
6 5
7 ReactDOM.render( 6 ReactDOM.render(
8 <App />, 7 <App />,
......