feat: add link to calculator main page

Author: bdromard

src/lib/components/Header.svelte

@@ -10,7 +10,16 @@
     </a>
   </div>
   <div id="top-buttons">
-    <div id="documentation-top-btn">
+    <div class="top-button">
+      <a
+        href="https://data.hubblo.org/gpu"
+        class="simple-link"
+        aria-label="Navigate to the calculator page"
+      >
+        🧮 Calculator
+      </a>
+    </div>
+    <div class="top-button">
       <a
         href="https://data.hubblo.org/gpu/docs"
         class="simple-link"
@@ -19,7 +28,7 @@
         📖 Documentation
       </a>
     </div>
-    <div id="code-top-btn">
+    <div class="top-button">
       <a
         href="https://github.com/hubblo-org/gpu-calculator"
         class="simple-link"
@@ -28,7 +37,7 @@
         👩‍💻 Code
       </a>
     </div>
-    <div id="contact-top-btn">
+    <div class="top-button">
       <a
         href="https://hubblo.org/en/contact/"
         class="simple-link"

src/tests/layout/header.test.ts

@@ -14,7 +14,11 @@ describe("header component test suite", () => {
     expect(hubbloLink).toBeVisible();
   });
 
-  it("should display links to the documentation, the repository and to the contact form", () => {
+  it("should display links to the calculator, the documentation, the repository and to the contact form", () => {
+    const calculatorLink = screen.getByRole("link", {
+      name: "Navigate to the calculator page"
+    });
+
     const documentationLink = screen.getByRole("link", {
       name: "Navigate to the calculator documentation page"
     });
@@ -25,6 +29,7 @@ describe("header component test suite", () => {
 
     const contactLink = screen.getByRole("link", { name: "Navigate to the Hubblo contact form" });
 
+    expect(calculatorLink).toBeVisible();
     expect(documentationLink).toBeVisible();
     expect(repositoryLink).toBeVisible();
     expect(contactLink).toBeVisible();

static/css/global.css

@@ -393,23 +393,16 @@ tr:nth-child(even) {
   user-select: none;
 }
 
+.top-button {
+  margin-right: 10px;
+}
 
 #top-buttons {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
 
-#community-top-btn,
-#documentation-top-btn,
-#contact-top-btn,
-#code-top-btn {
-  margin-right: 10px;
-}
-
-
-
-
 ::selection {
   background: var(--color-secondary-30, Highlight);
 }