diff --git a/index.html b/index.html index af72a36..3a72748 100644 --- a/index.html +++ b/index.html @@ -53,8 +53,8 @@ id="sideBar__hamburger" > diff --git a/src/asset/sideBar-item-hide.svg b/src/asset/sideBar-item-hide.svg new file mode 100644 index 0000000..3dd8127 --- /dev/null +++ b/src/asset/sideBar-item-hide.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/DocumentManager.js b/src/components/DocumentManager.js index 1e2f665..2bd7619 100644 --- a/src/components/DocumentManager.js +++ b/src/components/DocumentManager.js @@ -6,6 +6,7 @@ import { } from "../api/api.js"; import { navigate, routes } from "../router/router.js"; import { updateBreadcrumb } from "./breadcrumb.js"; +import { sidebarButton } from "./Sidebar.js"; // 문서 목록을 가져와 동적 링크 생성 export const createDocumentsList = async () => { @@ -53,15 +54,7 @@ export const createDocumentItem = async (doc, parentElement = null) => { newDocumentItem.classList.add("sidebar__menuWrapper--document"); newDocumentItem.id = `document-container-${doc.id}`; - newDocumentItem.innerHTML = ` -
- - ${doc.title} - - -
- - `; + newDocumentItem.innerHTML = sidebarButton(doc.id, doc.title); // 부모 요소가 있으면 그 안에, 없으면 document-list에 추가 if (parentElement) { @@ -83,14 +76,14 @@ export const createDocumentItem = async (doc, parentElement = null) => { }); } - // hover 이벤트 추가 - newDocumentItem.addEventListener("mouseenter", () => { - newDocumentItem.classList.add("hover__document-item"); - }); + // // hover 이벤트 추가 + // newDocumentItem.addEventListener("mouseenter", () => { + // newDocumentItem.classList.add("hover__document-item"); + // }); - newDocumentItem.addEventListener("mouseleave", () => { - newDocumentItem.classList.remove("hover__document-item"); - }); + // newDocumentItem.addEventListener("mouseleave", () => { + // newDocumentItem.classList.remove("hover__document-item"); + // }); // 문서 클릭 이벤트 newDocumentItem.addEventListener("click", async (event) => { @@ -102,7 +95,7 @@ export const createDocumentItem = async (doc, parentElement = null) => { removeAllActiveClasses(); // 현재 클릭된 항목에 active 클래스 추가 - newDocumentItem.classList.add("acitve__document-item"); + // newDocumentItem.classList.add("acitve__document-item"); navigate(path); diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 0cc8fd6..4ea4fe9 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,6 +1,32 @@ const hamburger = document.getElementById("sideBar__hamburger"); const sideBar = document.getElementById("sidebar"); +export const sidebarButton = (id, title) => { + return ` + + `; +}; + // 사이드바 숨기는 함수 const onclickSideBarHide = () => { const hideButton = document.getElementById("sideBar__hideButton"); diff --git a/src/listeners/CreateNewDocListener.js b/src/listeners/CreateNewDocListener.js index 79c72a8..1ebebb9 100644 --- a/src/listeners/CreateNewDocListener.js +++ b/src/listeners/CreateNewDocListener.js @@ -1,15 +1,21 @@ -import { addRootDoc, addDoc } from "../components/DocumentManager.js" +import { addRootDoc, addDoc } from "../components/DocumentManager.js"; export const setEventListener = (documentList, createDocumentButton) => { // 새 문서 생성 - createDocumentButton.addEventListener("click", () => addRootDoc(documentList)); - + createDocumentButton.addEventListener("click", () => + addRootDoc(documentList) + ); + // 하위 문서 생성 documentList.addEventListener("click", (event) => { - if (event.target.classList.contains("add-subdoc-btn")) { - const parentId = event.target.getAttribute("data-parent-id"); + // 버튼을 직접 클릭했거나, 버튼 내부의 이미지를 클릭했을 경우를 모두 처리 + const addButton = event.target.classList.contains("add-subdoc-btn") + ? event.target + : event.target.closest(".add-subdoc-btn"); + + if (addButton) { + const parentId = addButton.dataset.parentId; addDoc(parentId); } }); - -} \ No newline at end of file +}; diff --git a/styles/reset.css b/styles/reset.css index 4f98235..d6fdd82 100644 --- a/styles/reset.css +++ b/styles/reset.css @@ -177,4 +177,11 @@ input:focus { outline: none; box-shadow: none; border: none; -} \ No newline at end of file +} +button { + margin: 0; + padding: 0; + border: none; + background-color: inherit; + cursor: pointer; +} diff --git a/styles/sideBar.css b/styles/sideBar.css index fb66714..4fcb6e8 100644 --- a/styles/sideBar.css +++ b/styles/sideBar.css @@ -1,4 +1,4 @@ -@import url("/styles/variables.css"); +@import url("./variables.css"); .screen__sidebar { box-sizing: border-box; @@ -10,6 +10,7 @@ flex-direction: column; gap: 1.2rem; } + .screen_miniSidebar { position: absolute; left: 12px; @@ -46,7 +47,6 @@ .sub-document-list { padding-left: 1.42rem; list-style-type: none; - display: none; } .sidebar__menuWrapper--documet { height: 30px; @@ -61,7 +61,6 @@ .sidebar__menuWrapper--document { border-radius: 4px; display: block; - padding: 5px 8px; position: relative; } .add-subdoc-btn { @@ -112,7 +111,7 @@ } /* 사이드바 아이콘 */ -.sideBar__button { +.sideBar__hideButton { box-sizing: border-box; width: 20px; height: 20px; @@ -122,25 +121,58 @@ background: none; cursor: pointer; } -.sideBar__button:hover { + +.sideBar__hideButton:hover { background-color: var(--bg100); border-radius: 4px; } + .sidebar__icon { box-sizing: border-box; width: fit-content; height: fit-content; } + .sidebar__iconWrap { display: flex; align-items: center; gap: 8px; } + /* 사이드바 숨기기 css */ .sidebar__hide { min-width: 0px; width: 0px; padding: 0px; transform: translateX(-250px); - display: none; +} + +/* 사이드바 Item 스타일 */ +.sidebar_item { + position: relative; + width: 100%; + display: flex; + padding: 5px 8px; + align-items: center; + justify-content: space-between; +} + +.sidebar_item .sidebar_item_left_btn { + flex: 1; + + display: flex; + align-items: center; +} + +.sidebar_item:hover { + background-color: var(--bg100); + color: var(--black200); + transition: background-color 0.2s ease; +} + +.sidebar_item-btn { + display: inline-flex; +} + +.sidebar_item .add-subdoc-btn { }