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%;
  }
}