# Web site configuration

### Add a Site

- <span style="white-space: pre-wrap;">To add sites, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`
- <span style="white-space: pre-wrap;">Add a line in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> array</span>

<u>Line Format:</u>

```lua
{
  name: "Name displayed on the tablet",
  icon: "img/your_image.png",
  href: "unique_name",
  url: "website_url"
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the </span>****href****<span style="white-space: pre-wrap;"> must be unique and cannot be used on another site!</span></p>

<details id="bkmrk-exemple-avant-%3A-cons"><summary>Example</summary>

<u>Before:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
    ]
};
```

<u>New Site:</u>

```lua
{
  name: "Intranet Xelyos",
  icon: "img/intranet.png",
  href: "intranetxelyos",
  url: "http://intranet-rp.com"
}
```

<u>After:</u>

#####   


```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<span style="white-space: pre-wrap;"></span>

</details>- <span style="white-space: pre-wrap;">The image linked to your site must be located in the </span>`<span class="editor-theme-code">nui/img</span>`<span style="white-space: pre-wrap;"> directory</span>

##### Change the Background Color

- <span style="white-space: pre-wrap;">You can also change the background color by adding/modifying the </span>`<span class="editor-theme-code">nui/assets/color.css</span>`<span style="white-space: pre-wrap;"> file</span>

```css
.application > #unique_number {
    background: #37517e;
    background: linear-gradient(to right, #37517e, #142747);
}
```

### Limit Access to a Site for a Job

<span style="white-space: pre-wrap;">To restrict access to a site for a job, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`.

<u>Restriction Format:</u>

```lua
{
  job_name: "job_name",
  sites: [
    { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" }
  ]
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the line in the </span>****sites****<span style="white-space: pre-wrap;"> array must be identical to the one in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> variable!</span></p>

<details id="bkmrk-exemple-variable-ave"><summary>Example</summary>

<span style="white-space: pre-wrap;"></span>

<u>Variable with all sites:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<u>Variable with the restriction:</u>

```javascript
const jobSites = [
    {
        job_name: "police",
        sites: [
            { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    },
    {
        job_name: "ambulance",
        sites: [
            { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    }
];
```

#####   


<u>With this configuration:</u>

- <span style="white-space: pre-wrap;">The site </span>****Intranet Xelyos****<span style="white-space: pre-wrap;"> will be accessible for the police and ambulance jobs</span>
- <span style="white-space: pre-wrap;">The site </span>****COP App****<span style="white-space: pre-wrap;"> will only be accessible for the police job</span>
- <span style="white-space: pre-wrap;">The site </span>****Secours App****<span style="white-space: pre-wrap;"> will only be accessible for the ambulance job</span>

</details>