Added custom views

.idea/.idea.HopFrame/.idea/workspace.xml

@@ -11,8 +11,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="0648788e-7696-4e60-bf12-5d5601f33d8c" name="Changes" comment="Added modular event system">
+    <list default="true" id="0648788e-7696-4e60-bf12-5d5601f33d8c" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/src/HopFrame.Web/Components/HopFrameCard.razor" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/HopFrame.Web/HopFrameConfiguratorExtensions.cs" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/HopFrame.Web/Models/CustomView.cs" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/HopFrame.Web/Components/Layout/HopFrameLayout.razor" beforeDir="false" afterPath="$PROJECT_DIR$/src/HopFrame.Web/Components/Layout/HopFrameLayout.razor" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/HopFrame.Web/Components/Layout/HopFrameSideMenu.razor" beforeDir="false" afterPath="$PROJECT_DIR$/src/HopFrame.Web/Components/Layout/HopFrameSideMenu.razor" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/testing/HopFrame.Testing/Components/Pages/Counter.razor" beforeDir="false" afterPath="$PROJECT_DIR$/testing/HopFrame.Testing/Components/Pages/Counter.razor" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/testing/HopFrame.Testing/Program.cs" beforeDir="false" afterPath="$PROJECT_DIR$/testing/HopFrame.Testing/Program.cs" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -32,7 +39,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="feature/events" />
+        <entry key="$PROJECT_DIR$" value="dev" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -59,29 +66,33 @@
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/DecompilerCache/decompiler/c73b3c6c598640c592fd3c6fa226c286e90908/8b/db8582a3/IList`1.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/DecompilerCache/decompiler/c73b3c6c598640c592fd3c6fa226c286e90908/ad/ba9a50e7/ICollection.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/DecompilerCache/decompiler/c73b3c6c598640c592fd3c6fa226c286e90908/fc/6f7933d2/ICollection`1.cs" root0="FORCE_HIGHLIGHTING" />
+    <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/10c66a9a1e137111895f7182a2ae246eabe06a261578c3fa495a45f6f177d35/IconVariant.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/1b81cb3be224213a6a73519b6e340a628d9a1fb8629c351a186a26f6376669/List.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/26c9a2fb5243863babc926e4be763daf4128d4f97c4a769cdce1e2e3e5c532/FluentButton.razor.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/2751d5afefca5424bfc4b21347f581372f7a739c0ae4df661ea557fcb97ef20/EnumExtensions.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/439c4ee753b23e743cc14119593bc889751f9eb0b38997577d8e4c47c4fed/ToCollection.cs" root0="FORCE_HIGHLIGHTING" />
+    <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/4ee221fd7e91e9a4c14ff82aae2ee938edecde35a934133e991aba56aa9499/Icon.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/5a69b82eed595b731b82667db08722b69b82482e275cf32dfb219190e3dc49/CollectionEntry.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/60e7b22380df80ef6fefe43138047f49ec6eff4b25c12b42ce3d6ed5aac/MethodInvokerCommon.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/642391624bd5c30b3411a11434588aba4906207335166b784bf3a4325f6c7/NavigationEntry.cs" root0="FORCE_HIGHLIGHTING" />
+    <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/6fe785cceb29ca2d1da78e157315815a7c4372b582a20a71c28b210f9d56e/IconsExtensions.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/7ad7d2d0ae865063993eb8a03427815ea3bdb6a774e0a2f95512e9f669a4f489/MemberEntry.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/87c584767b46b5fd42769be76547105558e6690f785614efddca134b2d682/Type.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/8d5d6cbff46ddc7b152381f92ae1ae51d3e7b57b14dd23840a11f5aaaaed396/InternalEntityEntry.cs" root0="FORCE_HIGHLIGHTING" />
+    <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/aa3ea54f92373c58ec1149fbd41215869a98bd385c30584bc6db2fa3c6e88443/Filled24.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/adcd2c45092dd8e4fc412325c8adb75d6e7d8b3e90a9523f167583fb9c60/ServiceCollectionExtensions.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/b3ccb66df3646cb51df73ad51716136ebd2eefb4edb1308dd52a7e999582d59e/IBindableColumn.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/bfff78ecaa39c818519fc918bb2d4bbdca6ad93d7170f5cf325f67ccd0b97d43/BooleanAsserts.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/d04a416cac8afac0341a8be0e859b230f2eae64924298eef48c317ba35916/RenderTreeBuilder.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/d39923abb31e6a6e7a9e8173e217da584c54925ce63e568126a2b89b9ab/DefaultRazorComponentsServiceOptionsConfiguration.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/d858ddb35a8e36df5573b7612542f9ad50f426b8ab43818587d1ac65fab14829/DatabaseGeneratedAttribute.cs" root0="FORCE_HIGHLIGHTING" />
+    <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/e26a4f2df232f16e374b9719f883c1b2419f6341838d94b7581db9c7d2de17/IconInfo.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/eab2d6b892f743a27cb49a139ba782855897baf1233febd2dfd2092f3/EntityEntry.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/ece8533187fe96ce67b3ef1c9cc3502ef8da5510aadb132a9b21c5605d7c2119/PropertyColumn.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/ee4d234452e240d83e3de396c2e85cbf9ac9fb9add618b955eea196c81aaf8/IDialogContentComponent.cs" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/fc2027f7e776fc105cddb56b1a25eeb3895b3ae6f3aac854d786e63bd01f75e2/CallSiteFactory.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$APPLICATION_CONFIG_DIR$/resharper-host/SourcesCache/ff37d54b3bf4d2756237fb789635831532603376e940f63d634b869d26d74c/Regular16.cs" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$PROJECT_DIR$/src/HopFrame.Core/Config/DbContextConfig.cs" root0="FORCE_HIGHLIGHTING" />
-    <setting file="mock://C:/Users/leon/Documents/Projekte/HopFrame/src/HopFrame.Web/Components/Dialogs/HopFrameEditor.razor" root0="SKIP_HIGHLIGHTING" root1="FORCE_HIGHLIGHTING" root2="FORCE_HIGHLIGHTING" />
   </component>
   <component name="KubernetesApiPersistence">{}</component>
   <component name="KubernetesApiProvider">{
@@ -100,28 +111,28 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    ".NET Launch Settings Profile.HopFrame.Testing.Api: https.executor": "Run",
+    &quot;.NET Launch Settings Profile.HopFrame.Testing.Api: https.executor&quot;: &quot;Run&quot;,
-    ".NET Launch Settings Profile.HopFrame.Testing.executor": "Run",
+    &quot;.NET Launch Settings Profile.HopFrame.Testing.executor&quot;: &quot;Run&quot;,
-    ".NET Launch Settings Profile.HopFrame.Testing: https.executor": "Run",
+    &quot;.NET Launch Settings Profile.HopFrame.Testing: https.executor&quot;: &quot;Run&quot;,
-    ".NET Project.HopFrame.Testing.executor": "Run",
+    &quot;.NET Project.HopFrame.Testing.executor&quot;: &quot;Run&quot;,
-    "72b118b0-a6fc-4561-acdf-74f0b454dbb8.executor": "Debug",
+    &quot;72b118b0-a6fc-4561-acdf-74f0b454dbb8.executor&quot;: &quot;Debug&quot;,
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "b5f11219-dfc4-47a1-b02c-90ab603034fb.executor": "Debug",
+    &quot;b5f11219-dfc4-47a1-b02c-90ab603034fb.executor&quot;: &quot;Debug&quot;,
-    "dcdf1689-dc07-47e4-8824-2e60a4fbf301.executor": "Debug",
+    &quot;dcdf1689-dc07-47e4-8824-2e60a4fbf301.executor&quot;: &quot;Debug&quot;,
-    "git-widget-placeholder": "dev",
+    &quot;git-widget-placeholder&quot;: &quot;!29 on feature/custom-views&quot;,
-    "list.type.of.created.stylesheet": "CSS",
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    "settings.editor.selected.configurable": "preferences.environmentSetup",
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.environmentSetup&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RunManager" selected=".NET Launch Settings Profile.HopFrame.Testing: https">
     <configuration name="HopFrame.Testing: http" type="LaunchSettings" factoryName=".NET Launch Settings Profile">
       <option name="LAUNCH_PROFILE_PROJECT_FILE_PATH" value="$PROJECT_DIR$/testing/HopFrame.Testing/HopFrame.Testing.csproj" />
@@ -220,7 +231,8 @@
       <workItem from="1738054766160" duration="7449000" />
       <workItem from="1738075629332" duration="8862000" />
       <workItem from="1738335286481" duration="2039000" />
-      <workItem from="1738403493974" duration="4159000" />
+      <workItem from="1738403493974" duration="4231000" />
+      <workItem from="1738418482606" duration="2795000" />
     </task>
     <task id="LOCAL-00001" summary="Added basic configuration">
       <option name="closed" value="true" />
@@ -494,7 +506,15 @@
       <option name="project" value="LOCAL" />
       <updated>1738407061976</updated>
     </task>
-    <option name="localTasksCounter" value="35" />
+    <task id="LOCAL-00035" summary="Fixed event emitter service scope">
+      <option name="closed" value="true" />
+      <created>1738407710507</created>
+      <option name="number" value="00035" />
+      <option name="presentableId" value="LOCAL-00035" />
+      <option name="project" value="LOCAL" />
+      <updated>1738407710507</updated>
+    </task>
+    <option name="localTasksCounter" value="36" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -545,7 +565,6 @@
   <component name="UnityProjectConfiguration" hasMinimizedUI="false" />
   <component name="VcsManagerConfiguration">
     <option name="CLEAR_INITIAL_COMMIT_MESSAGE" value="true" />
-    <MESSAGE value="Added creation/modification confirmation" />
     <MESSAGE value="Removed Template" />
     <MESSAGE value="Added policy validation, ordering and virtual listing properties" />
     <MESSAGE value="Added n -&gt; m relation support" />
@@ -570,6 +589,7 @@
     <MESSAGE value="Removed select all button" />
     <MESSAGE value="Added missing installation instructions" />
     <MESSAGE value="Added modular event system" />
-    <option name="LAST_COMMIT_MESSAGE" value="Added modular event system" />
+    <MESSAGE value="Fixed event emitter service scope" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fixed event emitter service scope" />
   </component>
 </project>

src/HopFrame.Web/Components/HopFrameCard.razor

@@ -0,0 +1,35 @@
+<FluentCard Width="350px" Height="200px" Style="display: flex; flex-direction: column; background-color: var(--neutral-layer-1)">
+    <h3 style="margin-bottom: 0; display: flex; align-items: center; gap: 5px">
+        @if (Icon is not null) {
+            <FluentIcon Value="Icon" Color="Color.Neutral" />
+        }
+        @Title
+    </h3>
+    <FluentLabel Typo="Typography.Body" Color="Color.Info" Style="margin-bottom: 0.5rem">@Subtitle</FluentLabel>
+    <span>@Description</span>
+    <FluentSpacer />
+    <div style="display: flex">
+        <FluentSpacer/>
+
+        <a href="@Href" style="display: inline-block">
+            <FluentButton>Open</FluentButton>
+        </a>
+    </div>
+</FluentCard>
+
+@code {
+    [Parameter]
+    public required string Title { get; set; }
+
+    [Parameter]
+    public string? Subtitle { get; set; }
+
+    [Parameter]
+    public required string Description { get; set; }
+
+    [Parameter]
+    public required string Href { get; set; }
+    
+    [Parameter]
+    public Icon? Icon { get; set; }
+}

src/HopFrame.Web/Components/Layout/HopFrameLayout.razor

@@ -1,5 +1,6 @@
 @using HopFrame.Core.Config
 @using HopFrame.Core.Services
+@using HopFrame.Web.Models
 @using Microsoft.Extensions.DependencyInjection
 @inherits LayoutComponentBase
 
@@ -39,10 +40,28 @@
 
 @code {
 
+    internal static readonly List<CustomView> CustomViews = new();
+
     protected override async Task OnInitializedAsync() {
         var authorized = await Handler.IsAuthenticatedAsync(Config.BasePolicy);
+
+        var currentUri = "/" + Navigator.ToBaseRelativePath(Navigator.Uri);
+
+        if (authorized) {
+            foreach (var view in CustomViews.Where(view => !string.IsNullOrWhiteSpace(view.Policy))) {
+                switch (view.LinkMatch) {
+                    case NavLinkMatch.All when currentUri != view.Url:
+                    case NavLinkMatch.Prefix when !currentUri.StartsWith(view.Url):
+                        continue;
+                }
+
+                authorized = await Handler.IsAuthenticatedAsync(view.Policy);
+                break;
+            }
+        }
+        
         if (!authorized) {
-            Navigator.NavigateTo((Config.LoginPageRewrite ?? "/login") + "?redirect=/" + Navigator.ToBaseRelativePath(Navigator.Uri), true);
+            Navigator.NavigateTo((Config.LoginPageRewrite ?? "/login") + "?redirect=" + currentUri, true);
         }
     }
 

src/HopFrame.Web/Components/Layout/HopFrameSideMenu.razor

@@ -1,5 +1,6 @@
 @using HopFrame.Core.Config
 @using HopFrame.Core.Services
+@using HopFrame.Web.Models
 
 <FluentAppBar Orientation="Orientation.Vertical" PopoverShowSearch="false" Style="background-color: var(--neutral-layer-2); height: auto">
     <FluentAppBarItem Href="/admin"
@@ -11,6 +12,15 @@
 
     <br>
     
+    @foreach (var view in _views) {
+        <FluentAppBarItem Href="@view.Url"
+                          Match="@view.LinkMatch"
+                          IconActive="GetLinkIcon(view, IconVariant.Filled)"
+                          IconRest="GetLinkIcon(view, IconVariant.Regular)"
+                          Text="@view.Name"
+                          Style="margin-top: 0.25rem"/>
+    }
+    
     @foreach (var table in _tables.OrderBy(t => t.Order).Select(t => t.DisplayName)) {
         <FluentAppBarItem Href="@("/admin/" + table.ToLower())"
                           Match="NavLinkMatch.All"
@@ -27,6 +37,7 @@
 @code {
 
     private readonly List<TableConfig> _tables = [];
+    private readonly List<CustomView> _views = [];
 
     protected override async Task OnInitializedAsync() {
         foreach (var table in Explorer.GetTables()) {
@@ -34,6 +45,21 @@
             if (!await Handler.IsAuthenticatedAsync(table.ViewPolicy)) continue;
             _tables.Add(table);
         }
+
+        foreach (var view in HopFrameLayout.CustomViews) {
+            if (!await Handler.IsAuthenticatedAsync(view.Policy)) continue;
+            _views.Add(view);
+        }
+    }
+
+    internal static Icon GetLinkIcon(CustomView view, IconVariant variant) {
+        var info = new IconInfo {
+            Name = view.Icon,
+            Variant = variant,
+            Size = IconSize.Size24
+        };
+        
+        return info.GetInstance();
     }
 
 }

src/HopFrame.Web/Components/Pages/HopFrameHome.razor

@@ -1,28 +1,31 @@
 @page "/admin"
 @using HopFrame.Core.Config
 @using HopFrame.Core.Services
+@using HopFrame.Web.Models
 @layout HopFrameLayout
 
 <PageTitle>HopFrame</PageTitle>
 
 <div style="padding: 1.5rem 1.5rem;">
-    <h2>Tables</h2>
+    <h2>Pages</h2>
     
     <FluentStack Orientation="Orientation.Horizontal" Wrap="true" Style="margin-top: 1.5rem">
+        @foreach (var view in _views) {
+            <HopFrameCard
+                Title="@view.Name"
+                Subtitle="@view.Policy"
+                Description="@view.Description"
+                Href="@view.Url"
+                Icon="HopFrameSideMenu.GetLinkIcon(view, IconVariant.Regular)"/>
+        }
+        
         @foreach (var table in _tables.OrderBy(t => t.Order)) {
-            <FluentCard Width="350px" Height="200px" Style="display: flex; flex-direction: column; background-color: var(--neutral-layer-1)">
+            <HopFrameCard
-                <h3 style="margin-bottom: 0;">@table.DisplayName</h3>
+                Title="@table.DisplayName"
-                <FluentLabel Typo="Typography.Body" Color="Color.Info" Style="margin-bottom: 0.5rem">@table.ViewPolicy</FluentLabel>
+                Subtitle="@table.ViewPolicy"
-                <span>@table.Description</span>
+                Description="@table.Description"
-                <FluentSpacer />
+                Href="@("/admin/" + table.DisplayName.ToLower())"
-                <div style="display: flex">
+                Icon="new Icons.Regular.Size24.Database()"/>
-                    <FluentSpacer/>
-
-                    <a href="@("/admin/" + table.DisplayName.ToLower())" style="display: inline-block">
-                        <FluentButton>Open</FluentButton>
-                    </a>
-                </div>
-            </FluentCard>
         }
     </FluentStack>
 </div>
@@ -33,6 +36,7 @@
 @code {
     
     private readonly List<TableConfig> _tables = [];
+    private readonly List<CustomView> _views = [];
 
     protected override async Task OnInitializedAsync() {
         foreach (var table in Explorer.GetTables()) {
@@ -40,6 +44,11 @@
             if (!await Handler.IsAuthenticatedAsync(table.ViewPolicy)) continue;
             _tables.Add(table);
         }
+
+        foreach (var view in HopFrameLayout.CustomViews) {
+            if (!await Handler.IsAuthenticatedAsync(view.Policy)) continue;
+            _views.Add(view);
+        }
     }
     
 }

src/HopFrame.Web/HopFrameConfiguratorExtensions.cs

@@ -0,0 +1,32 @@
+using HopFrame.Core.Config;
+using HopFrame.Web.Components.Layout;
+using HopFrame.Web.Models;
+
+namespace HopFrame.Web;
+
+public static class HopFrameConfiguratorExtensions {
+    
+    /// <summary>
+    /// Creates an entry to the side menu and dashboard with a custom url
+    /// </summary>
+    /// <param name="configurator">The configurator for the HopFrame config that is being created</param>
+    /// <param name="name">The name of the navigation entry</param>
+    /// <param name="url">The target url of the navigation entry</param>
+    public static CustomViewConfigurator AddCustomView(this HopFrameConfigurator configurator, string name, string url) {
+        var view = new CustomView {
+            Name = name,
+            Url = url
+        };
+        HopFrameLayout.CustomViews.Add(view);
+        return new CustomViewConfigurator(view);
+    }
+
+    /// <param name="configuratorDelegate">The delegate for configuring the view</param>
+    /// <inheritdoc cref="AddCustomView(HopFrame.Core.Config.HopFrameConfigurator,string,string)"/>
+    public static HopFrameConfigurator AddCustomView(this HopFrameConfigurator configurator, string name, string url, Action<CustomViewConfigurator> configuratorDelegate) {
+        var viewConfigurator = AddCustomView(configurator, name, url);
+        configuratorDelegate.Invoke(viewConfigurator);
+        return configurator;
+    }
+    
+}

src/HopFrame.Web/Models/CustomView.cs

@@ -0,0 +1,54 @@
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.FluentUI.AspNetCore.Components;
+
+namespace HopFrame.Web.Models;
+
+public sealed class CustomView {
+    public required string Name { get; init; }
+    public string? Description { get; set; }
+    public string? Policy { get; set; }
+    public required string Url { get; init; }
+    public string Icon { get; set; } = "Window";
+    public NavLinkMatch LinkMatch { get; set; } = NavLinkMatch.All;
+}
+
+public sealed class CustomViewConfigurator(CustomView view) {
+    public CustomView InnerConfig { get; } = view;
+
+    /// <summary>
+    /// Sets the description displayed in the dashboard
+    /// </summary>
+    /// <param name="description">The desired description</param>
+    public CustomViewConfigurator SetDescription(string description) {
+        InnerConfig.Description = description;
+        return this;
+    }
+
+    /// <summary>
+    /// Sets the policy needed in order to access the view
+    /// </summary>
+    /// <param name="policy">The desired policy</param>
+    public CustomViewConfigurator SetPolicy(string policy) {
+        InnerConfig.Policy = policy;
+        return this;
+    }
+
+    /// <summary>
+    /// Sets the icon displayed in the sidebar
+    /// </summary>
+    /// <param name="icon">The desired <see href="https://www.fluentui-blazor.net/Icon#explorer">fluent-icon</see></param>
+    public CustomViewConfigurator SetIcon(string icon) {
+        InnerConfig.Icon = icon;
+        return this;
+    }
+
+    /// <summary>
+    /// Sets the rule for sidebar to determine if the link is active
+    /// </summary>
+    /// <param name="match">The desired match rule</param>
+    public CustomViewConfigurator SetLinkMatch(NavLinkMatch match) {
+        InnerConfig.LinkMatch = match;
+        return this;
+    }
+    
+}

testing/HopFrame.Testing/Components/Pages/Counter.razor

@@ -1,5 +1,7 @@
 @page "/counter"
+@using HopFrame.Web.Components.Layout
 @rendermode InteractiveServer
+@layout HopFrameLayout
 
 <PageTitle>Counter</PageTitle>
 

testing/HopFrame.Testing/Program.cs

@@ -1,11 +1,8 @@
-using System.Collections;
-using HopFrame.Core.Events;
 using HopFrame.Testing;
 using Microsoft.FluentUI.AspNetCore.Components;
 using HopFrame.Testing.Components;
 using HopFrame.Testing.Models;
 using HopFrame.Web;
-using HopFrame.Web.Components.Pages;
 using Microsoft.EntityFrameworkCore;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -76,8 +73,13 @@ builder.Services.AddHopFrame(options => {
             })*/;
 
         context.Table<Post>()
-            .SetOrderIndex(-1);
+            .SetOrderIndex(-1)
+            .Ignore(true);
     });
+
+    options.AddCustomView("Counter", "/counter")
+        .SetDescription("A custom view")
+        .SetPolicy("counter.view");
 });
 
 var app = builder.Build();