Add icons to navbar
This commit is contained in:
parent
67e71b717b
commit
63258147ee
2 changed files with 33 additions and 11 deletions
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue