# Customizing the menu

***

## Setting up

By setting the `MODULE.menu`, you will be able to customize your module's menu.

The setup should looks like this:

{% code title="main.lua" lineNumbers="true" %}

```lua
local MODULE = {
    --  ...
}

MODULE.menu = {
    --  here we will customize our menu:
    --  config = {},
    --  pages = {},
    --  details = {},
}

--  ...

return MODULE
```

{% endcode %}

***

## Adding configuration

*TODO*

***

## Adding pages

Pages are additionals [DForms](https://wiki.facepunch.com/gmod/DForm) that will be created in the module's menu.

To do so, you need to specify the `pages` table variable.

Each 'page' element must be a `function( DForm )` which will modify its own form as you want it to be.

### **Example**

**Work-Arounds** page, code from [base](https://github.com/Guthen/guthscpbase/blob/remaster-as-modules-based/lua/guthscp/modules/base/main.lua) module:

{% code title="base/main.lua" fullWidth="false" %}

```lua
MODULE.menu = {
	--  ...
	pages = {
		--  workaround
		function( form )
			form:SetName( "Work-Arounds" )

			form:Help( "This is where you can toggle fixes of other addons" )

			--  populate workarounds
			local checkboxes = {}
			for k, v in pairs( guthscp.workarounds ) do
				local checkbox = form:CheckBox( v.name )
				checkbox:SetChecked( v:is_enabled() )
				checkbox:SetDisabled( not v:is_active() )
				checkboxes[k] = checkbox
			end

			--  apply changes
			local button = form:Button( "Apply" )
			function button:DoClick()
				--  some non-related code...
			end
		end,
	},
	--  ...
}
```

{% endcode %}

***

## Adding details

By default, these module properties will show in the sidebar, such as:

* the **author** name
* the local **version**
* the remote **version** (if `MODULE.version_url` was set and the request was successful)

If you want to customize your module's sidebar such as adding informations & links, you have to specify the `details` table variable and add all the content you want.

Each **string** element will show as a category in the sidebar. You can also give a structured **table** to create links, actions or texts:

***

### **Structure**

**`string`** `text`

Text of the label

***

`(optional)` **`string`** `icon=nil`

Icon path of the detail, used in the menu. The pointed material must be a 16x16px image, use a [Silkicon](http://www.famfamfam.com/lab/icons/silk/preview.php) or make your own. You can also use the [icons](https://github.com/Guthen/guthscpbase/tree/remaster-as-modules-based/materials/guthscp/icons) released with the base.

***

`(optional)` **`string`** `url=nil`

URL to open when the user clicks on this detail. NOT compatible with the `callback` property.

***

`(optional)` **`function`** `callback=nil`

Custom callback to run when the user clicks on this detail. NOT compatible with the `url` property.

***

### **Example**

Code from [base](https://github.com/Guthen/guthscpbase/blob/remaster-as-modules-based/lua/guthscp/modules/base/main.lua) module:

{% code title="base/main.lua" fullWidth="false" %}

```lua
MODULE.menu = {
	--  ...
	details = {
		"Wiki",
		{
			text = "Read Me",
			icon = "icon16/information.png",
			url = "https://github.com/Guthen/guthscpbase/blob/master/README.md",
		},
		{
			text = "API",
			icon = "icon16/script_code.png",
			url = "https://github.com/Guthen/guthscpbase/wiki/API",
		},
		--  ...
		"Social",
		{
			text = "Github",
			icon = "guthscp/icons/github.png",
			url = "https://github.com/Guthen/guthscpbase",
		},
		{
			text = "Steam",
			icon = "guthscp/icons/steam.png",
			url = "https://steamcommunity.com/sharedfiles/filedetails/?id=2139692777",
		},
		--  ...
	},
}
```

{% endcode %}

***