# Float Container Configuration Guide

This document explains how to easily configure the float navigation system without having to modify the core implementation files. It also covers how to manage the styling with the included CSS utilities.

## 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
* `css-utils.js` - Utilities for managing the navbar CSS styles
* `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'
  }
});
```

## Managing CSS Styles

The system includes built-in CSS management utilities that allow you to control the styling of the navbar.

### Enabling/Disabling CSS Injection

In `config.js`, you can control whether the CSS is automatically injected:

```javascript
features: {
  enabled: true,
  // ...
  injectCSS: true  // Set to false to disable CSS injection
}
```

### CSS Utility Functions

You can also manipulate the CSS programmatically:

```javascript
import { injectNavbarCSS, removeNavbarCSS, toggleNavbarCSS, updateNavbarCSS } from './css-utils.js';

// Inject the default CSS
injectNavbarCSS();

// Remove the CSS
removeNavbarCSS();

// Toggle CSS based on a condition
toggleNavbarCSS(true); // Enable
toggleNavbarCSS(false); // Disable

// Update with custom CSS
updateNavbarCSS(`
  /* Your custom CSS here */
  .sidenav {
    background-color: #333;
    color: white;
  }
`);
```

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