Simplify navigation and improve page styling consistency.

Replaced the navigation structure for cleaner, more responsive design and added new links for better usability. Enhanced styling with scroll margin adjustments and removed unused "Server Side Sessions" card to declutter the interface.

Author: khalidabuhakmeh

src/Pages/Index.cshtml

@@ -12,7 +12,7 @@
 </noscript>
 <!-- End Google Tag Manager (noscript) -->
 
-<section class="text-center container border-bottom mb-3">
+<section class="text-center container border-bottom pb-3 mb-5">
     <div class="row py-lg-2">
         <div class="col-lg-6 col-md-8 mx-auto">
             <img src="duende-logo.svg" alt="Duende Software Logo" class="img-fluid w-75"/>
@@ -38,7 +38,7 @@
 </section>
 
 <div class="welcome-page">
-    <h2 id="features">Features</h2>
+    <h2 id="features" style="scroll-margin-top: 3em;">Features</h2>
     <p>
         This dashboard provides access to various IdentityServer functionalities for demo purposes only.
     </p>
@@ -91,15 +91,6 @@
                 </a>
             </div>
         </div>
-        <div class="card m-2" style="width: 18rem;">
-            <div class="card-body">
-                <h5 class="card-title">
-                    <i class="glyphicon glyphicon-paperclip"></i>
-                    Server Side Sessions
-                </h5>
-                <p class="card-text">View your current server side sessions.</p>
-            </div>
-        </div>
         <div class="card m-2" style="width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title">
@@ -117,7 +108,7 @@
         </div>
     </div>
 
-    <h2 id="references">References</h2>
+    <h2 id="references" style="scroll-margin-top: 3em;">References</h2>
     <p>To learn more about Duende products and how to implement them, check out our source repositories and samples.</p>
     <div class="d-flex align-content-between flex-wrap mb-3">
         <div class="card m-2" style="width: 18rem;">
@@ -169,7 +160,7 @@
         </div>
     </div>
 
-    <h2 id="demo-clients">Demo clients</h2>
+    <h2 id="demo-clients" style="scroll-margin-top: 3em;">Demo clients</h2>
     <p>
         You can use this demo server for different types of clients.
         Use the below configurations to work with them in your own demo applications
@@ -291,7 +282,7 @@
         }
     </div>
 
-    <h2 id="sample-apis">Sample APIs</h2>
+    <h2 id="sample-apis" style="scroll-margin-top: 3em;">Sample APIs</h2>
     <p>
         This demo server provides several sample API endpoints:
     </p>
@@ -306,7 +297,7 @@
         </li>
     </ul>
 
-    <h2 id="sample-keys">RSA key for JWT/JAR samples</h2>
+    <h2 id="sample-keys" style="scroll-margin-top: 3em;">RSA key for JWT/JAR samples</h2>
     <p>
         You can use the below RSA key for all clients requiring private key JWT authentication or JAR:
     </p>

src/Pages/Shared/_Nav.cshtml

@@ -8,31 +8,25 @@
     }
 }
 
-<div class="nav-page">
-    <nav class="navbar navbar-light bg-primary">
-
-        <div class="container">
-            <div class="row">
-                <a href="~/" class="navbar-brand">
-                    <img src="~/duende-white.svg" class="icon-banner" alt="Duende IdentityServer"/>
-                    <span class="text-white">IdentityServer</span>
-                    <small class="text-white-50 font-italic">(demo.duendesoftware.com)</small>
-                </a>
-
-                @if (!string.IsNullOrWhiteSpace(name))
-                {
-                    <ul class="navbar-nav mr-auto">
-                        <li class="nav-item dropdown">
-                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">@name <b
-                                    class="caret"></b></a>
-
-                            <div class="dropdown-menu">
-                                <a class="dropdown-item" asp-page="/Account/Logout/Index">Logout</a>
-                            </div>
-                        </li>
-                    </ul>
-                }
-            </div>
-        </div>
-    </nav>
-</div>
+<nav class="site-header sticky-top py-1 bg-primary">
+    <div class="container d-flex flex-column flex-md-row justify-content-between">
+        <a href="~/" class="navbar-brand py-2 d-md-inline-block">
+            <img src="~/duende-white.svg" class="icon-banner" alt="Duende IdentityServer"/>
+            <span class="text-white">IdentityServer</span>
+            <small class="text-white-50 font-italic">(demo.duendesoftware.com)</small>
+        </a>
+        <a class="text-white py-3 d-none d-md-inline-block" href="/#features">Features</a>
+        <a class="text-white py-3 d-none d-md-inline-block" href="/#references">References</a>
+        <a class="text-white py-3 d-none d-md-inline-block" href="/#demo-clients">Clients</a>
+        <a class="text-white py-3 d-none d-md-inline-block" href="/#sample-apis">APIs</a>
+        <a class="text-white py-3 d-none d-md-inline-block" href="/#sample-keys">Keys</a>
+        @if (!string.IsNullOrWhiteSpace(name))
+        {
+            <a class="text-white py-3 d-md-inline-block" asp-page="/Account/Logout/Index">
+                <span class="font-weight-bold">@name</span>
+                <span class="text-white-50 font-italic">Logout</span>
+                <i class="glyphicon glyphicon-log-out"></i>
+            </a>
+        }
+    </div>
+</nav>