Merge pull request #22 from TeamBNBN/fe/sidelayout
[Front-End] feat: 사이드바 컴포넌트 추가
This commit is contained in:
commit
2970f19f21
@ -12,6 +12,9 @@
|
||||
|
||||
& > aside {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
|
10
frontend/src/components/SideBar/SideBar.jsx
Normal file
10
frontend/src/components/SideBar/SideBar.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import styles from './SideBar.module.css';
|
||||
|
||||
export default function SideBar({ title, children }) {
|
||||
return (
|
||||
<div className={styles.group}>
|
||||
<h3 className={styles.groupTitle}>{title}</h3>
|
||||
<ul className={styles.groupList}>{children}</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
30
frontend/src/components/SideBar/SideBar.module.css
Normal file
30
frontend/src/components/SideBar/SideBar.module.css
Normal file
@ -0,0 +1,30 @@
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.groupTitle {
|
||||
color: var(--text-color);
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.groupList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
@ -7,7 +7,6 @@
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sub {
|
||||
|
@ -1,3 +1,4 @@
|
||||
export { default as SideBar } from './SideBar';
|
||||
export { default as SideItem } from './SideItem';
|
||||
export { default as SideLink } from './SideLink';
|
||||
export { default as SideTitle } from './SideTitle';
|
||||
|
Loading…
Reference in New Issue
Block a user