<h5>For Gulp based workflow</h5>
<p>Edit the <code>src/js/config.js</code> file.</p>
<h5>If you are not using Gulp based workflow</h5>
<p>Edit the <code>public/assets/js/config.js</code> file.</p>
<h5 class="fs-0">Configuration object:</h5>
<pre><code class="lang-js">const initialConfig = {
  phoenixIsNavbarVerticalCollapsed: false,
  phoenixTheme: 'light',
  phoenixNavbarTopStyle: 'default',
  phoenixNavbarVerticalStyle: 'default',
  phoenixNavbarPosition: 'vertical',
  phoenixNavbarTopShape: 'default',
  phoenixIsRTL: false,
  phoenixSupportChat: true
};
</code></pre>

<div class="table-responsive scrollbar">
  <table class="table table-bordered border border-200 fs--1 mb-0">
    <thead class="bg-200 text-900">
      <tr>
        <th class="white-space-nowrap">Option</th>
        <th class="white-space-nowrap">Type</th>
        <th class="white-space-nowrap">Defaults</th>
        <th class="white-space-nowrap" style="min-width: 20rem">Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixIsNavbarVerticalCollapsed</td>
        <td class="white-space-nowrap" style="min-width: 7rem"><code>Boolean</code></td>
        <td class="white-space-nowrap" style="min-width: 7rem"><code>false</code></td>
        <td class="pe-2">Set <code>true</code> to make the vertical navbar stay collapsed when the page loads. </td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixTheme</td>
        <td><code>string </code></td>
        <td class="white-space-nowrap"> <code>light </code></td>
        <td class="pe-2">This option is for setting up the default color mode (<code>dark</code> or <code>light</code>) for your project. Set <code>dark</code> to make the default color mode dark.</td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixNavbarTopStyle</td>
        <td><code>string </code></td>
        <td class="white-space-nowrap"> <code>default </code></td>
        <td class="pe-2">Set <code>darker </code>to make the top navbar darker when the page loads.</td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixNavbarVerticalStyle</td>
        <td><code>string </code></td>
        <td class="white-space-nowrap"> <code>default </code></td>
        <td class="pe-2">Set <code>darker </code>to make the vertical navbar darker when the page loads.</td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixNavbarPosition</td>
        <td><code>string </code></td>
        <td class="white-space-nowrap"> <code>vertical </code></td>
        <td class="pe-2">This option is for changing the navigation type. Available values:
          <ul class="mb-0">
            <li><code>vertical</code></li>
            <li><code>horizontal</code></li>
            <li><code>combo</code></li>
          </ul>
        </td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixNavbarTopShape</td>
        <td><code>string </code></td>
        <td class="white-space-nowrap"> <code>default </code></td>
        <td class="pe-2">Set <code>slim </code>to make the top navbar slim when the page loads.</td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixIsRTL</td>
        <td><code>Boolean</code></td>
        <td><code>false</code></td>
        <td class="pe-2">Use <code>true</code> to make the whole layout RTL (Right to Left). Recommended for languages such as Arabic, Hebrew, or other RTL languages.</td>
      </tr>
      <tr>
        <td class="ps-2 white-space-nowrap">phoenixSupportChat</td>
        <td class="white-space-nowrap"> <code>Boolean </code></td>
        <td class="white-space-nowrap"> <code>true</code></td>
        <td class="pe-2">This option is for showing the chat widget. Set <code>false </code>to hide the chat widget when the page loads.</td>
      </tr>
    </tbody>
  </table>
</div>