Fixed side bar UI.

WebSharpRSS/Models/CategoryGuideItem.cs

@@ -3,7 +3,7 @@ using CodeHollow.FeedReader;
 
 namespace WebSharpRSS.Models
 {
-    public class CategoryGuideItem
+    public class CategoryGuideItem : ISelectableGuideItem
     {
         public string CategoryTitle { get; set; }
         public string CategoryIcon { get; set; }
@@ -17,6 +17,6 @@ namespace WebSharpRSS.Models
 
         public bool IsExpanded { get; set; }
         public bool IsSelected { get; set; }
-        public HashSet<Feed> Feeds { get; set; } = new HashSet<Feed>() { FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result };
+        public HashSet<FeedGuideItem> FeedItems { get; set; } = new HashSet<FeedGuideItem>() { new FeedGuideItem(FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result) };
     }
 }

WebSharpRSS/Models/FeedGuideItem.cs

@@ -0,0 +1,15 @@
+using CodeHollow.FeedReader;
+
+namespace WebSharpRSS.Models
+{
+    public class FeedGuideItem : ISelectableGuideItem
+    {
+        public FeedGuideItem(Feed feed)
+        {
+            Feed = feed;
+        }
+        public readonly Feed Feed;
+        public bool IsSelected { get; set; }
+        public bool IsExpanded { get; set; }
+    }
+}

WebSharpRSS/Models/FeedTreeItem.cs

@@ -1,14 +0,0 @@
-using System.Collections.Generic;
-using CodeHollow.FeedReader;
-
-namespace WebSharpRSS.Models
-{
-    public class FeedTreeItem
-    {
-        public FeedTreeItem(Feed feed)
-        {
-            _feed = feed;
-        }
-        private readonly Feed _feed;
-    }
-}

WebSharpRSS/Models/ISelectableGuideItem.cs

@@ -0,0 +1,8 @@
+namespace WebSharpRSS.Models
+{
+    public interface ISelectableGuideItem
+    {
+        public bool IsSelected { get; set; }
+        public bool IsExpanded { get; set; }
+    }
+}

WebSharpRSS/Shared/CategoryGuide.razor

@@ -12,6 +12,7 @@
         align-items: center;
         padding-top: 8px;
         padding-bottom: 8px;
+        padding-left: 12px;
         justify-content: flex-start;
         text-decoration: none;
     }
@@ -30,11 +31,32 @@
     
     .feed-item {
         background: var(--background-color);
-    tab-index: 1;
+        tab-index: 0;
+        width: 100%;
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        text-align: start;
+        align-items: center;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-left: 30px;
+        justify-content: flex-start;
+        text-decoration: none;
     }
     .feed-item:hover {
         background: var(--hover-bg-color);
     }
+    .feed-item-text {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+    .feed-item-icon {
+        display: inline-flex;
+        min-width: 56px;
+        flex-shrink: 0;
+    }
+    
 </style>
 
 <div>
@@ -42,8 +64,7 @@
     @foreach (CategoryGuideItem catItem in Categories)
     {
         <div>
-            <div @onclick="@(() => CatItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
+            <div @onclick="@(() => ItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
-                @*<MudListItem Icon="@catItem.CategoryIcon">@catItem.CategoryTitle</MudListItem>*@
                 <div class="cat-item-icon">
                     <MudIcon Class="pointer-events-none" Icon="@catItem.CategoryIcon" Size="Size.Medium"/>
                 </div>
@@ -52,15 +73,16 @@
                 </div>
             </div>
             @* Feeds *@
-            @if (catItem.IsExpanded && catItem.Feeds != null)
+            @if (catItem.IsExpanded && catItem.FeedItems != null)
             {
-                foreach (Feed feed in catItem.Feeds)
+                foreach (FeedGuideItem feedItem in catItem.FeedItems)
                 {
-                    <div class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor">
+                    <div @onclick="() => ItemClicked(feedItem)" class="feed-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(feedItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
-                        @* Items *@
+                        <div class="feed-item-icon">
-                        <div @onclick="() => FeedItemClicked(feed)">
+                            <MudImage ObjectFit="ObjectFit.Contain" Src="http://www.google.com/s2/favicons?domain=wikipedia.com"/>
-                            @* Image *@
+                        </div>
-                            <MudText Class="pointer-events-none">@feed.Title</MudText>
+                        <div class="feed-item-text">
+                            <MudText Class="pointer-events-none">@feedItem.Feed.Title</MudText>
                         </div>
                     </div>
                 }
@@ -76,10 +98,12 @@
     public HashSet<CategoryGuideItem> Categories { get; set; } = new HashSet<CategoryGuideItem>();
     [Parameter]
     public Action<CategoryGuideItem> HandleCat { get; set; }
+    [Parameter]
+    public Action<FeedGuideItem> FeedItemClicked { get; set; }
 
-    CategoryGuideItem? _selectedCategory;
+    ISelectableGuideItem? _selectedCategory;
 
-    void CatItemClicked(CategoryGuideItem categoryItem)
+    void ItemClicked(ISelectableGuideItem categoryItem)
     {
         categoryItem.IsExpanded = !categoryItem.IsExpanded;
         
@@ -90,13 +114,10 @@
             _selectedCategory = categoryItem;
             _selectedCategory.IsSelected = true;
         }
-        //TODO: Handle click!
+        // Handle the click.
-        HandleCat(categoryItem);
+        if (categoryItem is CategoryGuideItem catGuideItem)
+            HandleCat(catGuideItem);
+        /*if (categoryItem is FeedGuideItem feedGuideItem)
+            FeedItemClicked(feedGuideItem);*/
     }
-
-    void FeedItemClicked(Feed feed)
-    {
-        
-    }
-
 }