Bellsworne/SessionZeroClient
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main app screen, begin account screen

Browse Source
This commit is contained in:
Chris Bell 2025-06-01 23:07:24 -05:00
parent 2ffa4bcc21
commit db7d999f66
9 changed files with 211 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
SessionZeroClient/Components/AccountPage.razor Normal file
View File

@ -0,0 +1,4 @@
<h1>Account</h1>
<h3>Welcome back @Data.UserName</h3>

10
SessionZeroClient/Components/AccountPage.razor.cs Normal file
View File

@ -0,0 +1,10 @@
using Microsoft.AspNetCore.Components;
using SessionZeroClient.PageData;
namespace SessionZeroClient.Components;
public partial class AccountPage : ComponentBase
{
[Parameter]
public AccountPageData Data { get; set; }
}

0
SessionZeroClient/Components/Navigation.razor.css → SessionZeroClient/Components/AccountPage.razor.css
View File

5
SessionZeroClient/Components/Navigation.razor
View File

@ -1,5 +0,0 @@
<nav></nav>
@code {
}

7
SessionZeroClient/Components/Navigation.razor.cs
View File

@ -1,7 +0,0 @@
using Microsoft.AspNetCore.Components;
namespace SessionZeroClient.Components;
public partial class Navigation : ComponentBase
{
}

6
SessionZeroClient/PageData/AccountPageData.cs Normal file
View File

@ -0,0 +1,6 @@
namespace SessionZeroClient.PageData;
public class AccountPageData
{
public string UserName { get; set; }
}

32
SessionZeroClient/Pages/Home.razor
View File

@ -3,4 +3,34 @@
<PageTitle>SessionZero - Home</PageTitle>
<Navigation />
<body>
<div id="main-container">
<header>
<div class="logo-section">
<img class="logo-img" src="icon-512.png"/>
</div>
<div class="logo-text">SessionZero</div>
<nav>
<a>1</a>
<a>2</a>
<div class="user-avatar" @onclick="LoadAccountPage">
<img src="icon-192.png"/>
</div>
</nav>
</header>
<div id="main-content-wrapper">
<aside>
@* <button>1</button> *@
@* <button>2</button> *@
<a @onclick="() => { Console.WriteLine(100); }">Home</a>
<a @onclick="() => { Console.WriteLine(101); }">Home</a>
</aside>
<main>
@_state
</main>
</div>
</div>
</body>

39
SessionZeroClient/Pages/Home.razor.cs Normal file
View File

@ -0,0 +1,39 @@
using Microsoft.AspNetCore.Components;
using SessionZeroClient.Components;
using SessionZeroClient.PageData;
namespace SessionZeroClient.Pages;
public partial class Home : ComponentBase
{
private RenderFragment? _state;
private AccountPageData _data;
private void LoadAccountPage()
{
LoadPage(typeof(AccountPage));
}
private void LoadPage(Type pageType)
{
_state = builder =>
{
builder.OpenComponent(0, pageType);
builder.AddAttribute(1, "Data", _data);
builder.CloseComponent();
};
StateHasChanged();
}
protected override void OnInitialized()
{
_data = new()
{
UserName = "Hagrid",
};
//LoadAccountPage();
base.OnInitialized();
}
}

121
SessionZeroClient/wwwroot/css/main.css
View File

@ -11,3 +11,124 @@ html {
color: var(--text-color);
background-color: var(--background-color);
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--background-color);
}
#main-container {
width: 100%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--background-color);
border: black solid 3px;
padding: 1rem;
}
header .logo-section {
display: flex;
align-items: center;
margin-right: 0.75rem;
}
header .logo-svg {
width: 4rem;
height: 4rem;
}
header .logo-img {
width: 4rem;
height: 4rem;
}
header .logo-text {
font-size: 1.25rem;
font-weight: bold;
margin-left: 0.75rem;
}
header nav {
display: flex;
align-items: center;
gap: 1rem;
}
header a {
padding: 0.5rem 1rem;
background-color: var(--accent-color-blue-1);
border-radius: 0.4rem;
transition: background-color 0.2s ease-in-out;
cursor: pointer;
border: black solid 2px;
}
header a:hover {
background-color: var(--accent-color-blue-2);
}
header .user-avatar {
width: 3rem;
height: 3rem;
background-color: var(--background-color);
border-radius: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
border: black solid 2px;
}
header .user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9999px;
}
#main-content-wrapper {
flex-grow: 1;
display: flex;
}
aside {
width: 4rem;
background-color: var(--background-color);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
border-right: black solid 3px;
border-left: black solid 3px;
height: 100vh;
}
aside a {
padding: 0.5rem 1rem;
background-color: rgba(0,0,0,0);
border-radius: 0.4rem;
transition: background-color 0.2s ease-in-out;
border: black solid 2px;
}
aside a:hover {
background-color: var(--accent-color-blue-2);
cursor: pointer;
}
main {
flex: 1;
background-color: var(--background-color);
padding: 1.5rem;
overflow: auto;
}