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.

Copy this into the menu block in the Design section:

<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>

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.

The profile button is added automatically.

Translation for buttons will be applied if you add this to the menu block in the Design section at the top:

<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>

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.

  {name: 'F.A.Q.', url:'page.php?id=faq'},

For example, a link to a telegram chat or channel. target:'_blank' - means it should open in a new tab.

  {name: 'TELEGRAM', url:'https://t.me/qeng_authors', target:'_blank'},

You can change the set of classes in the line

classes: 'navbar-expand-lg navbar-light bg-light mb-2',

Classes are space-separated.

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.

For a light toolbar, add the classes navbar-light bg-light

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

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.

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:

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