Convert to Blazor (#6)

Convert existing progress to Blazor on client and server

src/JobsJobsJobs/Client/Shared/MainLayout.razor

@@ -0,0 +1,26 @@
+@inherits LayoutComponentBase
+@inject IJSRuntime js
+
+<div class="page">
+  <div class="sidebar">
+    <NavMenu />
+  </div>
+
+  <div class="main">
+    <div class="top-row px-4">
+      <em>(...and Jobs - <a class="audio" @onclick="PlayJobs">Let's Vote for Jobs!</a>)</em>
+    </div>
+
+    <div class="content px-4">
+      @Body
+    </div>
+    <audio id="pelosijobs">
+      <source src="/audio/pelosi-jobs.mp3">
+    </audio>
+
+  </div>
+</div>
+
+@code {
+    async void PlayJobs() => await js.InvokeVoidAsync("Audio.play", "pelosijobs");
+}

src/JobsJobsJobs/Client/Shared/MainLayout.razor.css

@@ -0,0 +1,71 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, darkgreen 0%, green 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+    color: rgba(0, 0, 0, .5);
+}
+
+    .top-row ::deep a, .top-row .btn-link {
+        white-space: nowrap;
+        /* margin-left: 1.5rem; */
+    }
+
+    .top-row a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row a, .top-row .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .main > div {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

src/JobsJobsJobs/Client/Shared/NavMenu.razor

@@ -0,0 +1,91 @@
+@inject AppState state
+@inject NavigationManager nav
+@implements IDisposable
+ 
+<div class="top-row pl-4 navbar navbar-dark">
+  <a class="navbar-brand" href="">Jobs, Jobs, Jobs</a>
+  <button class="navbar-toggler" @onclick="ToggleNavMenu">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+  <ul class="nav flex-column">
+    <li class="nav-item px-3">
+      <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+        <span class="oi oi-home" aria-hidden="true"></span> Home
+      </NavLink>
+    </li>
+    @if (state.User == null)
+    {
+      <li class="nav-item px-3">
+        <a class="nav-link" href="@AuthUrl">
+          <span class="oi oi-account-login" aria-hidden="true"></span> Log On
+        </a>
+      </li>
+    }
+    else
+    {
+      <li class="nav-item px-3">
+        <NavLink class="nav-link" href="/citizen/dashboard">
+          <span class="oi oi-dashboard" aria-hidden="true"></span> Dashboard
+        </NavLink>
+      </li>
+      <li class="nav-item px-3">
+        <NavLink class="nav-link" href="/citizen/profile">
+          <span class="oi oi-spreadsheet" aria-hidden="true"></span> Profile
+        </NavLink>
+      </li>
+      <li class="nav-item px-3">
+        <NavLink class="nav-link" href="counter">
+          <span class="oi oi-plus" aria-hidden="true"></span> Log Off
+        </NavLink>
+      </li>
+    }
+  </ul>
+</div>
+
+@code {
+
+    protected override void OnInitialized()
+    {
+      base.OnInitialized();
+      state.OnChange += StateHasChanged;
+    }
+
+    /// <summary>
+    /// The client ID for Jobs, Jobs, Jobs at No Agenda Social
+    /// </summary>
+    // TODO: move to config
+    private readonly string _clientId = "k_06zlMy0N451meL4AqlwMQzs5PYr6g3d2Q_dCT-OjU";
+
+    /// <summary>
+    /// The authorization URL to which the user should be directed
+    /// </summary>
+    private string AuthUrl
+    {
+      get
+      {
+        var client = $"client_id={_clientId}";
+        var scope = "scope=read:accounts";
+        var redirect = $"redirect_uri=https://{new Uri(nav.Uri).Authority}/citizen/authorized";
+        var respType = "response_type=code";
+        // TODO: move NAS base URL to config
+        return $"https://noagendasocial.com/oauth/authorize?{client}&{scope}&{redirect}&{respType}";
+      }
+    }
+
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+      collapseNavMenu = !collapseNavMenu;
+    }
+
+    public void Dispose()
+    {
+      state.OnChange -= StateHasChanged;
+    }
+}

src/JobsJobsJobs/Client/Shared/NavMenu.razor.css

@@ -0,0 +1,62 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.25);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+}