فالکون از .navbar-expand{-sm|-md|-lg|-xl|-xxl} کلاس های Bootstrap در .navbar-vertical عنصر استفاده کرد تا تصمیم بگیرد که چه زمانی نوار ناوبری عمودی گسترش می یابد یا نه.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

      <!-- Collapsible content-->
    </div>
  </div>
</nav>

از دایرکتوری پروژه خود، اگر از نسخه gulp open استفاده src/js/config.js می‌کنید یا اگر مستقیماً از پوشه عمومی استفاده می‌کنید، به‌طور پیش‌فرض از پوشه عمومی باز کنید و public/assets/js/theme.js مجموعه شی را برای جمع کردن Vertical Navigation به طور پیش‌فرض باز کنید.isNavbarVerticalCollapsed: trueCONFIG

const CONFIG = {
  isNavbarVerticalCollapsed: false,
  ...
};

به طور معمول، پیوندها در نوار ناوبری عمودی ممکن است حاوی نمادها، متون، نشان ها و نمادهای نشانگر باشند. به طور پیش فرض هر عنصر در پیوندهای نوار ناوبری عمودی در مرکز یکدیگر قرار دارند. مثال پیوند والد بالای نوار ناوبری عمودی:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span>
    <span class="nav-link-text">Dashboard </span>
    <span class="badge rounded-pill badge-soft-success ms-2">New</span>
  </div>
</a>

اگر متن‌های طولانی دارید یا می‌خواهید تراز را به‌روزرسانی کنید، می‌توانید با حذف کلاس یا اضافه کردن کلاس‌های کمکی align-items-center Bootstrap سفارشی کنید.align-items-*

مثال پیوند کودک:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    Dashboard
    <span class="badge rounded-pill badge-soft-success ms-2">New</span>
  </div>
</a>

dropdown-indicator کلاس را به عنصر اضافه .nav-link کنید تا نماد پیکان در سمت راست متن پیوند نشان داده شود.

<a class="nav-link dropdown-indicator" href="#">

  <!-- link content-->
</a>

const navbarVerticalToggle = document.querySelector(.navbar-vertical-toggle);
navbarVerticalToggle.addEventListener('navbar.vertical.toggle', function () {
  // do something...
})

برای تبدیل نوار ناوبری شفاف عمودی به نوار ناوبری عمودی معکوس، .navbar-inverted کلاس را به عنصر اضافه کنید..navbar-vertical

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-inverted">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

      <!-- Navbar content-->
    </div>
  </div>
</nav>

می‌توانید background-color با افزودن .bg-* کلاس‌های ابزار در .navbar-collapse عنصر تغییر دهید یا می‌توانید با استفاده از متغیر SCSS که در بخش SCSS در زیر توضیح داده شده است، به‌صورت سراسری به‌روزرسانی کنید.

<div class="collapse navbar-collapse bg-1000">
   <div class="navbar-vertical-content scrollbar">

     <!-- Navbar content-->
   </div>
 </div>

Falcon به شما این امکان را می دهد که Navbar Inverted خود را با متغیرهای SCSS سفارشی کنید. گزینه های موجود در زیر لیست شده اند:

رنگ پس زمینه

برای تغییر رنگ پس‌زمینه Navbar Inverted، متغیر SCSS $navbar-inverted-bg را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-bg: $gray-1000;

رنگ پیوند

برای تغییر رنگ پیوندهای ناوبری وارونه، متغیر SCSS $navbar-inverted-link-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-link-color: $gray-500;

رنگ شناور پیوند

برای تغییر رنگ شناور پیوندهای ناوبری وارونه، متغیر SCSS $navbar-inverted-link-hover-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-link-hover-color: $gray-200;

پیوند رنگ فعال

برای تغییر رنگ فعال پیوندهای ناوبری وارونه، متغیر SCSS $navbar-inverted-link-active-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-link-active-color: $gray-200;

رنگ تقسیم کننده معکوس نوار ناوبری

برای تغییر رنگ تقسیم‌کننده، متغیر SCSS $navbar-inverted-hr-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-hr-color: rgba($white, 0.2);

رنگ نوار پیمایش معکوس نوار ناوبری

برای تغییر رنگ نوار اسکرول، متغیر SCSS $navbar-inverted-scrollbar-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-inverted-scrollbar-color: $gray-400;

.navbar-vibrant کلاس را به عنصر اضافه کنید .navbar-vertical که a gradient-color و a background-image را به .navbar-collapse عنصر تنظیم می کند. این سبک از theme.css.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-vibrant">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

      <!-- Navbar content-->
    </div>
  </div>
</nav>

می‌توانید پس‌زمینه نوار ناوبری پر جنب و جوش را با استفاده از سبک درون خطی تغییر دهید. برای تغییر ویژگی تصویر پس زمینه، ویژگی style را به .navbar-collapse عنصر اضافه کنید. در غیر این صورت، می توانید پس زمینه را با استفاده از متغیر SCSS تغییر دهید.

<div class="collapse navbar-collapse" style="background-image: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2), url(assets/img/generic/bg-navbar.png)">
  <div class="navbar-vertical-content scrollbar">

    <!-- Navbar content-->
  </div>
</div>

برای سفارشی کردن Navbar Vibrant خود می توانید از متغیرهای SCSS استفاده کنید. گزینه های موجود در زیر لیست شده اند:

زمینه

برای تغییر پس‌زمینه Navbar پر جنب و جوش، متغیر SCSS $navbar-vibrant-bg-image را در خود اضافه کنید _user-variables.scss. با استفاده از این متغیر می توانید هم رنگ همپوشانی و هم تصویر پس زمینه را به روز کنید. مثال:

$navbar-vibrant-bg-image: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2), url(../img/generic/bg-navbar.png);

رنگ پیوند

برای تغییر رنگ پیوندهای Navbar Vibrant، متغیر SCSS $navbar-vibrant-link-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-vibrant-link-color: $gray-500;

رنگ شناور پیوند

برای تغییر رنگ شناور پیوندهای Navbar Vibrant، متغیر SCSS $navbar-vibrant-link-hover-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-vibrant-link-hover-color: $gray-200;

پیوند رنگ فعال

برای تغییر رنگ فعال پیوندهای Navbar Vibrant، متغیر SCSS $navbar-vibrant-link-active-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-vibrant-link-active-color: $gray-200;

تقسیم کننده پر جنب و جوش Navbar

برای تغییر رنگ تقسیم‌کننده، متغیر SCSS $navbar-vibrant-hr-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-vibrant-hr-color: rgba($white, 0.2);

رنگ نوار پیمایش پر جنب و جوش

برای تغییر نوار اسکرول، متغیر SCSS $navbar-vibrant-scrollbar-color را در خود اضافه کنید _user-variables.scss. مثال:

$navbar-vibrant-scrollbar-color: $gray-400;

.navbar-card کلاس را به عنصر اضافه کنید .navbar-vertical تا پس‌زمینه سفید و سایه کارت را به .navbar-collapse عنصر تبدیل کنید تا Transparent Navbar Vertical به Card Navbar Vertical تبدیل شود.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-card">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

      <!-- Navbar content-->
    </div>
  </div>
</nav>

می‌توانید background-color با افزودن .bg-* کلاس‌های ابزار در .navbar-collapse عنصر تغییر دهید یا می‌توانید با استفاده از متغیر SCSS که در بخش SCSS در زیر توضیح داده شده است، به‌صورت سراسری به‌روزرسانی کنید.

<div class="collapse navbar-collapse bg-white">
   <div class="navbar-vertical-content scrollbar">

     <!-- Navbar content  -->
   </div>
 </div>