progress

OpenBirchWebsite/Layout/MainLayout.razor

@@ -6,17 +6,17 @@
 <MudSnackbarProvider />
 <MudLayout>
     <MudAppBar Elevation="1">
-        <MudImage Width="50" Height="50" ObjectFit=ObjectFit.Fill Src="images/fi478h5fj45d1.webp" Alt="Logo" Elevation="25" Class="rounded-lg" />
+        <NavLink ActiveClass="d-flex align-center" href="/">
+            <MudImage Width="50" Height="50" ObjectFit=ObjectFit.Fill Src="images/fi478h5fj45d1.webp" Alt="Logo" Elevation="25" Class="rounded-lg" />
+        </NavLink>
         <MudText Typo="Typo.h5" Class="ml-3">OpenBirch</MudText>
         <MudSpacer />
-        <MudButton Variant="Variant.Text" Href="/eval" Class="pr-4">Eval demo</MudButton>
         <MudButton Variant="Variant.Text" Href="/download" Class="pr-4">Download</MudButton>
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.End" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.None" Elevation="2">
-        <NavMenu />
     </MudDrawer>
-    <MudMainContent Class="mt-16 pa-4">
+    <MudMainContent Style="height: 100vh;">
         @Body
     </MudMainContent>
 </MudLayout>

OpenBirchWebsite/Layout/NavMenu.razor

@@ -1,39 +0,0 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">OpenBirchWebsite</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
-
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <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="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
-</div>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-}

OpenBirchWebsite/Layout/NavMenu.razor.css

@@ -1,83 +0,0 @@
-.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;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.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.37);
-    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;
-    }
-    
-    .nav-scrollable {
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}

OpenBirchWebsite/Pages/Counter.razor

@@ -1,20 +0,0 @@
-@page "/counter"
-@using System.Runtime.InteropServices
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<MudButton Color="Color.Primary" Variant=" Variant.Filled" OnClick="test">Click me</MudButton>
-
-@code {
-    private int currentCount = 0;
-    [DllImport("counter")]
-    static extern int fact(int n);
-
-    public void test() {
-        currentCount = fact(10);
-    }
-}

OpenBirchWebsite/Pages/EvalComponent.razor

@@ -1,18 +0,0 @@
-@page "/eval"
-@inject IJSRuntime JSRuntime
-
-<h3>Eval Component</h3>
-
-<input id="inputText" @bind="InputText" placeholder="Enter text" />
-<button @onclick="RunEval">Evaluate</button>
-<div id="result">@Result</div>
-
-@code {
-    private string InputText { get; set; }
-    private string Result { get; set; }
-
-    private async Task RunEval()
-    {
-        Result = await JSRuntime.InvokeAsync<string>("runEval", InputText);
-    }
-}

OpenBirchWebsite/Pages/Home.razor

@@ -1,5 +1,6 @@
 @page "/"
 @inject IJSRuntime jsRuntime
+@inject NavigationManager nav
 
 <PageTitle>Home</PageTitle>
 
@@ -15,7 +16,7 @@
                     <MudText Align="Align.Start"> @((consoleHistory[temp].source == ConsoleSource.User) ? ">" : "#") @consoleHistory[temp].text</MudText>
                 }
             </div>
-            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick="()=>hasInteracted = true"></MudTextField>
+            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='()=>nav.NavigateTo("openbirch")'></MudTextField>
         </MudPaper>
     </div>
 </div>

OpenBirchWebsite/Pages/Home.razor.css

@@ -13,10 +13,4 @@
 .input-field {
     max-width: 400px;
     min-width: 300px;
-}
-
-.reverse-stack-direction {
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: column;
 }

OpenBirchWebsite/Pages/OpenBirch.razor

@@ -0,0 +1,20 @@
+@page "/openbirch"
+
+<div class="console-container reverse-stack-direction pa-4">
+    <div class="px-2 reverse-scroll-start overflow-auto">
+        <div>
+            @for (int i = 0; i < 100; i++)
+            {
+                int temp = i;
+                <MudText>test @temp</MudText>
+            }
+        </div>
+    </div>
+    <div>
+        <MudTextField @bind-Value="test" Variant="Variant.Outlined"></MudTextField>
+    </div>
+</div>
+
+@code {
+    public string test = "";
+}

OpenBirchWebsite/Pages/OpenBirch.razor.css

@@ -0,0 +1,13 @@
+.console-container {
+    height: 100%;
+    padding: 0;
+}
+
+.console-container > div:first-child {
+    background-color: #191724;
+}
+
+.reverse-scroll-start {
+    display: flex;
+    flex-direction: column-reverse;
+}

OpenBirchWebsite/Pages/Weather.razor

@@ -1,57 +0,0 @@
-@page "/weather"
-@inject HttpClient Http
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates fetching data from the server.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
-    }
-
-    public class WeatherForecast
-    {
-        public DateOnly Date { get; set; }
-
-        public int TemperatureC { get; set; }
-
-        public string? Summary { get; set; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-}

OpenBirchWebsite/wwwroot/css/app.css

@@ -101,3 +101,10 @@ a, .btn-link {
 code {
     color: #c02d76;
 }
+
+
+.reverse-stack-direction {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+}

OpenBirchWebsite/wwwroot/index.html

@@ -17,7 +17,7 @@
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 </head>
 
-<body style="background-color: #1a1a27">
+<body style="background-color: #1a1a27; padding: 0;">
     <div id="app">
         <svg class="loading-progress">
             <circle r="40%" cx="50%" cy="50%" />