From a554d957d9dcdefe45a6d913806ca61ee9e4c8a5 Mon Sep 17 00:00:00 2001
From: tombui99 <tom.quang.bui@gmai.com>
Date: Thu, 14 Mar 2024 16:20:37 +0700
Subject: [PATCH] Added breadcrumb and head title to case study page

---
 ui/src/containers/About.svelte     | 23 +++++++++++++++++
 ui/src/containers/CaseStudy.svelte | 40 ++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/ui/src/containers/About.svelte b/ui/src/containers/About.svelte
index 35bb39cf..b3d0fcc8 100644
--- a/ui/src/containers/About.svelte
+++ b/ui/src/containers/About.svelte
@@ -1,7 +1,30 @@
 <script>
   import { navigateTo } from "svelte-router-spa";
+  import Icon from "../components/misccomponents/Icon.svelte";
+
 </script>
 <div class="container mx-auto">
+  <div>
+    <p class="hidden md:block text-sm textdark pb-3 pt-4">
+      <a
+        class="inline-block align-baseline text-blue hover:text-blue-darker"
+        href="/">
+        Home
+      </a>
+      <Icon cssClass="inline-block" height="20" width="20">
+        <path d="M9 5l7 7-7 7" />
+      </Icon>
+      <a
+        class="inline-block align-baseline text-blue hover:text-blue-darker"
+        href="/about">
+        About
+      </a>
+      <Icon cssClass="inline-block" height="20" width="20">
+        <path d="M9 5l7 7-7 7" />
+      </Icon>
+    </p>
+  </div>
+
   <div class="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
     <article class="markdown-body">
       <h1>About SSW</h1>
diff --git a/ui/src/containers/CaseStudy.svelte b/ui/src/containers/CaseStudy.svelte
index 10238105..f014a3bc 100644
--- a/ui/src/containers/CaseStudy.svelte
+++ b/ui/src/containers/CaseStudy.svelte
@@ -1,8 +1,48 @@
 <script>
   import { navigateTo } from "svelte-router-spa";
+  import Icon from "../components/misccomponents/Icon.svelte";
+
+  let title = 'SSW CodeAuditor - Case Study';
+
+  // Function to update the page title
+  function updateTitle(newTitle) {
+    document.title = newTitle;
+  }
+
+  // Listen for changes in the title variable
+  $: {
+    updateTitle(title);
+  }
 </script>
 
 <div class="container mx-auto">
+  <div>
+    <p class="hidden md:block text-sm textdark pb-3 pt-4">
+      <a
+        class="inline-block align-baseline text-blue hover:text-blue-darker"
+        href="/">
+        Home
+      </a>
+      <Icon cssClass="inline-block" height="20" width="20">
+        <path d="M9 5l7 7-7 7" />
+      </Icon>
+      <a
+        class="inline-block align-baseline text-blue hover:text-blue-darker"
+        href="/about">
+        About
+      </a>
+      <Icon cssClass="inline-block" height="20" width="20">
+        <path d="M9 5l7 7-7 7" />
+      </Icon>
+      <span class="inline-block align-baseline text-blue hover:text-blue-darker">
+        Case Study
+      </span>
+      <Icon cssClass="inline-block" height="20" width="20">
+        <path d="M9 5l7 7-7 7" />
+      </Icon>
+    </p>
+  </div>
+
   <div class="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
     <article class="markdown-body">
       <h1>SSW Sites</h1>