본문 바로가기
Electron

[기초-4] 일렉트론 사이드 메뉴 만들기

by 으노으뇨 2023. 2. 27.
728x90
반응형
SMALL

일렉트론에 사이드메뉴와 같은것을 적용해 보겠습니다.

디자인은 저번 화면개발때와 마찬가지로 이미 멋지게 만들어진 디자인을 빌려서 사용하겠습니다.

https://codepen.io/search/pens?q=side+menu 

 

CodePen Search

 

codepen.io

사이드 메뉴라고 검색하니 바로 나옵니다. 

그냥 맨첫번째로 있는 사이드메뉴를 적용해보겠습니다.

css는 그대로 복사한다음 css폴더에 새로 하나 만든다음 main.html에 적용을 해줍니다.

<link rel="stylesheet" href="css/menu.css" />

추가해준 모습

이제 html에 사이드메뉴부분을 가져오겠습니다.

네모친 부분을 우선 가져옵니다. 위에 있는 링크태그는 앞서 만들었던것입니다.

  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

그리고 그 아래 <nav>태그 부터 쭉~~~다 가져와서 nav 태그가 끝나는 지점까지 쭉복사를 해서 가져온다음

실행해보겠습니다.

전부가져왔을때 모습

지금 뚫고 나오고 있으니 해당 부분 css만 다듬으면 되겠습니다.

타이틀바를 무슨일이 있더라도 맨위에 오게끔설정하면 될것같습니다. 따라서 포지션 스티키랑 제트인덱스를 줘서 완전 고정시켜보겠습니다.

.title-bar{position: fixed;z-index: 999;width :100%;background: #000000;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color: #ffffff;font-size: 15px;}

제 자리 찾아간 모습

이것으로 일렉트론 프로젝트에 사이드메뉴를 적용해보았습니다.

아래는 제 html 소스입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/menu.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="title-bar">
      <div class="title prevent-select draggable">
        <img src="source\img\logo.png" width="32" height="auto" alt="scroll magic">
        <a>나의 커스텀 타이틀바</a>
      </div>
      <div class="control prevent-select">
        <button class="title-bar-button min">
          <i class="bi bi-chevron-down min"></i>
        </button>
        <button class="title-bar-button max">
          <i class="bi bi-arrows-fullscreen max"></i>
        </button>
        <button class="title-bar-button close">
          <i class="bi bi-x-lg close"></i>
        </button>
      </div>
    </div>
    <nav class="main-menu">
      <div class="settings"></div>
      <div class="scrollbar" id="style-1">
        <ul>
          <li>
            <a href="#">
              <i class="fa fa-home fa-lg"></i>
              <span class="nav-text">Home</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-user fa-lg"></i>
              <span class="nav-text">Login</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-envelope-o fa-lg"></i>
              <span class="nav-text">Contact</span>
            </a>
          </li>
          <li class="darkerlishadow">
            <a href="#">
              <i class="fa fa-desktop fa-lg"></i>
              <span class="nav-text">Technology</span>
            </a>
          </li>
          <li class="darkerli">
            <a href="#">
              <i class="fa fa-plane fa-lg"></i>
              <span class="nav-text">Travel</span>
            </a>
          </li>
          <li class="darkerli">
            <a href="#">
              <i class="fa fa-microphone fa-lg"></i>
              <span class="nav-text">Film & Music</span>
            </a>
          </li>
          <li class="darkerli">
            <a href="#">
              <i class="fa fa-flask fa-lg"></i>
              <span class="nav-text">Web Tools</span>
            </a>
          </li>
          <li class="darkerli">
            <a href="#">
              <i class="fa fa-picture-o fa-lg"></i>
              <span class="nav-text">Art & Design</span>
            </a>
          </li>
          <li class="darkerlishadowdown">
            <a href="#">
              <i class="fa fa-align-left fa-lg"></i>
              <span class="nav-text">Magazines
              </span>
            </a>
          </li>
        </ul>
        <ul class="logout">
          <li>
            <a href="">
              <i class="fa fa-lightbulb-o fa-lg"></i>
              <span class="nav-text">
                BLOG
              </span>
            </a>
          </li>
        </ul>
    </nav>
  </div>
</body>
<script src="titlebar.js"></script>
</html>

이하는 이 긴 html을 js에서 처리하도록 한 것입니다.

더보기

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/menu.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="title-bar">
      <div class="title prevent-select draggable">
        <img src="source\img\logo.png" width="32" height="auto" alt="scroll magic">
        <a>나의 커스텀 타이틀바</a>
      </div>
      <div class="control prevent-select">
        <button class="title-bar-button min">
          <i class="bi bi-chevron-down min"></i>
        </button>
        <button class="title-bar-button max">
          <i class="bi bi-arrows-fullscreen max"></i>
        </button>
        <button class="title-bar-button close">
          <i class="bi bi-x-lg close"></i>
        </button>
      </div>
    </div>
    <nav class="main-menu">
      <div class="settings"></div>
      <div class="scrollbar" id="style-1">
        <ul id = 'commonMenu'></ul>
      </div>
    </nav>
  </div>
</body>
<script src="titlebar.js"></script>
<script src="script/menu/setMenu.js"></script>
</html>

js

const commonMenuList = [
  { classNm:'fa fa-home fa-lg'
    , listNm :'Home'}
  , { classNm:'fa fa-user fa-lg'
    , listNm : 'Login'}
  , { classNm:'fa fa-envelope-o fa-lg'
    , listNm : 'Contact'}
];
const userMenuList = [
  { classNm:'fa fa-desktop fa-lg'
  , listNm :'Technology'}
  , { classNm:'fa fa-plane fa-lg'
  , listNm : 'Travel'}
  , { classNm:'fa fa-microphone fa-lg'
  , listNm : 'Film & Music'}
  , { classNm:'fa fa-flask fa-lg'
  , listNm :'Web Tools'}
  , { classNm:'fa fa-picture-o fa-lg'
  , listNm : 'Art & Design'}
  , { classNm:'fa fa-align-left fa-lg'
  , listNm : 'Magazines'}
];
document.addEventListener('DOMContentLoaded',(ev)=>{
  drawCommonMenuList();
  drawUserMenuList();
  drawLstMenuList();
})
function drawCommonMenuList()
{
  let struct = ``;
  for(const obj of commonMenuList)
  {
    struct +=`
    <li>
      <a href="#">
        <i class="${obj.classNm}"></i>
        <span class="nav-text">${obj.listNm}</span>
      </a>
    </li>`
  }
  commonMenuList.forEach((el)=>{
    
  });
  document.querySelector('#commonMenu').innerHTML = struct;
}
function drawUserMenuList()
{
  let struct = ``;
  for(let i = 0 ; i<userMenuList.length;i++)
  {
    let className = 'darkerli';
    if(i===0) className = 'darkerlishadow';
    else if(i === (userMenuList.length-1)) className = 'darkerlishadowdown';
    struct +=`
      <li class=${className}>
        <a href="#">
          <i class="${userMenuList[i].classNm}"></i>
          <span class="nav-text">${userMenuList[i].listNm}</span>
        </a>
      </li>`
  }
  document.querySelector('#commonMenu').innerHTML += struct;
}
function drawLstMenuList()
{
  document.querySelector('#style-1').innerHTML +=`<ul class="logout">
  <li>
    <a href="">
      <i class="fa fa-lightbulb-o fa-lg"></i>
      <span class="nav-text">
        BLOG
      </span>
    </a>
  </li>
</ul>`;
}

나중에 유저별로 db에서 메뉴를 설정한 값을 가져온다면 그려야하기에 하드코딩이 아닌 우선 obj 객체를 하나 만들어서 사용중입니다. 이후 db에서 유저별 메뉴를 다르게 보여야하기에 이렇게 했습니다.

 

728x90
반응형
LIST
저작자표시 비영리

'Electron' 카테고리의 다른 글

[오류]일렉트론 콘솔에 오류, 경고 없애기  (0) 2023.03.01
[기초-3] 일렉트론 타이틀바 수정/변경  (0) 2023.02.26
[기초-2] 일렉트론 화면 개발하기  (0) 2023.02.24
[기초-1] 일렉트론 메뉴 추가하기 / 다루기  (1) 2023.02.24
[프로젝트 생성-쉬운버전] 리액트 프로젝트에 일렉트론추가하기  (0) 2023.02.24

관련글

댓글

티스토리툴바