From 3c1b92772edbfb48718ecf63fc71b4962dc57a53 Mon Sep 17 00:00:00 2001
From: Salih <salihozkara00@gmail.com>
Date: Mon, 12 Feb 2024 14:11:42 +0300
Subject: [PATCH] Add design

---
 ...ng-Started-Create-Solution-Single-Layer.md | 20 ++++++++---
 .../HtmlConverting/DocumentNavigationsDto.cs  |  6 ++++
 .../Pages/Documents/Project/Index.cshtml      | 24 +++++++++++++
 .../Pages/Documents/Project/Index.css.map     |  1 +
 .../Pages/Documents/Project/Index.min.css.map |  1 +
 .../Pages/Documents/Project/index.css         | 34 ++++++++++++++++---
 .../Pages/Documents/Project/index.min.css     |  2 +-
 .../Pages/Documents/Project/index.scss        | 29 +++++++++++++++-
 8 files changed, 106 insertions(+), 11 deletions(-)
 create mode 100644 modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.css.map
 create mode 100644 modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.min.css.map

diff --git a/docs/en/Getting-Started-Create-Solution-Single-Layer.md b/docs/en/Getting-Started-Create-Solution-Single-Layer.md
index 8c4a6d0d88..32021dfa0e 100644
--- a/docs/en/Getting-Started-Create-Solution-Single-Layer.md
+++ b/docs/en/Getting-Started-Create-Solution-Single-Layer.md
@@ -8,6 +8,20 @@
 }
 ````
 
+````json
+//[doc-nav]
+{
+  "Next": {
+    "Name": "Running the solution",
+    "Path": "Getting-Started-Running-Solution-Single-Layer"
+  },
+  "Previous": {
+    "Name": "Introduction",
+    "Path": "Introduction"
+  }
+}
+````
+
 > This document assumes that you prefer to use **{{ UI_Value }}** as the UI framework and **{{ DB_Value }}** as the database provider. For other options, please change the preference on top of this document.
 
 ## Create a New Project
@@ -45,8 +59,4 @@ Configure<AbpUnitOfWorkDefaultOptions>(options =>
 
 > Or you can delete that code since `Auto` is already the default behavior.
 
-{{ end }}
-
-## Next Step
-
-* [Running the solution](Getting-Started-Running-Solution-Single-Layer.md)
\ No newline at end of file
+{{ end }}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/HtmlConverting/DocumentNavigationsDto.cs b/modules/docs/src/Volo.Docs.Web/HtmlConverting/DocumentNavigationsDto.cs
index ccee9b5d18..d1f6335466 100644
--- a/modules/docs/src/Volo.Docs.Web/HtmlConverting/DocumentNavigationsDto.cs
+++ b/modules/docs/src/Volo.Docs.Web/HtmlConverting/DocumentNavigationsDto.cs
@@ -1,7 +1,13 @@
+using System;
+
 namespace Volo.Docs.HtmlConverting;
 
 public class DocumentNavigationsDto
 {
     public DocumentNavigationDto Previous { get; set; }
     public DocumentNavigationDto Next { get; set; }
+    
+    public bool HasPrevious => Previous?.Path.IsNullOrEmpty() == false;
+    public bool HasNext => Next?.Path.IsNullOrEmpty() == false;
+    public bool HasValues => HasPrevious || HasNext;
 }
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 83f4c7a775..c2cb7f36b0 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -388,6 +388,30 @@
                                 </abp-alert>
                             }
                             @Html.Raw(Model.Document.Content)
+                            
+                            @if (Model.DocumentNavigationsDto.HasValues)
+                            {
+                                <hr/>
+                                <div class="navigation">
+                                    @if (Model.DocumentNavigationsDto.HasPrevious)
+                                    {
+                                        <a class="prev-link" href="@Model.CreateDocumentLink(Model.DocumentNavigationsDto.Previous.Path)">
+                                            <span class="desc">
+                                                <i class="fa fa-chevron-left"></i>
+                                                @L["Previous"]
+                                            </span>
+                                            <span class="title">@Model.DocumentNavigationsDto.Previous.Name</span>
+                                        </a>
+                                    }
+                                    @if (Model.DocumentNavigationsDto.HasNext)
+                                    {
+                                        <a class="next-link" href="@Model.CreateDocumentLink(Model.DocumentNavigationsDto.Next.Path)">
+                                            <span class="desc">@L["Next"]  <i class="fa fa-chevron-right"></i></span>
+                                            <span class="title">@Model.DocumentNavigationsDto.Next.Name</span>
+                                        </a>
+                                    }
+                                </div>
+                            }
                         </article>
 
                         <div id="crawler_link" style="display:none;">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.css.map
new file mode 100644
index 0000000000..1728ba3bb9
--- /dev/null
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACI;EACI;EACA;EACA;;;AAKJ;EACI;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA","file":"Index.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.min.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.min.css.map
new file mode 100644
index 0000000000..91bfad4b5b
--- /dev/null
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACI,8BACI,4BACA,4CACA,uBAKJ,+BACI,0CAIR,YACI,aACA,8BAEA,8CACI,qBACA,cAEA,0DACI,eACA,cACA,cAGJ,4DACI,gBACA,eACA,cAIR,uBACI,iBACA","file":"Index.min.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.css
index cd0ee8e064..bbbf271983 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.css
@@ -1,8 +1,34 @@
 .code-toolbar .line-highlight {
   margin-top: 1.5em !important;
   background: rgba(233, 237, 241, 0.34) !important;
-  padding: 1px !important; }
+  padding: 1px !important;
+}
 
-.input-group .input-group-text{
-    background-color: transparent!important;
-}
\ No newline at end of file
+.input-group .input-group-text {
+  background-color: transparent !important;
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+}
+.navigation .next-link, .navigation .prev-link {
+  display: inline-block;
+  max-width: 48%;
+}
+.navigation .next-link .desc, .navigation .prev-link .desc {
+  font-size: 16px;
+  color: #0D6EFD;
+  display: block;
+}
+.navigation .next-link .title, .navigation .prev-link .title {
+  font-weight: 600;
+  font-size: 18px;
+  color: #0B1621;
+}
+.navigation .next-link {
+  margin-left: auto;
+  text-align: right;
+}
+
+/*# sourceMappingURL=Index.css.map */
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.min.css
index 3f6ed60f02..89881222d8 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.min.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.min.css
@@ -1 +1 @@
-.code-toolbar .line-highlight{margin-top:1.5em !important;background:rgba(233,237,241,.34) !important;padding:1px !important;} .input-group .input-group-text{background-color: transparent!important;}
\ No newline at end of file
+.code-toolbar .line-highlight{margin-top:1.5em !important;background:rgba(233,237,241,.34) !important;padding:1px !important}.input-group .input-group-text{background-color:rgba(0,0,0,0) !important}.navigation{display:flex;justify-content:space-between}.navigation .next-link,.navigation .prev-link{display:inline-block;max-width:48%}.navigation .next-link .desc,.navigation .prev-link .desc{font-size:16px;color:#0d6efd;display:block}.navigation .next-link .title,.navigation .prev-link .title{font-weight:600;font-size:18px;color:#0b1621}.navigation .next-link{margin-left:auto;text-align:right}/*# sourceMappingURL=Index.min.css.map */
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss
index 384d025602..f941190741 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss
@@ -10,4 +10,31 @@
     .input-group-text{
         background-color: transparent!important;
     }
-}
\ No newline at end of file
+}
+
+.navigation {
+    display: flex;
+    justify-content: space-between;
+
+    .next-link, .prev-link {
+        display: inline-block;
+        max-width: 48%;
+
+        .desc {
+            font-size: 16px;
+            color: #0D6EFD;
+            display: block;
+        }
+
+        .title {
+            font-weight: 600;
+            font-size: 18px;
+            color: #0B1621;
+        }
+    }
+
+    .next-link {
+        margin-left: auto;
+        text-align: right;
+    }
+}