From c91234344237951a7b26d48048de104fa1573a21 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Tue, 18 Apr 2023 14:05:13 +0200
Subject: [PATCH] Add skip link, add sticky navigation

---
 nummi/main/static/main/css/main.css | 17 ++++++++++++-----
 nummi/main/templates/main/base.html | 23 +++++++++++++++++++----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index 54eec0d..5abcaf4 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -46,6 +46,9 @@ body {
 
 	background: var(--bg);
 	color: var(--text);
+
+	display: grid;
+	grid-template-columns: max-content 1fr;
 }
 
 p {
@@ -63,10 +66,6 @@ a:hover {
 .red {color: var(--red)}
 .green {color: var(--text-green)}
 
-body {
-	display: grid;
-	grid-template-columns: max-content 1fr;
-}
 main {
 	padding: 2rem;
 	grid-column: 2;
@@ -91,7 +90,15 @@ nav h1 img {
 nav ul {
 	list-style: none;
 	padding: 0;
-	position: relative;
+	position: sticky;
+	top: 2rem;
+}
+nav .skip-link {
+	opacity: .1;
+}
+nav .skip-link:active,
+nav .skip-link:focus {
+	opacity: initial;
 }
 nav a.cur {
 	font-weight: 550;
diff --git a/nummi/main/templates/main/base.html b/nummi/main/templates/main/base.html
index 3f2c56a..316c28f 100644
--- a/nummi/main/templates/main/base.html
+++ b/nummi/main/templates/main/base.html
@@ -29,6 +29,9 @@
                         Nummi
                     </h1>
                     <ul>
+                        <li>
+                            <a class="skip-link" href="#main">{% translate "Skip to main content" %}</a>
+                        </li>
                         {% if user.is_authenticated %}
                             <li>
                                 <a href="{% url 'index' %}"
@@ -37,32 +40,44 @@
                                     {% translate "Home" %}
                                 </a>
                             </li>
+                            <li>
+                                <a href="{% url 'snapshots' %}"
+                                   class="{% if request.resolver_match.url_name == 'snapshots' %}cur{% endif %}">
+                                    {% translate "Snapshots" %}
+                                </a>
+                            </li>
+                            <li>
+                                <a href="{% url 'transactions' %}"
+                                   class="{% if request.resolver_match.url_name == 'transactions' %}cur{% endif %}">
+                                    {% translate "Transactions" %}
+                                </a>
+                            </li>
                             <li>
                                 <a href="{% url 'account' %}"
                                    class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
                                    accesskey="a">
-                                    {% translate "Account" %}
+                                    {% translate "New account" %}
                                 </a>
                             </li>
                             <li>
                                 <a href="{% url 'snapshot' %}"
                                    class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
                                    accesskey="s">
-                                    {% translate "Snapshot" %}
+                                    {% translate "New snapshot" %}
                                 </a>
                             </li>
                             <li>
                                 <a href="{% url 'category' %}"
                                    class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
                                    accesskey="c">
-                                    {% translate "Category" %}
+                                    {% translate "New category" %}
                                 </a>
                             </li>
                             <li>
                                 <a href="{% url 'transaction' %}"
                                    class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
                                    accesskey="t">
-                                    {% translate "Transaction" %}
+                                    {% translate "New transaction" %}
                                 </a>
                             </li>
                             <li>