Commit e12a8d6b authored by Kim, Subin's avatar Kim, Subin
Browse files

Menu style 및 collapse 기능 완료

parent 0a19f881
...@@ -11,7 +11,7 @@ import ErrorPage from "./pages/ErrorPage"; ...@@ -11,7 +11,7 @@ import ErrorPage from "./pages/ErrorPage";
function App() { function App() {
return ( return (
<Router basename={process.env.PUBLIC_URL}> <Router basename={process.env.PUBLIC_URL}>
<div id="box" className="container mx-sm-auto"> <div id="box" className="container position-relative vh-100 mx-sm-auto">
<Switch> <Switch>
<Route exact path="/" component={LoginPage} /> <Route exact path="/" component={LoginPage} />
<Route path="/login" component={LoginPage} /> <Route path="/login" component={LoginPage} />
......
import styles from "./menu.module.scss";
const Menu = () => { const Menu = () => {
return ( return (
<></> <>
<button className="btn btn-crimson shadow-none mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="false" aria-label="menu">
<i className="bi bi-list fs-4"></i>
</button>
<div className={`collapse collapse-horizontal position-absolute top-0 start-0 h-100 ${styles.content}`} id="menuContent">
<button type="button" className={`btn-close btn-close-white btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
</div>
</>
) )
} }
......
.content {
background-color: #343a40;
z-index: 1;
& .close {
top: 10px;
right: 10px;
}
}
\ No newline at end of file
import Menu from "../components/Menu/Menu.js";
const HomePage = () => { const HomePage = () => {
return ( return (
<></> <Menu />
) )
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment