NavBar layout achieved

2025-08-25 14:03:24 -04:00
parent 7de11a5340
commit 7c88bf9909
4 changed files with 337 additions and 79 deletions
@@ -5,12 +5,8 @@
        <NavMenu />
    </div>

-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
+    <main class="main-content">
+        <article class="content">
            @Body
        </article>
    </main>
@@ -21,3 +17,108 @@
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
 </div>
+
+
+<style>
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+
+    .page {
+        display: flex;
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    .sidebar {
+        width: 250px;
+        background: #ffffff;
+        border-right: 1px solid rgba(0, 0, 0, 0.06);
+        position: relative;
+        z-index: 100;
+    }
+
+    .main-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        width: 100%;
+    }
+
+    .top-row {
+        background: rgba(255, 255, 255, 0.95);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 3.5rem;
+        padding: 0 24px;
+    }
+
+        .top-row a {
+            color: #6c757d;
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 14px;
+            transition: color 0.2s ease;
+        }
+
+            .top-row a:hover {
+                color: #667eea;
+            }
+
+    .content {
+        flex: 1;
+        padding: 24px;
+        overflow-y: auto;
+        background: #f5f5f5; /* Optional: for contrast */
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    /* Responsive tweaks */
+    @@media (max-width: 768px) {
+        .sidebar
+
+    {
+        width: 200px;
+    }
+
+    .top-row {
+        padding: 0 16px;
+        height: 3rem;
+    }
+
+    .content {
+        padding: 16px;
+    }
+
+    }
+
+    @@media (max-width: 480px) {
+        .sidebar
+
+    {
+        width: 180px;
+    }
+
+    .top-row {
+        padding: 0 12px;
+    }
+
+        .top-row a {
+            font-size: 13px;
+        }
+
+    .content {
+        padding: 12px;
+    }
+
+    }
+</style>