updating blazor app

Author: robertovargash

Src/SamplesByPlatforms/Xceed.Blazor.Zip.Sample.zip

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

Src/SamplesByPlatforms/Xceed.Blazor.Zip.Sample/App.razor

@@ -1,23 +1,16 @@
 @inherits LayoutComponentBase
-
 <div class="page">
     <div class="sidebar">
         <NavMenu />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>            
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
         <article class="content px-4">
             @Body
         </article>
     </main>
 </div>
-
-<div id="blazor-error-ui">
-    An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
-</div>

Src/SamplesByPlatforms/Xceed.Blazor.Zip.Sample/Components/App.razor

@@ -27,28 +27,23 @@ main {
         text-decoration: none;
     }
 
-        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-            text-decoration: underline;
-        }
-
-        .top-row ::deep a:first-child {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
 
-@media (max-width: 640.98px) {
-    .sidebar {
-        background-image: linear-gradient(90deg, rgb(0, 0, 0) 0%, #FE671A 150%);
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
+@media (max-width: 640.98px) {
     .top-row {
-        background-image: linear-gradient(90deg, rgb(0, 0, 0) 0%, #FE671A 150%);
         justify-content: space-between;
     }
 
-        .top-row ::deep a, .top-row ::deep .btn-link {
-            margin-left: 0;
-        }
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 641px) {
@@ -57,7 +52,7 @@ main {
     }
 
     .sidebar {
-        width: 250px;
+        width: 270px;
         height: 100vh;
         position: sticky;
         top: 0;
@@ -69,33 +64,14 @@ main {
         z-index: 1;
     }
 
-        .top-row.auth ::deep a:first-child {
-            flex: 1;
-            text-align: right;
-            width: 0;
-        }
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
 
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
 }
-
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }

Src/SamplesByPlatforms/Xceed.Blazor.Zip.Sample/Components/Layout/NavMenu.razor

@@ -0,0 +1,43 @@
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <div>
+            <img src="images/logox.png" alt="Logo" width="40" height="40" />
+            <a class="navbar-brand" href="">Xceed Zip Samples</a>
+        </div>
+        <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="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                Compress files
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="listzip">
+                List element
+            </NavLink>
+        </div>
+        @* THIS REMOVED BECAUSE DO NOT WORK ON WEB ASSEMBLY *@
+        @* <div class="nav-item px-3">
+            <NavLink class="nav-link" href="folderzip">
+                Compress folder
+            </NavLink>
+        </div> *@
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

Src/SamplesByPlatforms/Xceed.Blazor.Zip.Sample/Components/Pages/Error.razor

@@ -1,22 +1,9 @@
 .navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .top-row {
-    height: 3.5rem;
+    min-height: 3.5rem;
     background-color: rgba(0,0,0,0.4);
 }
 
@@ -59,45 +46,36 @@
         padding-bottom: 1rem;
     }
 
-    .nav-item ::deep .nav-link {
+    .nav-item ::deep a {
         color: #d7d7d7;
-        background: none;
-        border: none;
         border-radius: 4px;
         height: 3rem;
         display: flex;
         align-items: center;
         line-height: 3rem;
-        width: 100%;
     }
 
 .nav-item ::deep a.active {
     background-color: rgba(255,255,255,0.37);
     color: white;
 }
 
-.nav-item ::deep .nav-link:hover {
+.nav-item ::deep a:hover {
     background-color: rgba(255,255,255,0.1);
     color: white;
 }
 
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
 @media (min-width: 641px) {
     .navbar-toggler {
         display: none;
     }
 
-    .nav-scrollable {
+    .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;