From d3fa62510a44f2fa9c29d0c057337dd0a75f0350 Mon Sep 17 00:00:00 2001
From: Sayo <75541866+SaySayo@users.noreply.github.com>
Date: Sat, 21 Oct 2023 13:02:50 +0100
Subject: [PATCH] Collapse tabs into breadcrumb for mobile view on learn area
 (#1541)

---
 .../components/learn_components.eml           |  2 +-
 src/ocamlorg_frontend/css/styles.css          |  1 -
 .../layouts/learn_layout.eml                  | 45 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/ocamlorg_frontend/components/learn_components.eml b/src/ocamlorg_frontend/components/learn_components.eml
index f0d703871d..a1b3fb6389 100644
--- a/src/ocamlorg_frontend/components/learn_components.eml
+++ b/src/ocamlorg_frontend/components/learn_components.eml
@@ -192,5 +192,5 @@ let lang_manual_banner =
       <a href="<%s Url.manual %>" class="w-full md:w-auto mt-5 py-2 px-24 bg-default text-sm rounded-sm items-center text-center text-primary-700 sm:px-20 sm:text-md font-medium leading-7 md:text-lg">Take Me There</a>
     </div>
     <div class="min-w-[200px] min-h-[200px] overflow-hidden rounded-full bg-cover bg-center bg-no-repeat md:min-w-[240px] md:min-h-[240px]" style="background-image: url('../img/home/ocaml_camel.png')">
+    </div>
   </div>
-
diff --git a/src/ocamlorg_frontend/css/styles.css b/src/ocamlorg_frontend/css/styles.css
index f70253d1d9..2c46da4539 100644
--- a/src/ocamlorg_frontend/css/styles.css
+++ b/src/ocamlorg_frontend/css/styles.css
@@ -255,4 +255,3 @@ details summary svg svg {
 summary::-webkit-details-marker {
   display: none;
 }
-
diff --git a/src/ocamlorg_frontend/layouts/learn_layout.eml b/src/ocamlorg_frontend/layouts/learn_layout.eml
index 9dab48580d..1b52182243 100644
--- a/src/ocamlorg_frontend/layouts/learn_layout.eml
+++ b/src/ocamlorg_frontend/layouts/learn_layout.eml
@@ -14,7 +14,50 @@ let tabs
       <%s title %>
     </a>
   in
-    <div class="bg-text-title">
+  let url_of_current 
+  (current : section) = match current with
+    | Overview -> Url.learn
+    | GetStarted -> Url.learn_get_started
+    | Language -> Url.learn_language
+    | Platform -> Url.platform
+    | Guides -> Url.learn_guides
+    | Exercises -> Url.exercises
+    | Books -> Url.books
+  in
+  let section_to_string = function
+    | Overview -> "Overview"
+    | GetStarted -> "Get Started"
+    | Language -> "Language"
+    | Platform -> "Platform"
+    | Guides -> "Guides"
+    | Exercises -> "Exercises"
+    | Books -> "Books"
+  in
+  let breadcrumb_options current =
+    let (sections : section list) = [Overview; GetStarted; Language; Platform; Guides; Exercises; Books] in
+    let selected_option section = if section = current then "selected" else "" in
+    let options_list option = 
+        <option value="<%s url_of_current option %>" <%s selected_option option %>>
+          <%s section_to_string option %>
+        </option> 
+    in
+    <nav aria-label="breadcrumbs" class="px-4 flex text-white bg-text-title md:hidden">
+      <ul>
+        <li class="inline-block"> 
+            <a href="<%s url_of_current Overview %>" class="flex items-center px-2 py-2 border-transparent border-2 border-b-4"> Learn 
+              <span> <%s! Icons.chevron_right "w-3 h-3 ml-2" %> </span> </a>
+        </li>
+        <li class="inline-block">
+            <select onchange="location = this.value;" class="appearance-none bg-transparent border-2 border-b-4 bg-none font-bold border-none w-auto p-0 m-0 cursor-pointer focus:outline-none focus:ring-0">
+             <%s! sections |> List.map options_list |> String.concat "" %>
+            </select>
+            <span class="text-orange-700 cursor-pointer">&#x25BE;</span>
+        </li>
+      </ul>
+    </nav>
+  in
+    <%s! breadcrumb_options current %>
+    <div class="bg-text-title hidden md:flex">
       <nav class="container-fluid wide flex flex-wrap">
         <%s! link ~href:Url.learn ~title:"Overview" ~current:(current = Overview) %>