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.

Button captions are translated by the domain dictionary. To let the engine see them, wrap each one in gt():

  items: [
    {name: gt('ИГРЫ'), url:'index.php'},
    {name: gt('АРХИВ'), url:'archive.php'},
    {name: gt('РЕЙТИНГ'), url:'ratings.php'},
  ],

The captions then show up in the table on the “Translation” screen — see Domain Translation. The translation is substituted on the server, before the page reaches the viewer. A caption without gt() never appears in the table at all, and nobody warns you.

Translations used to be written right here, in the menu block:

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

It works the way it always worked, but it covers only the menu buttons — not the header, not the footer, not the pages — and it says nothing about what is still untranslated.

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