From 7c88bf990910b65611bc9ec3c763a63e9f7fd224 Mon Sep 17 00:00:00 2001
From: Mike McGhen <mcghenmike@gmail.com>
Date: Mon, 25 Aug 2025 14:03:24 -0400
Subject: [PATCH] NavBar layout achieved

---
 .../Components/Layout/MainLayout.razor        | 113 +++++++++++-
 .../Components/Layout/NavMenu.razor           | 131 ++++++++++----
 .../Components/Pages/SearchShows.razor        | 166 +++++++++++++-----
 MovieActorLookup/wwwroot/app.css              |   6 +
 4 files changed, 337 insertions(+), 79 deletions(-)

diff --git a/MovieActorLookup/Components/Layout/MainLayout.razor b/MovieActorLookup/Components/Layout/MainLayout.razor
index 5a24bb1..905174f 100644
--- a/MovieActorLookup/Components/Layout/MainLayout.razor
+++ b/MovieActorLookup/Components/Layout/MainLayout.razor
@@ -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>
diff --git a/MovieActorLookup/Components/Layout/NavMenu.razor b/MovieActorLookup/Components/Layout/NavMenu.razor
index 93cb4ed..b27deaa 100644
--- a/MovieActorLookup/Components/Layout/NavMenu.razor
+++ b/MovieActorLookup/Components/Layout/NavMenu.razor
@@ -1,39 +1,106 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">I Know Them!</a>
-    </div>
-</div>
+@* NavMenu.razor *@
+<div class="nav-vertical">
+    <!-- Brand -->
+    <a class="nav-brand" href="/">
+        <div class="brand-icon">🎬</div>
+        <div class="brand-text">I Know Them!</div>
+    </a>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="searchmovies">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-reels" viewBox="0 0 16 16">
-                    <path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0M1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0" />
-                    <path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm6 8.73V7.27l-3.5 1.555v4.35zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1" />
-                    <path d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0" />
-                </svg> Search Movies
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="searchshows">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tv" viewBox="0 0 16 16">
-                    <path d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M13.991 3l.024.001a1.5 1.5 0 0 1 .538.143.76.76 0 0 1 .302.254c.067.1.145.277.145.602v5.991l-.001.024a1.5 1.5 0 0 1-.143.538.76.76 0 0 1-.254.302c-.1.067-.277.145-.602.145H2.009l-.024-.001a1.5 1.5 0 0 1-.538-.143.76.76 0 0 1-.302-.254C1.078 10.502 1 10.325 1 10V4.009l.001-.024a1.5 1.5 0 0 1 .143-.538.76.76 0 0 1 .254-.302C1.498 3.078 1.675 3 2 3zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2" />
-                </svg> TV Show Search
-            </NavLink>
-        </div>
+    <!-- Navigation Links -->
+    <nav class="nav-links">
+        <NavLink href="/" class="nav-link" Match="NavLinkMatch.All">
+            <span class="nav-icon">🏠</span>
+            <span class="nav-text">Home</span>
+        </NavLink>
+        <NavLink href="/searchmovies" class="nav-link">
+            <span class="nav-icon">🎭</span>
+            <span class="nav-text">Movies</span>
+        </NavLink>
+        <NavLink href="/searchshows" class="nav-link">
+            <span class="nav-icon">📺</span>
+            <span class="nav-text">TV Shows</span>
+        </NavLink>
     </nav>
 </div>
 
+<style>
+    .nav-vertical {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        width: 100%;
+        padding: 16px;
+        background: rgba(255, 255, 255, 0.95);
+        border-right: 1px solid rgba(0, 0, 0, 0.06);
+        box-sizing: border-box;
+    }
 
+    .nav-brand {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 32px;
+        text-decoration: none;
+    }
 
+    .brand-icon {
+        font-size: 24px;
+    }
 
+    .brand-text {
+        font-size: 18px;
+        font-weight: 700;
+        color: #1a1a1a;
+    }
+
+    .nav-links {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .nav-link {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        text-decoration: none;
+        border-radius: 6px;
+        color: #6c757d;
+        font-size: 15px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+
+        .nav-link:hover {
+            background: rgba(0, 0, 0, 0.04);
+            color: #495057;
+        }
+
+        .nav-link.active {
+            background: rgba(102, 126, 234, 0.1);
+            color: #667eea;
+            font-weight: 600;
+        }
+
+    .nav-icon {
+        font-size: 16px;
+    }
+
+    .nav-text {
+        white-space: nowrap;
+    }
+
+    @@media (max-width: 768px) {
+        .nav-vertical
+
+    {
+        padding: 12px;
+    }
+
+    .nav-text {
+        font-size: 14px;
+    }
+
+    }
+</style>
diff --git a/MovieActorLookup/Components/Pages/SearchShows.razor b/MovieActorLookup/Components/Pages/SearchShows.razor
index a4c943d..839ae33 100644
--- a/MovieActorLookup/Components/Pages/SearchShows.razor
+++ b/MovieActorLookup/Components/Pages/SearchShows.razor
@@ -1,6 +1,7 @@
 @page "/searchshows"
 @using MovieActorLookup.Models
 @inject ShowService ShowService
+@inject IJSRuntime JSRuntime
 @rendermode InteractiveServer
 
 <div class="search-container">
@@ -77,6 +78,12 @@
                         <div class="card-content">
                             <h5 class="show-title">@_matchedShow.ShowTitle</h5>
                             <div class="character-name">as @_matchedShow.CharacterName</div>
+                            @if (!string.IsNullOrEmpty(_matchedShow.Overview?.Trim()))
+                            {
+                                <p class="show-overview expanded">
+                                    @_matchedShow.Overview.Trim()
+                                </p>
+                            }
                             <div class="air-date">First aired: @_matchedShow.FirstAirDate</div>
                         </div>
                     </div>
@@ -115,7 +122,17 @@
                                     <div class="character-name">as @show.CharacterName</div>
                                     @if (!string.IsNullOrEmpty(show.Overview))
                                     {
-                                        <p class="show-overview">@(show.Overview.Length > 120 ? show.Overview.Substring(0, 120) + "..." : show.Overview)</p>
+                                        <div class="overview-container">
+                                            <p class="show-overview @(IsOverviewExpanded(show.ShowTitle) ? "expanded" : "truncated")">
+                                                @show.Overview
+                                            </p>
+                                            @if (show.Overview.Length > 150)
+                                            {
+                                                <button class="read-more-btn" @onclick="() => ToggleOverview(show.ShowTitle)">
+                                                    @(IsOverviewExpanded(show.ShowTitle) ? "Show less" : "Read more")
+                                                </button>
+                                            }
+                                        </div>
                                     }
                                     <div class="air-date">@show.FirstAirDate</div>
                                 </div>
@@ -254,22 +271,8 @@
         border: 2px solid rgba(255,255,255,0.3);
         border-top: 2px solid white;
         border-radius: 50%;
-        animation: spin 1s linear infinite;
     }
 
-/*     keyframes spin {
-        0%
-
-    {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-
-    } */
-
     .loading-state, .welcome-state, .no-results {
         text-align: center;
         padding: 3rem 2rem;
@@ -288,31 +291,8 @@
         height: 8px;
         background: #667eea;
         border-radius: 50%;
-        animation: bounce 1.4s ease-in-out infinite both;
     }
 
-        .loading-dot:nth-child(1) {
-            animation-delay: -0.32s;
-        }
-
-        .loading-dot:nth-child(2) {
-            animation-delay: -0.16s;
-        }
-
-/*     keyframes bounce {
-        0%, 80%, 100%
-
-
-        {
-            transform: scale(0);
-        }
-
-        40% {
-            transform: scale(1);
-        }
-
-    } */
-
     .welcome-icon, .no-results-icon {
         font-size: 3rem;
         margin-bottom: 1rem;
@@ -376,7 +356,7 @@
 
     .shows-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
         gap: 1.5rem;
         margin-bottom: 2rem;
     }
@@ -407,14 +387,16 @@
 
     .poster-container {
         position: relative;
-        height: 200px;
+        width: 100%;
+        aspect-ratio: 2/3;
         overflow: hidden;
     }
 
     .poster-image {
         width: 100%;
         height: 100%;
-        object-fit: cover;
+        object-fit: contain;
+        background-color: #f8f9fa;
         transition: transform 0.3s ease;
     }
 
@@ -460,6 +442,34 @@
         margin: 0.75rem 0;
     }
 
+        .show-overview.truncated {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .show-overview.expanded {
+            display: block;
+        }
+
+    .read-more-btn {
+        background: none;
+        border: none;
+        color: #667eea;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 0.25rem 0;
+        margin-top: 0.5rem;
+        text-decoration: underline;
+        transition: color 0.3s ease;
+    }
+
+        .read-more-btn:hover {
+            color: #4c63d2;
+        }
+
     .air-date {
         color: #999;
         font-size: 0.85rem;
@@ -495,12 +505,82 @@
     }
 </style>
 
+<script>
+    window.startAnimations = () => {
+        console.log('Starting animations...');
+
+        // Spinner animation
+        const spinners = document.querySelectorAll('.spinner');
+        console.log('Found spinners:', spinners.length);
+
+        spinners.forEach((spinner, index) => {
+            let rotation = 0;
+            const animate = () => {
+                rotation += 6;
+                spinner.style.transform = `rotate(${rotation}deg)`;
+                if (document.body.contains(spinner)) {
+                    requestAnimationFrame(animate);
+                }
+            };
+            animate();
+        });
+
+        // Loading dots bounce animation
+        const loadingDots = document.querySelectorAll('.loading-dot');
+        console.log('Found loading dots:', loadingDots.length);
+
+        loadingDots.forEach((dot, index) => {
+            let scale = 0;
+            let direction = 1;
+            const delay = index * 300;
+
+            setTimeout(() => {
+                const animate = () => {
+                    scale += direction * 0.1;
+                    if (scale >= 1) {
+                        scale = 1;
+                        direction = -1;
+                    } else if (scale <= 0.2) {
+                        scale = 0.2;
+                        direction = 1;
+                    }
+
+                    dot.style.transform = `scale(${scale})`;
+
+                    if (document.body.contains(dot)) {
+                        requestAnimationFrame(animate);
+                    }
+                };
+                animate();
+            }, delay);
+        });
+    };
+</script>
+
 @code {
     private string _tvTitle = "";
     private string _characterName = "";
     private Actor _actor;
     private TvCharacter _matchedShow;
     private bool _isSearching = false;
+    private HashSet<string> _expandedOverviews = new HashSet<string>();
+
+    private bool IsOverviewExpanded(string showTitle)
+    {
+        return _expandedOverviews.Contains(showTitle);
+    }
+
+    private void ToggleOverview(string showTitle)
+    {
+        if (_expandedOverviews.Contains(showTitle))
+        {
+            _expandedOverviews.Remove(showTitle);
+        }
+        else
+        {
+            _expandedOverviews.Add(showTitle);
+        }
+    }
 
     private async Task SearchForActorAndCharacters()
     {
@@ -512,6 +592,10 @@
         _matchedShow = null;
         StateHasChanged();
 
+        // Start animations after a small delay to ensure DOM is ready
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("startAnimations");
+
         try
         {
             var shows = await ShowService.GetShowsByTitle(_tvTitle);
diff --git a/MovieActorLookup/wwwroot/app.css b/MovieActorLookup/wwwroot/app.css
index 9bd14ab..14c42a0 100644
--- a/MovieActorLookup/wwwroot/app.css
+++ b/MovieActorLookup/wwwroot/app.css
@@ -52,6 +52,12 @@ h1:focus {
     border-color: #929292;
 }
 
+.page .content {
+    padding-top: 24px !important;
+    margin: 0 auto !important;
+    max-width: 1200px !important;
+}
+
 /*movie card styling*/
 
 .movie-poster {