From ae1d743f15bed14c33b624320cacdf2b58ac9954 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 9 Nov 2021 17:43:14 +0100
Subject: [PATCH] Add breadcrumb design

---
 src/assets/views/components/Breadcrumb.svelte | 34 +++++++++++++++++--
 src/assets/views/components/Pagination.svelte |  2 +-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/assets/views/components/Breadcrumb.svelte b/src/assets/views/components/Breadcrumb.svelte
index 12d4c22..2ccee54 100644
--- a/src/assets/views/components/Breadcrumb.svelte
+++ b/src/assets/views/components/Breadcrumb.svelte
@@ -1,13 +1,41 @@
 <script lang="ts">
+    import Icon from "../utils/Icon.svelte";
+
     export let currentPageTitle: string;
     export let pages: { link: string, title: string }[] = [];
 </script>
 
+<style lang="scss">
+    ol {
+        display: flex;
+        flex-direction: row;
+        margin: 8px 0;
+        padding: 0 8px;
+
+        list-style: none;
+        overflow: hidden;
+
+        border-radius: 5px;
+
+        li {
+            display: flex;
+            flex-direction: row;
+            white-space: nowrap;
+            align-items: center;
+
+            a, span {
+                display: block;
+                padding: 8px;
+            }
+        }
+    }
+</style>
+
 <nav aria-label="breadcrumb">
-    <ol class="breadcrumb">
+    <ol class="breadcrumb panel">
         {#each pages as page}
-            <li><a href={page.link}>{page.title}</a></li>
+            <li><a href={page.link}>{page.title}</a> <Icon name="chevron-right"/></li>
         {/each}
-        <li class="active" aria-current="page">{currentPageTitle}</li>
+        <li class="active" aria-current="page"><span>{currentPageTitle}</span></li>
     </ol>
 </nav>
diff --git a/src/assets/views/components/Pagination.svelte b/src/assets/views/components/Pagination.svelte
index 3354c85..9603d90 100644
--- a/src/assets/views/components/Pagination.svelte
+++ b/src/assets/views/components/Pagination.svelte
@@ -20,7 +20,7 @@
 			display: flex;
 			flex-direction: row;
 			width: fit-content;
-			margin: 0 auto;
+			margin: 8px auto;
 			padding: 0;
 
 			list-style: none;