Make responsive

src/Blazor.Gitter.Client/wwwroot/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width" />
     <title>Blazored Gitter - Client Side</title>
     <base href="/" />
-    <link href="css/loader.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+    <link href="css/blazord.gitter.min.css" rel="stylesheet" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
 </head>
@@ -14,7 +15,10 @@
         <div class="loader-container">
             <div class="loader"></div>
             <div class="loader-logo">
-                Blazored<span>Gitter</span>.CSE
+                Blazored<span>Gitter</span>
+            </div>
+            <div class="loader-platform">
+                Client-side Blazor
             </div>
         </div>
     </app>

src/Blazor.Gitter.Core/Blazor.Gitter.Core.csproj

@@ -29,11 +29,11 @@
 
   <ItemGroup>
     <EmbeddedResource Remove="content\css\blazor.gitter.scss" />
-    <EmbeddedResource Remove="content\css\loader.scss" />
     <EmbeddedResource Remove="content\css\_base.scss" />
     <EmbeddedResource Remove="content\css\_chatroom.scss" />
     <EmbeddedResource Remove="content\css\_ChatRoomList.scss" />
     <EmbeddedResource Remove="content\css\_layout.scss" />
+    <EmbeddedResource Remove="content\css\_loader.scss" />
     <EmbeddedResource Remove="content\css\_login.scss" />
     <EmbeddedResource Remove="content\css\_mixins.scss" />
     <EmbeddedResource Remove="content\css\_navbar.scss" />
@@ -44,15 +44,17 @@
   <ItemGroup>
     <None Remove="compilerconfig.json" />
     <None Remove="content\chat.js" />
-    <None Remove="content\css\loader.scss" />
+    <None Remove="content\css\_loader.scss" />
   </ItemGroup>
 
   <ItemGroup>
+    <Content Include="..\Blazor.Gitter.Client\wwwroot\css\blazord.gitter.css" Link="blazord.gitter.css" />
+    <Content Include="..\Blazor.Gitter.Client\wwwroot\css\blazord.gitter.min.css" Link="blazord.gitter.min.css" />
     <Content Include="compilerconfig.json">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
     <Content Include="content\css\blazor.gitter.scss" />
-    <Content Include="content\css\loader.scss">
+    <Content Include="content\css\_loader.scss">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
   </ItemGroup>

src/Blazor.Gitter.Core/Components/Pages/Room.razor

@@ -16,11 +16,14 @@ else
 {
     <div class="chat-room">
         <div class="chat-room__content">
+            <div class="chat-room__search-button" onclick="@ToggleSearchMenu">
+                <i class="fas fa-search"></i>
+            </div>
             <RoomTitle ChatRoom="@ThisRoom" />
             <RoomMessages ChatRoom="@ThisRoom" UserId="@State.GetMyUser().Id" />
             <RoomSend ChatRoom="@ThisRoom" User="@State.GetMyUser()" />
         </div>
-        <aside class="chat-room__search">
+        <aside class="chat-room__search @SearchCss">
             <RoomSearch ChatRoom="@ThisRoom" UserId="@State.GetMyUser().Id" />
         </aside>
     </div>

src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs

@@ -21,13 +21,16 @@ public class RoomModel : ComponentBase
         internal bool KeepWatching = true;
 
         protected bool IsLoading = true ;
+        protected bool SearchIsOpen;
+        protected string SearchCss = "";
 
         protected override async Task OnInitAsync()
         {
             await base.OnInitAsync();
             if (!State.HasChatRooms)
             {
                 State.GotChatRooms += State_GotChatRooms;
+                State.SearchMenuToggled += State_ToggleSearchMenu;
             }
             else
             {
@@ -62,6 +65,18 @@ protected override void OnParametersSet()
             }
         }
 
+        protected void ToggleSearchMenu()
+        {
+            State.ToggleSearchMenu();
+        }
+
+        protected void State_ToggleSearchMenu(object sender, EventArgs e)
+        {
+            SearchIsOpen = !SearchIsOpen;
+            SearchCss = SearchIsOpen ? "chat-room__search--active" : "";
+            StateHasChanged();
+        }
+
         private void LoadRoom()
         {
             ThisRoom = State.GetRoom(RoomId);

src/Blazor.Gitter.Core/Components/Shared/AppState.cs

@@ -1,7 +1,6 @@
 using Blazor.Gitter.Library;
 using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
 using System.Diagnostics;
@@ -63,6 +62,14 @@ public class AppState : IAppState, IDisposable
         /// Attach to this to be notified that a message has been edited
         /// </summary>
         public event EventHandler<IChatMessage> GotMessageUpdate;
+        /// <summary>
+        /// Attach to this to be notified that the menu has been toggled
+        /// </summary>
+        public event EventHandler MenuToggled;
+        /// <summary>
+        /// Attach to this to be notified that the search menu has been toggled
+        /// </summary>
+        public event EventHandler SearchMenuToggled;
 
         public AppState(
             ILocalStorageService localStorage,
@@ -162,6 +169,15 @@ private void RaiseGotMessageUpdateEvent(IChatMessage message)
             GotMessageUpdate?.Invoke(this, message);
         }
 
+        public void ToggleMenu()
+        {
+            MenuToggled?.Invoke(this, null);
+        }
+        public void ToggleSearchMenu()
+        {
+            SearchMenuToggled?.Invoke(this, null);
+        }
+
         public bool HasApiKey => !string.IsNullOrWhiteSpace(apiKey);
         public string GetApiKey()
         {

src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor

@@ -4,14 +4,14 @@
         @if (State?.HasChatRooms ?? false)
         {
             <ul class="chat-room-list__list">
-                <li>
+                <li onclick="@ToggleMenu">
                     <NavLink href="" Match="NavLinkMatch.All">
                         Home
                     </NavLink>
                 </li>
                 @foreach (IChatRoom Room in State.GetMyRooms().OrderByDescending(r => r.LastAccessTime))
                 {
-                    <li class="chat-room-list__list-item">
+                    <li class="chat-room-list__list-item" onclick="@ToggleMenu">
                         <NavLink class="chat-room-list__link" href=@($"/room/{Room.Id}")>
                             <img src="@Room.AvatarUrl" />
                             @Room.Name

src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor.cs

@@ -30,6 +30,11 @@ protected override void OnInit()
             }
         }
 
+        protected void ToggleMenu()
+        {
+            State.ToggleMenu();
+        }
+
         private void State_GotChatUser(object sender, EventArgs e)
         {
             Invoke(StateHasChanged);

src/Blazor.Gitter.Core/Components/Shared/IAppState.cs

@@ -16,10 +16,14 @@ public interface IAppState
         event EventHandler ActivityResumed;
         event EventHandler<DateTime> TimeoutChanged;
         event EventHandler<IChatMessage> GotMessageUpdate;
+        event EventHandler MenuToggled;
+        event EventHandler SearchMenuToggled;
         bool HasApiKey { get; }
         bool HasChatRooms { get; }
         bool HasChatUser { get; }
         bool Initialised { get; }
+        void ToggleMenu();
+        void ToggleSearchMenu();
         string GetApiKey();
         List<IChatRoom> GetMyRooms();
         IChatRoom GetRoom(string RoomId);

src/Blazor.Gitter.Core/Components/Shared/MainLayout.razor

@@ -5,7 +5,10 @@
 	<Navbar />
 
 	<div class="wrapper">
-		<aside class="wrapper__left-menu">
+		<aside class="wrapper__left-menu @MenuCss">
+            <div class="wrapper__left-menu-footer">
+                <span class="navbar__mode">@Mode v@(Build)</span>
+            </div>
 			<ChatRoomList />
 		</aside>
 		<main class="wrapper__content">