Add icons to navbar

This commit is contained in:
Edgar P. Burkhart 2024-01-04 18:33:56 +01:00
parent 67e71b717b
commit 63258147ee
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 33 additions and 11 deletions

View file

@ -1,4 +1,5 @@
@import "https://rsms.me/inter/inter.css";
@import "https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css";
*,
*::before,
@ -152,13 +153,22 @@ nav {
font-weight: 500;
}
}
display: block;
display: grid;
grid-template-columns: 1fr max-content;
align-items: baseline;
[class^="ri-"] {
height: 1.5em;
width: 1.5em;
line-height: 1.5em;
border-radius: var(--radius);
}
&.cur {
font-weight: 550;
&::after {
content: "◎";
position: absolute;
right: 0;
[class^="ri-"] {
background: var(--text-link);
color: var(--bg);
}
}
}
@ -229,6 +239,8 @@ footer {
}
}
[class^="ri-"] {
display: inline-block;
text-align: center;
font-weight: normal;
&.green,

View file

@ -12,7 +12,6 @@
{% block link %}
<link rel="icon" href="{% static "main/svg/logo.svg" %}" type="image/svg+xml">
{% css "main/css/main.css" %}
{% css "main/remixicon/remixicon.css" %}
{% endblock %}
</head>
<body>
@ -31,27 +30,38 @@
<li>
<a href="{% url "index" %}"
class="home{% if request.resolver_match.url_name == "index" %} cur{% endif %}"
accesskey="h">{% translate "Home" %}</a>
accesskey="h">
<span>{% translate "Home" %}</span>
{{ "home"|remix }}
</a>
</li>
<li>
<a href="{% url "statements" %}"
class="{% if request.resolver_match.url_name == "statements" %}cur{% endif %}">
{% translate "Statements" %}
<span>{% translate "Statements" %}</span>
{{ "file"|remix }}
</a>
</li>
<li>
<a href="{% url "transactions" %}"
class="{% if request.resolver_match.url_name == "transactions" %}cur{% endif %}">
{% translate "Transactions" %}
<span>{% translate "Transactions" %}</span>
{{ "receipt"|remix }}
</a>
</li>
<li>
<a href="{% url "search" %}"
class="{% if request.resolver_match.url_name == "search" %}cur{% endif %}"
accesskey="r">{% translate "Search" %}</a>
accesskey="r">
<span>{% translate "Search" %}</span>
{{ "search"|remix }}
</a>
</li>
<li>
<a href="{% url "logout" %}" accesskey="l">{% translate "Log out" %}</a>
<a href="{% url "logout" %}" accesskey="l">
<span>{% translate "Log out" %}</span>
{{ "close-circle"|remix }}
</a>
</li>
{% else %}
<li>