NAVBAR

A navigációs sáv (Navbar) egy reszponzív komponens, amely lehetővé teszi a weboldal menüjének kezelését, beleértve a márka logóját, navigációs linkeket és gombokat.

Forráskód

 
                1. változat 
                <nav class="navbar navbar-expand-sm fixed-top">
  <div class="container-fluid">
    <!-- Logó bal szélen -->
    <a class="navbar-brand brand-info d-flex justify-content-center align-content-center align-items-center">
      <i class="brand-icon bi-check2-circle" style="color:#0a53be"></i>
      <div class="brand-info">
        <span class="brand-title">NOVA.GRID</span>
        <span class="brand-subtitle">Feladat nyílvántartó</span>
      </div>
    </a>

    <!-- Középső menüpontok (asztali nézetben látható) -->
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
      <ul class="navbar-nav">
        <!-- Sima menüpont 1 -->
        <li class="nav-item">
          <a class="nav-link" routerLink="/dashboard"><i class="bi bi-house me-2"></i>Kezdőlap</a>
        </li>
        <!-- Dropdown 1 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" routerLinkActive="active">
            <i class="bi bi-lightning-charge me-2"></i>Eszközök
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" routerLink="/dashboard/tasks" routerLinkActive="active"><i class="bi bi-list-task me-2"></i>Feladatok</a></li>
            <li><a class="dropdown-item" routerLink="/dashboard/calendar" routerLinkActive="active"><i class="bi bi-calendar me-2"></i>Naptár</a></li>
            <li><a class="dropdown-item" routerLink="/dashboard/notes" routerLinkActive="active"><i class="bi bi-stickies me-2"></i>Jegyzetek</a></li>
            <hr class="my-1">
            <li><a class="dropdown-item" routerLink="/dashboard/money" routerLinkActive="active"><i class="bi bi-coin me-2"></i>Pénzügyek</a></li>
            <li><a class="dropdown-item" routerLink="/dashboard/health" routerLinkActive="active"><i class="bi bi-heart-pulse me-2"></i>Egészség</a></li>
          </ul>
        </li>
        <!-- Sima menüpont 2 -->
        <li class="nav-item">
          <a class="nav-link" routerLink="/dashboard/about" routerLinkActive="active"><i class="bi bi-info-circle me-2"></i>Információk</a>
        </li>
      </ul>
    </div>

    <!-- Jobb oldali elemek -->
    <div class="d-flex align-items-center">
      <!-- Témaváltás gomb -->
      <button class="btn btn-outline-secondary me-2 d-none" type="button" id="themeToggle">
        <i class="bi bi-moon"></i>
      </button>

      <button class="btn btn-outline-secondary me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNotify" aria-controls="offcanvasNotify">
        <i class="bi bi-bell"></i> <span *ngIf="news.length > 0" class="badge badge-secondary" style="margin-left: 5px">{{news.length}}</span>
      </button>
      <!-- Beállítások gomb -->
      <button class="btn btn-outline-secondary me-2 d-none" type="button">
        <i class="bi bi-gear"></i>
      </button>
      <!-- Profil dropdown -->
      <div class="dropdown me-2 profile-dropdown">
        <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-person"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li class="profile-dropdown-user">
            <div class="d-flex flex-column" style="text-align: left">
              <span class="profile-name">{{ user?.name.toLocaleUpperCase() || '' }}</span>
              <span class="profile-email">{{ user?.email || '' }}</span>
            </div>
          </li>
          <hr class="my-1">
          <li><a class="dropdown-item" routerLink="/dashboard/profile" routerLinkActive="active"><i class="bi bi-person-circle me-2"></i>Profil</a></li>
          <li><a class="dropdown-item" (click)="logout()"><i class="bi bi-box-arrow-left me-2"></i>Kijelentkezés</a></li>
        </ul>
      </div>
      <!-- Toggler gomb mobilos nézethez -->
      <button class="navbar-toggler btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
        <i class="bi bi-list"></i>
      </button>
    </div>
  </div>
</nav>
<div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="sidebarLabel">Menü</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link w-100" routerLink="/dashboard" data-bs-dismiss="offcanvas"><i class="bi bi-house me-2"></i>Kezdőlap</a>
      </li>
      <!-- Dropdown 1 -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle w-100" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#servicesSubmenu" aria-expanded="false">
          <i class="bi bi-lightning-charge me-2"></i>Eszközök
        </a>
        <ul class="collapse list-unstyled" id="servicesSubmenu" style="padding:10px; border-radius: 1em; background: rgba(60,62,64,0.05);">
          <li><a class="nav-link w-100" routerLink="/dashboard/tasks" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-list-task me-2"></i>Feladatok</a></li>
          <li><a class="nav-link w-100" routerLink="/dashboard/calendar" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-calendar me-2"></i>Naptár</a></li>
          <li><a class="nav-link w-100" routerLink="/dashboard/notes" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-stickies me-2"></i>Jegyzetek</a></li>
          <li><a class="nav-link w-100" routerLink="/dashboard/money" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-coin me-2"></i>Pénzügyek</a></li>
          <li><a class="nav-link w-100" routerLink="/dashboard/health" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-heart-pulse me-2"></i>Egészség</a></li>
        </ul>
      </li>

      <!-- Sima menüpont 2 -->
      <li class="nav-item">
        <a class="nav-link w-100" routerLink="/dashboard/about" routerLinkActive="active" data-bs-dismiss="offcanvas"><i class="bi bi-info-circle me-2"></i>Információk</a>
      </li>
    </ul>
  </div>
</div>
                2. változat
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Márka</a>
        <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a aria-current="page" class="nav-link active" href="#">Kezdőlap</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Szolgáltatások</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Árak</a>
                </li>
                <li class="nav-item dropdown">
                    <a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">Továbbiak</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Profil</a></li>
                        <li><a class="dropdown-item" href="#">Beállítások</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Kijelentkezés</a></li>
                    </ul>
                </li>
            </ul>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-primary">Bejelentkezés</button>
                <button class="btn btn-primary">Regisztráció</button>
            </div>
        </div>
    </div>
</nav>