mmcghen/IKnowThem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NavBar layout achieved

Browse Source
This commit is contained in:
Michael McGhen
2025-08-25 14:03:24 -04:00
parent 7de11a5340
commit 7c88bf9909
4 changed files with 337 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MovieActorLookup/Components/Layout/MainLayout.razor
+107 -6
View File
@@ -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>
MovieActorLookup/Components/Layout/NavMenu.razor
+99 -32
View File
@@ -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>