feat(docs): adding navigation structure

Author: Jonnx

public/css/app.css

@@ -957,6 +957,15 @@ video {
 .-mt-4 {
   margin-top: -1rem;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .block {
   display: block;
 }
@@ -1179,6 +1188,18 @@ video {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

resources/views/components/docs-layout.blade.php

@@ -5,10 +5,23 @@
             <div class="md:grid grid-cols-5 gap-8">
                 {{-- DOCS NAVIGATION --}}
                 <div>
-                    <a href="/documentation" class="block">Getting Started</a>
-                    <a href="/license" class="block">License</a>
-                    <a href="/terms" class="block">Terms of Service</a>
-                    <a href="/privacy" class="block">Privacy Policy</a>
+                    <div class="mb-6">
+                        <a href="/documentation" class="block">Getting Started</a>
+                    </div>
+
+                    <div class="mb-6">
+                        <div class="text-black text-sm text-slate-300 mb-2">Integrations</div>
+                        <a href="/documentation/integrations#bing-maps" class="block">Bing Maps</a>
+                        <a href="/documentation/integrations#google-maps" class="block mb-1">Google Maps</a>
+                        <a href="/documentation/integrations#mapbox" class="block">Mapbox</a>
+                    </div>
+
+                    <div class="mb-6">
+                        <div class="text-black text-sm text-slate-300 mb-2">Legal</div>
+                        <a href="/license" class="block mb-1">License</a>
+                        <a href="/terms" class="block mb-1">Terms of Service</a>
+                        <a href="/privacy" class="block">Privacy Policy</a>
+                    </div>
                 </div>
 
                 {{-- DOCS CONTENT --}}