Showing
2 changed files
with
39 additions
and
3 deletions
... | @@ -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 />, | ... | ... |
-
Please register or login to post a comment