blogifierdotnet#267 - Main Layout

Author: farzindev

src/Blogifier.Admin/Shared/MainLayout.razor

@@ -7,7 +7,7 @@
 <AuthorizeView>
 	<Authorized>
 		<NavMenu />
-        <div class="container content">
+        <div class="content">
             @Body
         </div>
 	</Authorized>

src/Blogifier.Admin/Shared/NavMenu.razor

@@ -4,7 +4,7 @@ $default: #fff;
 $warning: #ff8d00;
 
 // body
-$body-bg: #f8f9fa;
+$body-bg: #fff;
 $font-size-base: .875rem;
 $body-color: #111;
 $link-color: $blogifier;
@@ -80,5 +80,6 @@ $hljs-sky: #2f6f9f;
 $container-max-widths: (
   sm: 540px,
   md: 720px,
-  lg: 960px
+  lg: 960px,
+  xl: 1200px
 );

src/Blogifier.Admin/wwwroot/admin/css/app.css

@@ -1,142 +1,44 @@
-.header {
-  background-color: #fff;
-  padding-top: 1.5rem;
-  border-bottom: 1px solid $gray-200;
-  margin-bottom: 3rem;
-}
-.header-nav {
-  display: flex;
-  list-style: none;
-  padding: 0;
-  margin: 0 -1rem;
-
-  &-link {
-    display: block;
-    width: 3rem;
-    height: 3.25rem;
-    line-height: 2.75rem;
-    text-align: center;
-    position: relative;
-    color: $gray-600;
-    outline: none !important;
-
-    &::after {
-      content: "";
-      display: block;
-      width: 1.25rem;
-      height: 0.125rem;
-      background-color: transparent;
-      position: absolute;
-      bottom: -0.0625rem;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: 1rem;
-    }
-    &:focus,
-    &:hover {
-      color: $gray-900;
-    }
-
-    &:focus {
-      &::after {
-        background-color: rgba(#000, 0.1);
-      }
-    }
-
-    &.active {
-      color: $blogifier;
-      &::after {
-        background-color: $blogifier;
-      }
-    }
-  }
-  &-icon {
-    line-height: 2rem;
-  }
-  &-img {
-    border-radius: 100%;
-  }
-}
-
-.user-nav {
-  width: 15rem;
-  box-shadow: -1rem 1rem 5rem rgba(#000, 0.2);
-  margin-top: 0.875rem !important;
-  border: 0;
-  padding: 2rem 2rem 1rem;
-  border-radius: 0.75rem;
-
-  &-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  &-img {
-    display: block;
-    border-radius: 100%;
-    margin: 0 auto 0.75rem;
-    width: 4rem;
-  }
-  &-name {
-    display: block;
-    font-weight: 500;
-    font-size: 1rem;
-    text-transform: capitalize;
-  }
-  &-email {
-    display: block;
-    font-size: 0.75rem;
-    color: $gray-600;
-  }
-
+.sidebar {
+  &::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #f8f9fa;
+    z-index: -1;
+    margin-left: 10rem;
+  }
+
+  // one
   &-list {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
+    @include list-unstyled;
     margin: 0;
-    padding: 0;
   }
-
   &-item {
-    border-top: 1px solid $gray-100;
   }
   &-link {
-    display: block;
-    line-height: 2.5rem;
-    padding: 0;
-    color: $gray-600;
-    font-weight: 500;
-    font-size: 0.75rem;
-    display: flex;
-    align-items: center;
-    &:focus,
-    &:hover {
-      color: $blogifier;
-    }
-    &.-logout {
-      &:focus,
-      &:hover {
-        color: $danger;
-      }
-    }
+    padding-left: 2rem;
+    line-height: 2rem;
+    height: 2rem;
+    position: relative;
   }
-
+  &-img,
   &-icon {
-    margin-right: 1rem;
-    width: 1rem;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
   }
 
-  &-blogifier {
-    border-top: 1px solid $gray-200;
-    display: block;
-    text-align: center;
-    color: $gray-500;
-    line-height: 3rem;
+  // two
+  &-sublist {
+    @include list-unstyled;
+    margin: 0;
+    padding-left: 2rem;
   }
-}
-
-@media screen and (max-width: 960px) {
-  // remove the negative margin on .header-nav when it's alsmost near the contianer width.
-  .header-nav {
-    margin: 0 -.5rem;
+  &-subitem {
+  }
+  &-sublink {
   }
 }

src/Blogifier.Admin/wwwroot/admin/css/app.css.map

@@ -10,11 +10,18 @@ body {
 }
 
 .blogifier {
+  height: 100%;
   // app
 }
 
 .content {
   margin-bottom: 3rem;
+  flex-grow: 1;
+  padding-left: 1.5rem;
+  padding-top: 1.5rem;
+}
+.sidebar {
+  min-width: 10rem;
 }
 
 .footer {

src/Blogifier.Admin/wwwroot/admin/scss/helpers/_variables.scss

@@ -23,7 +23,7 @@
 
 <body>
 
-    <div id="app" class="blogifier">
+    <div id="app" class="blogifier d-flex container">
         <div class="blogifier-loading d-flex">
             <div class="spinner-border text-blogifier m-auto" role="status"></div>
         </div>
@@ -51,11 +51,6 @@
         <input type="submit" value="Upload" />
     </form>
 
-    <div class="footer">
-        <div class="container">
-            &copy; <a href="https://blogifier.net" target="_blank" ref="nofollow">Blogifier v3.0</a>
-        </div>
-    </div>
 
     <script src="admin/js/frameworks/jquery.min.js"></script>
     <script src="admin/js/frameworks/bootstrap.bundle.min.js"></script>