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://rsms.me/inter/inter.css";
@import "https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css";
*, *,
*::before, *::before,
@ -152,13 +153,22 @@ nav {
font-weight: 500; 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 { &.cur {
font-weight: 550; font-weight: 550;
&::after { [class^="ri-"] {
content: "◎"; background: var(--text-link);
position: absolute; color: var(--bg);
right: 0;
} }
} }
} }
@ -229,6 +239,8 @@ footer {
} }
} }
[class^="ri-"] { [class^="ri-"] {
display: inline-block;
text-align: center;
font-weight: normal; font-weight: normal;
&.green, &.green,

View file

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