Add navigation bar to gallery

- Error on no images has been removed because there might be nested
  directories but 0 images & that is okay.

5 files changed, 28 insertions, 5 deletions

diff --git a/lib/Crater/Gallery.rakumod b/lib/Crater/Gallery.rakumod
index 373231a..4fdfac8 100644
--- a/lib/Crater/Gallery.rakumod
+++ b/lib/Crater/Gallery.rakumod
@@ -27,7 +27,7 @@ class Crater::Gallery {
         }
 
         # Add directories on top.
-        for @paths.grep(*.d) {
+        for @paths.grep(*.d).sort {
             next if .ends-with(".crater");
             push @gallery, %( :type<directory>,
                               :text($_.relative($!directory)) );
diff --git a/lib/Crater/Routes/Gallery.rakumod b/lib/Crater/Routes/Gallery.rakumod
index 655e62e..ede5010 100644
--- a/lib/Crater/Routes/Gallery.rakumod
+++ b/lib/Crater/Routes/Gallery.rakumod
@@ -18,9 +18,21 @@ sub gallery-routes(
 
         # Gallery view.
         get -> LoggedIn $session, *@path {
+            # Generates a navigation bar for nested directories.
+            my @nav = %(name => "home", url => "/"), ;
+            for @path.kv -> $idx, $p {
+                next if $p eq "";
+                push @nav, %(
+                    name => $p,
+                    url => (@nav[*-1]<url> ~ $p ~ "/")
+                );
+            }
+
             template 'gallery.crotmp', {
                 gallery => $gallery.list(sub-dir => @path),
-                title => "Gallery"
+                title => $gallery.title(),
+                nav => @nav,
+                show-nav => @path.elems ?? True !! False
             };
         }
 
diff --git a/resources/css/style.css b/resources/css/style.css
index b2132df..132a0ba 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -128,7 +128,7 @@ img { width: 400px; }
 .alert {
     background-color: var(--red-subtle-bg);
 }
-#loading-progress, #loading-error { margin-bottom: 2em; }
+#loading-progress, #loading-error, #nav { margin-bottom: 2em; }
 #loading-error { display: none; }
 #loading-error button {
     float: right;
@@ -137,4 +137,8 @@ img { width: 400px; }
     border: 1px var(--bg-active) solid;
     padding: 0.25em 1em;
 }
-#loading-progress { width: 100%; }
+#loading-progress, #nav { width: 100%; }
+#nav {
+    background-color: var(--bg-alt);
+    padding: 1em 0.8em;
+}
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index d188e49..44ba1b1 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -66,7 +66,7 @@ const onImagesLoaded = (container, event) => {
     let remaining = images.length;
 
     if (images.length === 0) {
-        showLoadingError("No images to display.");
+        // showLoadingError("No images to display.");
         event(remaining, failed, progressBar);
     }
 
diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp
index 6cc7fbf..e1d13e3 100644
--- a/templates/gallery.crotmp
+++ b/templates/gallery.crotmp
@@ -3,6 +3,13 @@
     <noscript>
       <div class="alert" role="alert">JavaScript required.</div>
     </noscript>
+    <?.show-nav>
+    <div id="nav">
+        <@nav : $p>
+        <a href="<$p.<url>>"><$p.<name>></a>&nbsp;/&nbsp;
+        </@>
+    </div>
+    </?>
     <div id="loading">
       <label for="loading-progress">Loading Images:</label>
       <progress id="loading-progress" max="100" value="0"></progress>