Quartz에 NavBar를 추가하는 방법
Deprecated
이 항목은 현재 블로그에 적용되지 않습니다.
NavBar Components 생성
quartz/components/NavBar.tsx 생성
const NavBar = () => {
return (
<nav class="navBar">
<div class="container">
<div class="title">
<a href="/">Gurumii</a>
</div>
<div class="spacer"></div>
<div id="navbar-links" class="links">
<button class="close-menu">✖</button>
<div class="dropdown">
<a href="/Quartz" class="link">Quartz</a>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">Blogs</a>
<div class="dropdown-content">
<a href="/Blogs/General">General</a>
<a href="/Blogs/Business">Business</a>
<a href="/Blogs/Social">Social</a>
<a href="/Blogs/Coding">Coding</a>
<a href="/Blogs/Notes">Notes</a>
</div>
</div>
</div>
<button id="toggle-menu" class="button">☰</button>
</div>
</nav>
);
}
export const navbarScript = `
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.getElementById('toggle-menu');
const linksContainer = document.getElementById('navbar-links');
const closeButton = document.querySelector('.close-menu');
menuButton.addEventListener('click', function() {
linksContainer.classList.add('active'); // 메뉴 활성화
});
closeButton.addEventListener('click', function() {
linksContainer.classList.remove('active'); // 메뉴 비활성화
});
});
`
export default NavBar;renderPage.tsx 수정
quartz/components/renderPage.tsx에 NavBar.tsx를 추가합니다.
필요한 파일 import
import NavBar, { navbarScript } from "./NavBar" // custom component원하는 위치에 NavBar 요소 추가
<div id="quartz-root" class="page">
<NavBar />
<Body {...componentData}>토글 메뉴 관련 스크립트
</body>
{pageResources.js
.filter((resource) => resource.loadTime === "afterDOMReady")
.map((res) => JSResourceToScriptElement(res))}
<script dangerouslySetInnerHTML={{ __html: navbarScript }} />custom.scss 추가
quartz/styles/custom.scss에 NavBar를 위한 내용을 추가합니다.
/* Navbar Custom Styles */
// 기본 라이트모드 색상
:root {
--nav-background: var(--light); // 밝은 배경색
--nav-text-color: var(--darkgray); // 어두운 텍스트 색상
--dropdown-bg: var(--lightgray); // 드롭다운 배경색
--dropdown-hover-bg: darken(var(--lightgray), 5%); // 드롭다운 호버 배경색
}
// 다크모드 색상
:root[saved-theme="dark"] {
--dropdown-bg: var(--darkgray); // 드롭다운 어두운 배경색
--dropdown-hover-bg: lighten(var(--darkgray), 5%); // 드롭다운 호버 밝게
}
.navBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px;
background-color: var(--nav-background);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 750px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-weight: bold;
flex: 1;
}
.links {
display: flex;
flex-direction: row;
align-items: center;
}
.link, .dropbtn {
color: var(--nav-text-color);
text-decoration: none;
padding: 4px 8px;
margin: 0 4px;
display: inline-block;
font-size: 16px;
}
.button {
background: none;
border: none;
font-size: 24px;
color: #333;
}
/* Dropdown styles */
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--dropdown-bg);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 160px;
z-index: 1;
width: auto; /* Adjust width as necessary */
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: black;
}
.dropdown-content a:hover {
background-color: var(--dropdown-hover-bg);
}
/* Desktop styles */
@media (min-width: 601px) {
.button, .close-menu {
display: none; /* 데스크탑에서는 햄버거와 X 버튼 숨기기 */
}
.dropdown-content {
position: absolute;
left: 50%; /* 중앙 정렬 */
transform: translateX(-50%); /* 정확한 중앙 */
}
}
/* Mobile styles */
@media (max-width: 600px) {
#navbar-links {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0; /* 전체 너비 사용 */
width: 100%; /* 너비 100%로 조정 */
height: 100vh;
background-color: var(--nav-background);
z-index: 1002;
flex-direction: column;
justify-content: center; /* 가운데 정렬 */
align-items: center; /* 항목들을 가운데 정렬 */
padding-top: 20px; /* 상단 패딩 조정 */
overflow-y: auto;
}
#navbar-links.active {
display: flex;
}
.close-menu {
position: absolute;
top: 20px;
right: 20px; /* 우측 상단에 위치 */
font-size: 24px;
color: #333;
background: none;
border: none;
cursor: pointer;
}
.links, .dropdown-content {
flex-direction: column;
align-items: center; /* 중앙 정렬 */
width: 100%;
}
.link, .dropbtn {
display: block;
text-align: center; /* 텍스트 중앙 정렬 */
padding: 12px 20px;
font-size: 16px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #ccc; /* 구분선 추가 */
}
.dropdown-content {
display: block; /* 하위 메뉴 항상 표시 */
position: static; /* 위치 조정 */
width: 100%;
}
}
