Configuring the Domain Menu [wiki.qeng.org]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Configuring the Domain Menu ======

The domain menu is that bar at the top of the page: the section buttons, and on the right the language picker and the login.

{{ :admin_main:domain_navbar_en.png?800 |The domain navbar: the menu items, the language picker and the login}}

Copy this into the menu block in the Design section:

<code>
<script>

// https://wiki.qeng.org/doku.php?id=admin_main:domain_menu&lang=auto
add_navbar({ 
  classes: 'navbar-expand-lg navbar-light bg-light mb-2',
  items: [
    // Add new buttons to this list
    {name: 'GAMES', url:'index.php'},
    {name: 'ARCHIVE', url:'archive.php'},
    {name: 'RATING', url:'ratings.php'},
  ],
  langs: {'EN':'en', 'UA':'uk', 'RU':'ru'}, // Language selection. Can delete this line if not needed.
  username: '!username!',
});

</script>
</code>


===== Configuring Buttons in the Menu =====
Buttons are listed in the **items** section - one line per button.

The first two buttons are always visible: on a narrow screen the rest go under the burger, these two do not.

{{ :admin_main:domain_navbar_mobile_en.png |The same bar on a narrow screen: the menu folds into a burger}}


The profile button is added automatically.

===== Localization of Menu Buttons =====
Translation for buttons will be applied if you add this to the menu block in the Design section **at the top**:
<code>
<script>
// English (en)
addTranslation('en', 'АВТОРАМ', 'ABOUT');
addTranslation('en', 'ТЕСТ ДВИЖКА', 'EXAMPLES');
addTranslation('en', 'РЕЙТИНГ АВТОРОВ', 'BEST AUTHORS');
addTranslation('en', 'РЕЙТИНГ ДОМЕНОВ', 'BEST DOMAINS');
addTranslation('en', 'СТАТИСТИКА', 'STATS');

// Ukrainian (uk)
addTranslation('uk', 'АВТОРАМ', 'АВТОРАМ');
addTranslation('uk', 'СТАТИСТИКА', 'СТАТИСТИКА');
addTranslation('uk', 'ТЕСТ ДВИЖКА', 'ТЕСТ ДВИГУНА'); 
addTranslation('uk', 'РЕЙТИНГ АВТОРОВ', 'РЕЙТИНГ АВТОРІВ');
addTranslation('uk', 'РЕЙТИНГ ДОМЕНОВ', 'РЕЙТИНГ ДОМЕНІВ');
</script>
</code>

==== Links to Domain Pages ====

For example, a page with frequently asked questions - needs to be populated manually. You can specify a different ID if you need several such pages.
<code>
  {name: 'F.A.Q.', url:'page.php?id=faq'},
</code>

==== Links to External Pages ====

For example, a link to a telegram chat or channel. **target:'_blank'** - means it should open in a new tab.
<code>
  {name: 'TELEGRAM', url:'https://t.me/qeng_authors', target:'_blank'},
</code>

===== Configuring Classes =====
You can change the set of classes in the line
<code>
classes: 'navbar-expand-lg navbar-light bg-light mb-2',
</code>

Classes are space-separated.

==== Toolbar Auto-collapse ====

In order for all buttons to be visible on wide screens, you can add **one of these classes**:
  * **navbar-expand-xl** - all buttons on one line if the screen is wider than 1200 pixels.
  * **navbar-expand-lg** - all buttons on one line if the screen is wider than 992 pixels.
  * **navbar-expand-md** - all buttons on one line if the screen is wider than 768 pixels.
  * **navbar-expand-sm** - all buttons on one line if the screen is wider than 576 pixels.

==== Color Style ====
For a light toolbar, add the classes **navbar-light bg-light**

For a dark toolbar, add the classes **navbar-dark bg-dark**

==== Margin Under the Toolbar ====
For a margin under the toolbar, add one of the classes **mb-1 mb-2 mb-3 mb-4 mb-5**. The larger the number, the larger the margin.

===== Logo =====
You can add a logo to the toolbar on the left.

To do this, add the **logo** section after **classes**

Example of adding an image:
<code>
  logo: '<img style="height:36px;" class="mr-3" src="https://qeng.org/apple-touch-icon.png"></img>',
</code>