diff --git a/SessionZeroClient/Components/AccountPage.razor b/SessionZeroClient/Components/AccountPage.razor new file mode 100644 index 0000000..4641b0b --- /dev/null +++ b/SessionZeroClient/Components/AccountPage.razor @@ -0,0 +1,4 @@ + +

Account

+ +

Welcome back @Data.UserName

\ No newline at end of file diff --git a/SessionZeroClient/Components/AccountPage.razor.cs b/SessionZeroClient/Components/AccountPage.razor.cs new file mode 100644 index 0000000..f030a8c --- /dev/null +++ b/SessionZeroClient/Components/AccountPage.razor.cs @@ -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; } +} \ No newline at end of file diff --git a/SessionZeroClient/Components/Navigation.razor.css b/SessionZeroClient/Components/AccountPage.razor.css similarity index 100% rename from SessionZeroClient/Components/Navigation.razor.css rename to SessionZeroClient/Components/AccountPage.razor.css diff --git a/SessionZeroClient/Components/Navigation.razor b/SessionZeroClient/Components/Navigation.razor deleted file mode 100644 index b3cf6b4..0000000 --- a/SessionZeroClient/Components/Navigation.razor +++ /dev/null @@ -1,5 +0,0 @@ - - -@code { - -} \ No newline at end of file diff --git a/SessionZeroClient/Components/Navigation.razor.cs b/SessionZeroClient/Components/Navigation.razor.cs deleted file mode 100644 index efd6501..0000000 --- a/SessionZeroClient/Components/Navigation.razor.cs +++ /dev/null @@ -1,7 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace SessionZeroClient.Components; - -public partial class Navigation : ComponentBase -{ -} \ No newline at end of file diff --git a/SessionZeroClient/PageData/AccountPageData.cs b/SessionZeroClient/PageData/AccountPageData.cs new file mode 100644 index 0000000..cbe1d4b --- /dev/null +++ b/SessionZeroClient/PageData/AccountPageData.cs @@ -0,0 +1,6 @@ +namespace SessionZeroClient.PageData; + +public class AccountPageData +{ + public string UserName { get; set; } +} \ No newline at end of file diff --git a/SessionZeroClient/Pages/Home.razor b/SessionZeroClient/Pages/Home.razor index 5aa3541..7ce01df 100644 --- a/SessionZeroClient/Pages/Home.razor +++ b/SessionZeroClient/Pages/Home.razor @@ -3,4 +3,34 @@ SessionZero - Home - \ No newline at end of file + +
+
+
+ +
+
SessionZero
+ +
+ +
+ + +
+ @_state +
+
+
+ \ No newline at end of file diff --git a/SessionZeroClient/Pages/Home.razor.cs b/SessionZeroClient/Pages/Home.razor.cs new file mode 100644 index 0000000..bcc1d3c --- /dev/null +++ b/SessionZeroClient/Pages/Home.razor.cs @@ -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(); + } +} \ No newline at end of file diff --git a/SessionZeroClient/wwwroot/css/main.css b/SessionZeroClient/wwwroot/css/main.css index 73fb60c..436cba5 100644 --- a/SessionZeroClient/wwwroot/css/main.css +++ b/SessionZeroClient/wwwroot/css/main.css @@ -10,4 +10,125 @@ 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; } \ No newline at end of file