Mathis/allianceauth
1
0
Fork 0
mirror of https://gitlab.com/allianceauth/allianceauth.git synced 2025-12-18 06:45:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

[ADD] Mobile menu templates to framework

Browse Source
This commit is contained in:
Peter Pfeufer
2025-09-10 17:06:36 +02:00
parent 222547187e
commit b76fa4282a
11 changed files with 116 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/development/custom/framework/templates.md
View File

@@ -66,3 +66,53 @@ To use it, you can use the following code in your template:
</div>
{% endblock %}
```
### Top Navigation Buttons
To ensure a unified style for top navigation buttons, we provide a template partial for this.
To use it, you can use the following code in your template:
```django
{% block header_nav_collapse_right %}
{% translate "My Awesome Link" as nav_item_title %}
{% url "my_app:my_function" as nav_item_link %}
{% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True icon_on_desktop=True %}
{% endblock header_nav_collapse_right %}
```
This template takes care of the mobile responsiveness and the styling. In mobile view,
the button will be changed to a text link. The icon will be placed in front of the text
link if `icon_on_mobile` is set to `True`.
#### Button Parameters
- `btn_modifier`: (Optional) The button modifier class, e.g. `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`. Default is `primary`.
- `url`: The URL the button should point to.
- `title`: The title of the button.
- `fa_icon`: (Optional) The FontAwesome icon class to use, e.g. `fa-solid fa-plus`.
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.
- `icon_on_desktop`: (Optional) Boolean to indicate if the icon should be shown on desktop devices in front of the button text. Default is `False`.
### Top Navigation FontAwesome Icons
To ensure a unified style for top navigation FontAwesome icons, we provide a template partial for this.
To use it, you can use the following code in your template:
```django
{% block header_nav_collapse_right %}
{% translate "My Awesome Link as FontAwesome Icon" as nav_item_title %}
{% url "my_app:my_function" as nav_item_link %}
{% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-check-double" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
{% endblock header_nav_collapse_right %}
```
This template takes care of the mobile responsiveness and the styling. In mobile view,
the icon will be changed to a text link. The icon will be placed in front of the text
link if `icon_on_mobile` is set to `True`.
#### Icon Parameters
- `fa_icon`: The FontAwesome icon class to use, e.g. `fa-solid fa-check-double`.
- `url`: The URL the icon should point to.
- `title`: The title of the icon (used as tooltip).
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.