feat: 사이드바 레이아웃 추가, 사이드바 컨텐츠 수정
This commit is contained in:
parent
b9eb4b00c1
commit
f7d712a722
@ -3,6 +3,7 @@
|
|||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.answerHeader {
|
.answerHeader {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import styles from './MaxWidthLayout.module.css';
|
import styles from './MaxWidthLayout.module.css';
|
||||||
|
|
||||||
export default function MaxWidthLayout({ children }) {
|
export default function MaxWidthLayout({ children, hasSideBar = false }) {
|
||||||
return <div className={styles.area}>{children}</div>;
|
return <div className={`${styles.area} ${hasSideBar ? styles.hasSideBar : ''}`}>{children}</div>;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,21 @@
|
|||||||
.area {
|
.area {
|
||||||
|
width: 100%;
|
||||||
max-width: 1320px;
|
max-width: 1320px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasSideBar {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
& > aside {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
import styles from './SideBar.module.css';
|
|
||||||
|
|
||||||
export default function SideBar({ children }) {
|
|
||||||
return <aside className={styles.sidebar}>{children}</aside>;
|
|
||||||
}
|
|
@ -1,15 +0,0 @@
|
|||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
width: 320px;
|
|
||||||
|
|
||||||
& > ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
@ -7,6 +7,7 @@
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub {
|
.sub {
|
||||||
|
@ -3,7 +3,7 @@ import styles from './SideLink.module.css';
|
|||||||
|
|
||||||
export default function SideLink({ children, path }) {
|
export default function SideLink({ children, path }) {
|
||||||
return (
|
return (
|
||||||
<li>
|
<li className={styles.list}>
|
||||||
<Link
|
<Link
|
||||||
to={path}
|
to={path}
|
||||||
className={styles.link}
|
className={styles.link}
|
||||||
|
@ -1,3 +1,8 @@
|
|||||||
|
.list {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -4,4 +4,5 @@
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
export { default as SideBar } from './SideBar';
|
|
||||||
export { default as SideItem } from './SideItem';
|
export { default as SideItem } from './SideItem';
|
||||||
export { default as SideLink } from './SideLink';
|
export { default as SideLink } from './SideLink';
|
||||||
export { default as SideTitle } from './SideTitle';
|
export { default as SideTitle } from './SideTitle';
|
||||||
|
Loading…
Reference in New Issue
Block a user