From 9fb507a6ffa4f42c69e3a8b49d40ed8fc79552e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miko=C5=82aj=20Dalecki?= <mikdal_opensource@outlook.com>
Date: Wed, 18 May 2022 23:06:12 +0200
Subject: [PATCH] First idea to add inline toc

---
 assets/scss/grid.scss                             |  2 +-
 assets/scss/partials/layout/article.scss          | 15 +++++++++++++++
 layouts/partials/article/components/content.html  |  2 ++
 .../partials/article/components/toc-inline.html   |  9 +++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/article/components/toc-inline.html

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index 84967ef..97e5a88 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -10,7 +10,7 @@
         max-width: var(--right-sidebar-max-width);
 
         /// Display right sidebar when min-width: lg
-        @include respond(lg) {
+        @include respond(xl) {
             display: flex;
         }
     }
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index d789e10..8877c8e 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -373,6 +373,21 @@
         }
     }
 
+    .toc--inline {
+        background-color: rgb(241, 241, 241); 
+        margin-left: calc((var(--card-padding)) * -1); 
+        margin-right: calc((var(--card-padding)) * -1); 
+        padding-left: var(--card-padding);
+        padding-right: var(--card-padding);
+        
+        padding-top: var(--card-padding);
+        padding-bottom: var(--card-padding);
+
+        @include respond(xl) {
+            display: none;
+        }
+    }
+
     /// Negative margins
     blockquote,
     figure,
diff --git a/layouts/partials/article/components/content.html b/layouts/partials/article/components/content.html
index 61e536c..e3a2da4 100644
--- a/layouts/partials/article/components/content.html
+++ b/layouts/partials/article/components/content.html
@@ -1,4 +1,6 @@
 <section class="article-content">
+    {{ partial "article/components/toc-inline" . }}
+
     <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
     {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
     {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
diff --git a/layouts/partials/article/components/toc-inline.html b/layouts/partials/article/components/toc-inline.html
new file mode 100644
index 0000000..1ffdfc7
--- /dev/null
+++ b/layouts/partials/article/components/toc-inline.html
@@ -0,0 +1,9 @@
+{{ if (.Scratch.Get "TOCEnabled") }}
+<section class="toc toc--inline">
+    <h2 class="">{{ T "article.tableOfContents" }}</h2>
+    <div class="" >
+        {{ .TableOfContents }}
+
+    </div>
+</section>
+{{ end }}
\ No newline at end of file