From d2fd8c7f4eba857980d964a3e090b2767b501110 Mon Sep 17 00:00:00 2001
From: Shaun Walker <shaun.walker@siliqon.com>
Date: Mon, 27 Apr 2020 14:18:58 -0400
Subject: [PATCH] improved responsive design for Blazaor theme to make it more
 mobile friendly

---
 .../Themes/BlazorTheme/Default.razor          | 19 +++++-
 Oqtane.Client/Themes/Controls/Logo.razor      |  2 +-
 .../Oqtane.Themes.BlazorTheme/Theme.css       | 58 +++++++++++++++++--
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/Oqtane.Client/Themes/BlazorTheme/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Default.razor
index 89008b7a..7d9301e2 100644
--- a/Oqtane.Client/Themes/BlazorTheme/Default.razor
+++ b/Oqtane.Client/Themes/BlazorTheme/Default.razor
@@ -1,14 +1,27 @@
 @namespace Oqtane.Themes.BlazorTheme
 @inherits ThemeBase
 
+<div class="breadcrumbs">
+    <Breadcrumbs />
+</div>
+
 <div class="sidebar">
-    <div align="center"><Logo /></div>
-    <Menu Orientation="Vertical" />
+    <nav class="navbar">
+        <Logo />
+        <button class="navbar-toggler" aria-expanded="false" aria-controls="navbarSupportedContent"
+                aria-label="Toggle navigation" type="button" data-toggle="collapse"
+                data-target="#navbarSupportedContent">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <Menu Orientation="Vertical" />
+        </div>
+    </nav>
 </div>
 
 <div class="main">
     <div class="top-row px-4">
-        <Breadcrumbs /> <div class="ml-md-auto"><UserProfile /> <Login /> <ControlPanel /></div>
+        <div class="ml-md-auto"><UserProfile /> <Login /> <ControlPanel /></div>
     </div>
     <div class="container">
         <div class="row px-4">
diff --git a/Oqtane.Client/Themes/Controls/Logo.razor b/Oqtane.Client/Themes/Controls/Logo.razor
index ee8151f5..eda885fe 100644
--- a/Oqtane.Client/Themes/Controls/Logo.razor
+++ b/Oqtane.Client/Themes/Controls/Logo.razor
@@ -12,7 +12,7 @@
         if (PageState.Site.LogoFileId != null)
         {
             var uri = new Uri(NavigationManager.Uri);
-            logo = "<a href=\"" + uri.Scheme + "://" + uri.Authority + "\"><img src=\"" + ContentUrl(PageState.Site.LogoFileId.Value) + "\" alt=\"" + PageState.Site.Name + "\"/></a>";
+            logo = "<a href=\"" + uri.Scheme + "://" + uri.Authority + "\"><img class=\"img-fluid\" src=\"" + ContentUrl(PageState.Site.LogoFileId.Value) + "\" alt=\"" + PageState.Site.Name + "\"/></a>";
         }
     }
 }
\ No newline at end of file
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
index cacd218a..2b863ed1 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
+++ b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -1,4 +1,8 @@
-
+.breadcrumbs {
+    background-color: #e6e6e6;
+    border-bottom: 1px solid #d6d5d5;
+}
+
 .top-row {
     height: 3.5rem;
     display: flex;
@@ -22,8 +26,8 @@
         background-color: rgba(0,0,0,0.4);
     }
 
-    .sidebar .navbar-brand {
-        font-size: 1.1rem;
+    .sidebar .navbar-toggler .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     }
 
     .sidebar .oi {
@@ -33,6 +37,10 @@
         top: -2px;
     }
 
+.breadcrumb {
+    margin-bottom: 0;
+}
+
 .app-menu .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;
@@ -84,6 +92,13 @@
         flex-direction: row;
     }
 
+    .breadcrumbs {
+        position: fixed;
+        left: 275px;
+        top: 0;
+        z-index: 1;
+    }
+    
     .sidebar {
         width: 250px;
         height: 100vh;
@@ -94,7 +109,6 @@
     .main .top-row {
         position: sticky;
         top: 0;
-        z-index: 9999;
     }
 
     .main > div {
@@ -110,6 +124,10 @@
         /* Never collapse the sidebar for wide screens */
         display: block;
     }
+
+    .main > .container {
+        margin-top: 30px;
+    }
 }
 
 @-webkit-keyframes sk-stretchdelay {
@@ -133,3 +151,35 @@
         -webkit-transform: scaleY(1.0);
     }
 }
+
+@media (max-width: 767px) {
+    .sidebar {
+        margin-top: 3.5rem;
+        position: fixed;
+        width: 100%;
+    }
+
+    .main > .top-row.px-4 {
+        display: flex;
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .ml-md-auto {
+        margin-left: auto;
+    }
+
+    .breadcrumbs {
+        position: fixed;
+        top: 150px;
+        width: 100%;
+        left: 0;
+    }
+
+    .main > .container {
+        margin-top: 200px;
+    }
+}
+