TodoList-Sidebar

Side bar

🙋🏻 앞에서 우리는 하나의 userInfo라는 화면을 만들어 줬습니다.
이제 페이지를 바꿔서 움직일 수 있는 사이드 바 작업을 해보도록 할게요
하지만 처음에 말한 것 처럼 페이지를 이동하는 개념은 아니고
div전체가 사라졌다가 나타났다가 하는등의 기능입니다.

index.html sidebar추가하기

페이지를 여러개 만들어서 관리하는 개념으로 가져가지 않기 때문에
하나의 index 페이지에서 코드만 추가하도록 하겠습니다.

<aside class="menu-aside hidden-menu">
            <button class="menu-button">▶︎</button>
            <header class="aside-header">
                <h1 class="header-title"><i class="fa-regular fa-calendar-check"></i>TODOLIST</h1> 
            </header>
            <nav class="menu-nav">
                <ul class="menu-list">
                    <a href="javascript:void(0)" class="menu-items">
                        <li><i class="fa-regular fa-user"></i>User Information</li>
                    </a>
                    <a href="javascript:void(0)" class="menu-items">
                        <li><i class="fa-regular fa-calendar"></i>To Do List</li>
                    </a>
                </ul>
            </nav>
        </aside>

해당 코드가 우리가 만들었던 main태그 위로 올라가주면 됩니다.
이 사이드바 같은경우 버튼을 누르게 되면 안으로 들어갔다가 다시 누르면
밖으로 나오는 형식으로 가져갈 것입니다.

바로 이어서 css 를 보도록 할게요
그리 어려운 부분이 없습니다.

.menu-aside {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;

    width: 300px;
    height: 100%;
    box-shadow: 1px 0px 5px 1px black;
    background-color: #454545;
    transition: left 1s ease;
}

.hidden-menu {
    left: -300px;
}

.aside-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 5px 20px 10px;
    border-bottom: 1px solid #dbdbdb;
    background-color: #121212;
}

.header-title, .aside-header i[class*="fa"] {
    color: #fff;
}

.menu-button {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: -13px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    border: none;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0;
    width: 13px;
    height: 60px;

    background-color: #454545;
    color: #f0e5d3;
}

.menu-button:hover, .menu-button:active {
    background-color: #454545;
    text-shadow: 0px 0px 5px #f0e5d3;
}

.fa-calendar-check {
    padding: 0px 15px;
    font-size: 18px;
}

.header-title {
    font-size: 18px;
    cursor: default;
}

.menu-nav {
    padding: 20px 0px 0px;
}

.menu-items li{
    display: flex;
    align-items: center;

    border-bottom: 1px solid #dbdbdb;
    padding: 0px 20px;
    height: 40px;

    background-color: #303030;
    color: #fff;
    font-size: 16px;
}

.menu-items li:hover {
    background-color: #121212;
}

.menu-items li .fa-regular {
    padding: 0px 10px;
    color: #fff;
    font-size: 16px;
}

이제 Javascript를 이용한 기능을 만들어볼 생각입니다.
기능이라고 하기엔 좀 그렇지만 사이드바 같은경우 페이지를 히든을 주고
버튼도 방향을 바꿔주는등의 기능이있습니다

class AsideEvent {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null){
            this.#instance = new AsideEvent();
        }
        return this.#instance;
    }


// button이 안으로 들어갈 때와 나올때의 구별
    addEventShowMenuButton() {
        const menuButton = document.querySelector('.menu-button');
        menuButton.onclick = () => {
            const menuAside = document.querySelector('.menu-aside');
            if(menuAside.classList.contains('hidden-menu')){
                menuAside.classList.remove('hidden-menu');  
                menuButton.textContent = '◀︎';     
            }else {
                menuAside.classList.add('hidden-menu');
                menuButton.textContent = '▶︎';  
            }        
        }
    }

    addEventMainChange() {
        const menuItems = document.querySelectorAll('.menu-items');
        const menuButton = document.querySelector('.menu-button');
        menuItems.forEach((item, index) => {
            item.onclick = () => {
                const mainContainers = document.querySelectorAll('.main-container');
                const menuAside = document.querySelector('.menu-aside');
                mainContainers.forEach(container => {
                    container.classList.add('main-hidden');
                });
                mainContainers[index].classList.remove('main-hidden');
                menuAside.classList.add('hidden-menu');
                menuButton.textContent = '▶︎';  
            }
        });
   }
}

---

마치며..

🐳 사이드바 같은경우에 앞의 userInfo 에 비하면 정말 간단한 구현입니다. 그리고 현재 자바스크립트 들이 쓰여지고 있지는 않습니다.
APP.js라는 파일을 따로 두어 그쪽에서 윈도우가 로드 될때 실행을 하기위해
기능들을 함수로 정의만 하고 실행은 App.js 에서 실행할 예정입니다.