change return button

ctrl/link.js

@@ -1,9 +1,12 @@
 import { kll } from '../main.js'
+import { displayReturnBtn } from '../utils/displayReturnBtn.js'
+
 export const link = {
-  onClick(_, el, e) {
+  async onClick(_, el, e) {
     e.preventDefault()
     const path = el.getAttribute('href')
     window.history.pushState({}, '', path)
-    kll.injectPage(path)
+    await kll.injectPage(path)
+    displayReturnBtn()
   },
 }

ctrl/returnButton.js

@@ -1,9 +1,10 @@
 import { kll } from '../main'
+import { displayReturnBtn } from '../utils/displayReturnBtn'
 import { getByDataAttr } from '../utils/getByDataAttr'
 
 export const returnButton = {
-  onInit(_, el) {
-    el.render()
+  async onInit(_, el) {
+    await el.render()
   },
   render(_, el) {
     const textEl = getByDataAttr(el, 'text')
@@ -26,5 +27,6 @@ export const returnButton = {
     arrow.setAttribute('href', el.href)
 
     kll.plugins.translate(textEl)
+    displayReturnBtn()
   },
 }

pages/index.html

@@ -3,6 +3,5 @@
     <div class="lg:text-base text-sm max-w-[600px] mx-auto mb-2" kll-md></div>
     <div kll-ctrl="categories" kll-id="categories"></div>
   </div>
-
   <div kll-ctrl="mdToHtml"></div>
 </div>

pages/ressource.html

@@ -1,7 +1,6 @@
 <div kll-t="basicLayout">
     <div class="gap-5 flex flex-col bold items-center h-full p-3 m-auto max-w-[500px]">
         <div kll-t="fullLoader" data-source-loader></div>
-        <div kll-tc="returnButton" class="w-full"></div>
         <div kll-ctrl="ressource" class="flex flex-col gap-1" kll-id="ressource"></div>
         <div class="border-t border-dashed border-rd-urban_gray w-full mt-5 pt-4 text-center">
             <p xmlns:cc="http://creativecommons.org/ns#" class="text-sm flex flex-col gap-2">

templates/404.html

@@ -1,6 +1,5 @@
 <template id="notFound">
     <div class="h-full w-full m-auto">
-        <div kll-tc="returnButton" class="w-full"></div>
         <div class="flex items-center justify-center h-full">
             <div class="text-center">
                 <h1 class="text-4xl font-bold">404</h1>

templates/basic-layout.html

@@ -1,6 +1,9 @@
 <template id="basicLayout">
-  <div class="dark:bg-dark-bg bg-rd-bg dark:text-dark-text grid grid-rows-[auto_1fr_auto] h-[100dvh]">
+  <div class="dark:bg-dark-bg bg-rd-bg dark:text-dark-text grid grid-rows-[auto_auto_1fr_auto] h-[100dvh]">
     <header kll-tc="header"></header>
+    <div>
+      <div kll-tc="returnButton"></div>
+    </div>
     <main kll-ctrl="translate">
       <div class="h-full relative">
         <div class="inset-0 absolute overflow-y-auto">

templates/returnButton.html

@@ -1,7 +1,16 @@
 <template id="returnButton">
-  <div class="flex gap-2 uppercase items-center" id="return_button">
+  <div class="flex gap-2 uppercase items-center w-full px-2" id="return_button">
     <a href="/#" kll-ctrl="link" class="w-4 fill-rd-sagwa_young text-sm" data-arrow>
-      🔙
+      <svg width="20px" height="20px" viewBox="0 0 210 297" class="inline">
+        <g id="path1" transform="translate(35.070111,39.088561)">
+          <path id="path5" class="fill-current"
+            d="M 69.467343,29.687012 -68.457271,109.41246 c 45.976504,26.57164 91.950003,53.14849 137.924614,79.72341 V 133.86583 H 208.31705 V 84.957743 H 69.467343 Z">
+          </path>
+          <g id="g2" transform="translate(10.594096,5.1143911)">
+            <g id="path2" transform="translate(-22.649446,-26.667897)" />
+          </g>
+        </g>
+      </svg>
     </a>
     <a href="/#" kll-ctrl="link" data-text class="text-xs dark:text-rd-sagwa_young"></a>
   </div>

templates/sections.html

@@ -1,5 +1,3 @@
 <template id="sections">
-    <div class="flex gap-3 flex-wrap mx-auto min-w-[50dvw] max-w-[800px]">
-        <div kll-tc="returnButton" class="w-full"></div>
-    </div>
+    <div class="flex gap-3 flex-wrap mx-auto min-w-[50dvw] max-w-[800px]"></div>
 </template>

utils/displayReturnBtn.js

@@ -0,0 +1,11 @@
+import { kll } from '../main'
+
+export function displayReturnBtn() {
+  const returnButtonEl = document.querySelector('#return_button')
+  if (!returnButtonEl) return
+  const { route } = kll.parseRoute()
+
+  if (route.match(/category|ressource/))
+    returnButtonEl.classList.remove('hidden')
+  else returnButtonEl.classList.add('hidden')
+}