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
  ]
});