l-min-components 1.0.511 → 1.0.517

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.511",
+  "version": "1.0.517",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AdminAppMainLayout/index.jsx

@@ -6,7 +6,13 @@ import React, {
   useContext,
 } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { Layout, CenterLayout, LeftLayout, MainLayout } from "./index.styled";
+import {
+  Layout,
+  CenterLayout,
+  LeftLayout,
+  MainLayout,
+  InnerCenterLayout,
+} from "./index.styled";
 import AdminSideMenu from "../AdminSidebar";
 import AdminNavbar from "../AdminNavbar";
 
@@ -33,10 +39,11 @@ const AdminAppMainLayout = () => {
           <LeftLayout>
             <AdminSideMenu />
           </LeftLayout>
-          <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
+          <CenterLayout>
             <AdminNavbar />
-            <Outlet />
-            <h1> Hello world </h1>
+            <InnerCenterLayout isOpen={isOpen} style={centerLayoutStyle}>
+              <Outlet />
+            </InnerCenterLayout>
           </CenterLayout>
         </MainLayout>
       </Layout>

package/src/components/AdminAppMainLayout/index.styled.js

@@ -4,26 +4,39 @@ import LayoutBackgroundImage from "../../assets/images/layout_background.png";
 
 /* styles for main layout component */
 export const Layout = styled.div`
-  background-color: "#ffffff";
+  background-color: #ffffff;
   height: 100vh;
   width: 100%;
 `;
 
 export const MainLayout = styled.div`
-  background-color: "#ffffff";
+  background-color: #ffffff;
   width: 100%;
   height: 100vh;
-
 `;
 
 export const LeftLayout = styled.div`
   background-color: transparent;
+  position: fixed;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 `;
 
 export const CenterLayout = styled.div`
   width: 100%;
+  /* margin-left: 280px; */
+  overflow-x: hidden;
+  position: relative;
+`;
+
+export const InnerCenterLayout = styled.div`
+  /* width: 100%; */
+  padding-top: 80px;
   margin-left: 280px;
   overflow-y: scroll;
+  overflow-x: hidden;
   scrollbar-width: thin;
   /* "auto" or "thin" depending on browser support */
   scrollbar-color: transparent transparent;

package/src/components/AdminNavbar/index.jsx

@@ -5,6 +5,7 @@ import {
   SearchInput,
   NavGroup,
   AdminAccount,
+  NavHeader,
 } from "./index.styled";
 import { SearchIcon } from "./assets/svg/search";
 import { NotificationIcon } from "./assets/svg/notification";
@@ -16,46 +17,48 @@ const AdminNavbar = () => {
 
   return (
     <Navbar>
-      <SearchInputGroup>
-        <SearchIcon />
-        <SearchInput
-          type="search"
-          value=""
-          id="adminSearch"
-          name="search"
-          placeholder="Type to search..."
-          onChange={(e) => setSearch(e.target.value)}
-        />
+      <NavHeader>
+        <SearchInputGroup>
+          <SearchIcon />
+          <SearchInput
+            type="search"
+            value=""
+            id="adminSearch"
+            name="search"
+            placeholder="Type to search..."
+            onChange={(e) => setSearch(e.target.value)}
+          />
 
-        {searchResultOpen && (
-          <div className="search-result-wrapper">
-            <p>
-              Website <span>UIUX </span> Design
-            </p>
-          </div>
-        )}
-      </SearchInputGroup>
+          {searchResultOpen && (
+            <div className="search-result-wrapper">
+              <p>
+                Website <span>UIUX </span> Design
+              </p>
+            </div>
+          )}
+        </SearchInputGroup>
 
-      <NavGroup>
-        <span className="notification__bell">
-          <NotificationIcon />
-        </span>
+        <NavGroup>
+          <span className="notification__bell">
+            <NotificationIcon />
+          </span>
 
-        <AdminAccount>
-          <div className="admin__info">
-            <p className="admin_name"> Thomas Anree</p>
-            <p className="admin_role"> Ux Designer </p>
-          </div>
-          <div className="profile__box">
-            <div className="img_box">
-              <img src="" alt="" />
+          <AdminAccount>
+            <div className="admin__info">
+              <p className="admin_name"> Thomas Anree</p>
+              <p className="admin_role"> Ux Designer </p>
+            </div>
+            <div className="profile__box">
+              <div className="img_box">
+                <img src="" alt="" />
+              </div>
+              <span>
+                <ArrowDownIcon />
+              </span>
             </div>
-            <span>
-              <ArrowDownIcon />
-            </span>
-          </div>
-        </AdminAccount>
-      </NavGroup>
+          </AdminAccount>
+        </NavGroup>
+      </NavHeader>
     </Navbar>
   );
 };

package/src/components/AdminNavbar/index.styled.js

@@ -2,19 +2,26 @@ import styled from "styled-components";
 
 /* styles for header component authenticated users */
 export const Navbar = styled.nav`
+  background-color: transparent;
+  /* position: absolute; */
+  z-index: 555;
+  position: fixed;
+  width: 100%;
+`;
+
+export const NavHeader = styled.div`
   background-color: rgba(255, 255, 255, 1);
-  padding: 17px 30px;
+  border-bottom: 1px solid #c6cccc;
   display: flex;
   font-family: "Nunito";
-  width: 100%;
   align-items: center;
-  /* justify-content: space-between; */
-  position: fixed;
-  z-index: 555;
+  justify-content: space-between;
+  padding: 17px 30px;
+  margin-left: 280px;
 `;
 
 export const NavGroup = styled.div`
-  width: 24%;
+  /* width: 24%; */
   display: flex;
   justify-content: end;
   align-items: center;
@@ -97,7 +104,7 @@ export const Nav = styled.ul`
 
 export const SearchInputGroup = styled.div`
   background-color: transparent;
-  width: 45%;
+  /* width: 45%; */
   transition: 0.5s;
   display: flex;
   align-items: center;

package/src/components/fullPageLoader/index.jsx

@@ -21,9 +21,9 @@ const Backdrop = styled.div`
   ${({ isSectionLoader, hasBackground, fixed, zIndex }) =>
     isSectionLoader
       ? css`
-          position: relative;
+          position: static;
           width: 100%;
-          height: 100%;
+          /* height: 100%; */
           background: transparent;
         `
       : css`