nb13-navbar

Float Container Configuration Guide

This document explains how to easily configure the float navigation system without having to modify the core implementation files.

Configuration Approach

The navigation system now uses a configuration-driven approach where all navigation items, links, and UI elements are defined in a single centralized configuration file.

Files Overview

• navigation-config.js - Contains all the configurable navigation elements
• config.js - Contains general system configuration settings
• float-ui.js - Implementation that reads from configuration
• main.js - Entry point and initialization

How to Update Navigation Elements

1. Updating Navigation Links

To update the navigation links (Game Tips, Download App, etc.), edit the navLinks array in navigation-config.js:

navLinks: [
  {
    href: '/new-url',              // Change the URL
    translationKey: 'gameTips',    // Reference to translations.js
    iconClass: 'fa-solid fa-gamepad' // FontAwesome icon class
  },
  // Add or remove items as needed
]

2. Updating Grid Items

To update the grid items (Fortune Wheel, VIP Program, etc.), edit the gridItems array:

gridItems: [
  {
    href: 'https://example.com',
    imgSrc: '/path/to/image.png',
    text: 'Display Text',
    translationKey: 'translationKey',
    target: '_self'
  },
  // Add or remove items as needed
]

3. Updating Dropdown Menus

To update dropdown menus (Follow Us, etc.), edit the dropdownMenus array:

dropdownMenus: [
  {
    translationKey: 'menuTitle',
    iconClass: 'fa-solid fa-users',
    subItems: [
      {
        href: 'https://example.com',
        translationKey: 'subItemText',
        iconClass: 'fa-brands fa-example',
        target: '_blank'
      },
      // Add or remove sub-items as needed
    ]
  }
]

4. Updating Logo and Partnership Logo

To update the logo or partnership logo:

logo: {
  src: '/path/to/new-logo.png',
  alt: 'Logo Alt Text'
},

partnershipLogo: {
  href: 'https://partner-site.com',
  imgSrc: '/path/to/partner-logo.png',
  imgAlt: 'Partner Logo Alt Text'
}

Programmatically Updating Configuration

You can also update the configuration programmatically using the exported function:

import { updateNavigationConfig } from './float-ui.js';

// Update specific parts of the navigation
updateNavigationConfig({
  navLinks: [
    // New set of navigation links
  ],
  logo: {
    src: '/path/to/new-logo.png'
  }
});

Translation Keys

All text elements use translation keys that reference the translation system. To add or update translations:

1. Add the translation key to navigation-config.js
2. Make sure the corresponding keys exist in the translations.js file

Adding New Navigation Elements Dynamically

You can also add new navigation links or dropdown menus dynamically after initialization:

import { addNavLink, addDropdownMenu } from './float-ui.js';

// Add a new navigation link
addNavLink({
  href: '/new-page',
  translationKey: 'newPageName',
  iconClass: 'fa-solid fa-star'
});

// Add a new dropdown menu
addDropdownMenu({
  translationKey: 'newDropdown',
  iconClass: 'fa-solid fa-list',
  subItems: [
    // Array of sub-items
  ]
});