# 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`:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

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