아이콘이 포함된 각도 확장 및 축소 가능 사이드바에 대한 단계별 가이드

아이콘을 사용하여 각도 확장 및 축소 가능 사이드바 구축

Angular에서 확장 및 축소 가능한 사이드바를 만들면 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 이 튜토리얼에서는 아이콘과 부드러운 전환 기능을 갖춘 사이드바를 만드는 방법에 대한 단계별 가이드를 제공합니다. 구성 요소 구조 설정부터 사이드바 전환을 위한 스타일 및 논리 적용까지 모든 것을 다룰 것입니다.

---

접이식 사이드바를 사용하는 이유는 무엇입니까?

접이식 사이드바는 다음을 통해 애플리케이션의 유용성을 향상시킵니다.

• 화면 공간을 절약합니다.
• 손쉬운 탐색을 제공합니다.
• 인터페이스를 깔끔하고 체계적으로 유지합니다.

사이드바 구축을 위한 단계별 가이드

1. Angular 프로젝트 설정

먼저 Angular CLI가 설치되어 있는지 확인하세요. 그렇지 않은 경우 다음을 실행하세요.

npm install -g @angular/cli

새 Angular 프로젝트 만들기:

ng new angular-sidebar
cd angular-sidebar

필요한 구성요소 생성:

ng generate component sidebar

---

2. 사이드바 구조 정의

app.comComponent.html

이것은 애플리케이션의 기본 컨테이너 역할을 합니다. 사이드바와 상태 전환 버튼을 추가하세요.

<div>



<h4>
  
  
  <strong>app.component.ts</strong>
</h4>

<p>Add the logic to manage the sidebar's state:<br>
</p>

<pre class="brush:php;toolbar:false">import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  isSidebarCollapsed = false;

  onSidebarToggle() {
    this.isSidebarCollapsed = !this.isSidebarCollapsed;
  }
}

---

3. 사이드바 구성요소 구현

sidebar.comComponent.html

중첩된 항목이 있는 메뉴를 포함하여 사이드바의 HTML 구조를 정의합니다.

<div>



<h4>
  
  
  <strong>sidebar.component.ts</strong>
</h4>

<p>Handle the toggle logic for menu items and sidebar:<br>
</p>

<pre class="brush:php;toolbar:false">import { Component, EventEmitter, Input, Output } from '@angular/core';

interface MenuItem {
  icon: string;
  label: string;
  children?: MenuItem[];
  isOpen?: boolean;
}

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent {
  @Input() isSidebarCollapsed = false;
  @Output() sidebarToggle = new EventEmitter<void>();

  menuItems: MenuItem[] = [
    {
      icon: 'fas fa-home',
      label: 'Dashboard',
      isOpen: false,
      children: [
        { icon: 'fas fa-chart-pie', label: 'Analytics' },
        { icon: 'fas fa-tasks', label: 'Projects' },
      ]
    },
    {
      icon: 'fas fa-cog',
      label: 'Settings',
      isOpen: false,
      children: [
        { icon: 'fas fa-user', label: 'Profile' },
        { icon: 'fas fa-lock', label: 'Security' },
      ]
    },
    {
      icon: 'fas fa-envelope',
      label: 'Messages'
    }
  ];

  toggleSidebar() {
    this.sidebarToggle.emit();
  }

  toggleMenuItem(item: MenuItem) {
    // Only toggle if sidebar is not collapsed and item has children
    if (!this.isSidebarCollapsed && item.children) {
      item.isOpen = !item.isOpen;
    }
  }
}
</void>

---

4. 사이드바 스타일 지정

app.comComponent.scss

레이아웃 및 전환을 위한 전역 스타일 추가:

.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.content {
  flex-grow: 1;
  margin-left: 250px;
  transition: all 0.3s ease-in-out;
  background-color: #f4f6f7;
  overflow-y: auto;

  &-inner {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  &-expanded {
    margin-left: 50px;
  }
}

.sidebar-toggle-btn {
  position: absolute;
  top: 1rem;
  left: 200px; // Default position when sidebar is expanded
  background-color: #2c3e50;
  border: none;
  color: #fff;
  padding: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    background-color: #34495e;
  }

  &.sidebar-collapsed {
    left: 15px; // Position when sidebar is collapsed
  }
}

sidebar.comComponent.scss

사이드바 및 메뉴 스타일 정의:

.sidebar {
  background-color: #2c3e50;
  color: #ecf0f1;
  height: 100vh;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  overflow-x: hidden;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  position: relative;
}

.sidebar-logo {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.sidebar-menu {
  padding: 1rem 0;

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
}

.sidebar-menu-item {
  position: relative;
}

.sidebar-item {
  display: flex;
  align-items: center;
  color: #ecf0f1;
  text-decoration: none;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  cursor: pointer;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.menu-item-active {
    background-color: rgba(255, 255, 255, 0.2);
  }

  i {
    margin-right: 0.75rem;

    &.sidebar-item-arrow {
      margin-left: auto;
      font-size: 0.8rem;
      transition: transform 0.3s ease;

      &.rotated {
        transform: rotate(180deg);
      }
    }
  }

  &-text {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  &.has-children {
    position: relative;
  }
}

.sidebar-submenu {
  background-color: rgba(0, 0, 0, 0.1);

  .sidebar-item {
    padding-left: 3rem;
    font-size: 0.9rem;
  }
}

.sidebar-collapsed {
  width: 50px;

  .sidebar-menu-item {
    position: static;
  }

  .sidebar-item {
    i {
      margin-right: 0;
    }
    &-text,
    &-arrow {
      opacity: 0;
      width: 0;
      overflow: hidden;
    }
  }

  .sidebar-submenu {
    display: none;
  }
}

---

5. 애플리케이션 실행

개발 서버 시작:

ng serve

사이드바가 어떻게 작동하는지 보려면 http://localhost:4200/으로 이동하세요.

---

자주 묻는 질문

사이드바 아이콘을 어떻게 사용자 정의합니까?

sidebar.comComponent.ts에서 menuItems 배열을 수정하고 적절한 아이콘 클래스를 제공하세요.

메뉴 확장에 애니메이션을 추가할 수 있나요?

예, Angular의 애니메이션 모듈을 사용하여 메뉴를 열고 닫을 때 부드러운 전환을 추가하세요.

사이드바 너비를 어떻게 조정합니까?

펼친 상태와 접힌 상태에 대해 sidebar.comComponent.scss의 너비 속성을 업데이트하세요.

---

이 가이드에서는 Angular에서 기능적인 확장 및 축소 가능한 사이드바를 만드는 데 필요한 모든 필수 단계를 다룹니다. 귀하의 애플리케이션 요구 사항에 맞게 디자인과 기능을 추가로 맞춤화할 수 있습니다.