Change brand log and remove some demo css

public/assets/css/default.css

@@ -1,7 +1,3 @@
-/*
-* demo.css
-* File include item demo only specific css only
-******************************************************************************/
 #root {
   width: 100%;
 
@@ -20,21 +16,28 @@
   padding: 0 !important;
 }
 
-.menu .app-brand.demo {
+.menu .app-brand {
   height: 64px;
   margin-top: 12px;
 }
 
-.app-brand-logo.demo svg {
+.app-brand-logo svg {
   width: 22px;
   height: 38px;
 }
 
 .app-brand-logo-sidebar {
-  width: 70px;
+  width: 45px;
 }
 
-.app-brand-text.demo {
+.app-brand-logo-login {
+  width: 100px;
+}
+
+.app-brand-logo-border {
+  border: 1px solid #d5d5d5;
+}
+.app-brand-text {
   font-size: 1.75rem;
   letter-spacing: -0.5px;
   /* text-transform: lowercase; */
@@ -61,39 +64,6 @@
 * Content
 ******************************************************************************/
 
-.demo-blocks > * {
-  display: block !important;
-}
-
-.demo-inline-spacing > * {
-  margin: 1rem 0.375rem 0 0 !important;
-}
-
-/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
-.demo-vertical-spacing > * {
-  margin-top: 1rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
-.demo-vertical-spacing-lg > * {
-  margin-top: 1.875rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing-lg.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
-.demo-vertical-spacing-xl > * {
-  margin-top: 5rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing-xl.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
 .rtl-only {
   display: none !important;
   text-align: left !important;
@@ -104,30 +74,6 @@
   display: block !important;
 }
 
-/*
-* Layout demo
-******************************************************************************/
-
-.layout-demo-wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-.layout-demo-placeholder img {
-  width: 900px;
-}
-.layout-demo-info {
-  text-align: center;
-  margin-top: 1rem;
-}
 .infra-activity-table-header {
   border-top: 0;
   text-transform: capitalize !important;

src/assets/css/default.css

@@ -1,23 +1,3 @@
-/*
-* demo.css
-* File include item demo only specific css only
-******************************************************************************/
-
-.menu .app-brand.demo {
-  height: 64px;
-  margin-top: 12px;
-}
-
-.app-brand-logo.demo svg {
-  width: 22px;
-  height: 38px;
-}
-
-.app-brand-text.demo {
-  font-size: 1.75rem;
-  letter-spacing: -0.5px;
-}
-
 /* ! For .layout-navbar-fixed added fix padding top to .layout-page */
 /* Detached navbar */
 .layout-navbar-fixed
@@ -43,43 +23,6 @@
   z-index: auto;
 }
 
-/*
-* Content
-******************************************************************************/
-
-.demo-blocks > * {
-  display: block !important;
-}
-
-.demo-inline-spacing > * {
-  margin: 1rem 0.375rem 0 0 !important;
-}
-
-/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
-.demo-vertical-spacing > * {
-  margin-top: 1rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
-.demo-vertical-spacing-lg > * {
-  margin-top: 1.875rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing-lg.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
-.demo-vertical-spacing-xl > * {
-  margin-top: 5rem !important;
-  margin-bottom: 0 !important;
-}
-.demo-vertical-spacing-xl.demo-only-element > :first-child {
-  margin-top: 0 !important;
-}
-
 .rtl-only {
   display: none !important;
   text-align: left !important;
@@ -89,41 +32,3 @@
 [dir="rtl"] .rtl-only {
   display: block !important;
 }
-
-/* Dropdown buttons going out of small screens */
-@media (max-width: 576px) {
-  #dropdown-variation-demo .btn-group .text-truncate {
-    width: 231px;
-    position: relative;
-  }
-  #dropdown-variation-demo .btn-group .text-truncate::after {
-    position: absolute;
-    top: 45%;
-    right: 0.65rem;
-  }
-}
-
-/*
-* Layout demo
-******************************************************************************/
-
-.layout-demo-wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-.layout-demo-placeholder img {
-  width: 900px;
-}
-.layout-demo-info {
-  text-align: center;
-  margin-top: 1rem;
-}

src/components/Layout/LayoutMenu.tsx

@@ -1,9 +1,9 @@
 const LayoutMenu = () => {
   return (
     <aside id="layout-menu" className="layout-menu menu-vertical menu bg-menu-theme">
-    <div className="app-brand demo">
+    <div className="app-brand">
       <a href="index.html" className="app-brand-link">
-        <span className="app-brand-logo demo">
+        <span className="app-brand-logo">
           <svg
             width="25"
             viewBox="0 0 25 42"
@@ -58,7 +58,7 @@ const LayoutMenu = () => {
             </g>
           </svg>
         </span>
-        <span className="app-brand-text demo menu-text fw-bolder ms-2">Marco</span>
+        <span className="app-brand-text menu-text fw-bolder ms-2">Marco</span>
       </a>
 
       <a href="javascript:void(0);" className="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">

src/components/Layout/Sidebar.jsx

@@ -1,43 +1,31 @@
 import React from "react";
 import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
 import menuData from "../../data/menuData.json";
-import {getCachedProfileData} from "../../slices/apiDataManager";
+import { getCachedProfileData } from "../../slices/apiDataManager";
 
 const Sidebar = () => {
-  // const logineUser = getCachedProfileData()
+  const navigate = useNavigate();
-  const navigate = useNavigate()
-  // const handleLogout = (e) => {
-  //   e.preventDefault(); 
-  //   // logout();
-  // };
 
-  // const handleProfilePage = ()=>{
-  //   navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
-  // }
   return (
     <aside
       id="layout-menu"
       className="layout-menu menu-vertical menu bg-menu-theme "
     >
-      <div className="app-brand demo">
+      <div className="app-brand" style={{ paddingLeft: "30px" }}>
         <Link to="/dashboard" className="app-brand-link">
-          <span className="app-brand-logo  demo">
+          <span className="app-brand-logo  rounded-circle app-brand-logo-border">
             <img
               className="app-brand-logo-sidebar"
               src="/img/brand/marco.png"
               alt="logo"
               aria-label="logo image"
+              style={{ margin: "5px", paddingRight: "5px" }}
             />
           </span>
-          <span className="app-brand-text demo menu-text fw-bold ms-2">
+          <span className="app-brand-text  menu-text fw-bold ms-2">PMS</span>
-            PMS
-          </span>
         </Link>
 
-        <a
+        <a className="layout-menu-toggle menu-link text-large ms-auto">
-          
-          className="layout-menu-toggle menu-link text-large ms-auto"
-        >
           <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
         </a>
       </div>
@@ -56,87 +44,6 @@ const Sidebar = () => {
           </React.Fragment>
         ))}
       </ul>
-
-      {/* <div className="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-shrink-1 ps-5">
-        <a
-          href="#"
-          className="d-flex align-items-center  text-decoration-none dropdown-toggle"
-          id="dropdownUser1"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-        >
-          <img
-            src="https://github.com/mdo.png"
-            alt="hugenerd"
-            width="28"
-            height="28"
-            className="rounded-circle"
-          />
-          <span className="d-none d-sm-inline mx-1">{ logineUser?.employeeInfo?.firstName}</span>
-        </a>
-        <ul className="dropdown-menu dropdown-menu-end">
-          <li onClick={handleProfilePage}>
-            <a aria-label="go to profile" className="dropdown-item">
-              <div className="d-flex">
-                <div className="flex-shrink-0 me-3">
-                  <div className="avatar avatar-online">
-                    <img
-                      src="../assets/img/avatars/00.jpg"
-                      className="w-px-40 h-auto rounded-circle"
-                      alt="avatar-image"
-                      aria-label="Avatar Image"
-                    />
-                  </div>
-                </div>
-                <div className="flex-grow-1">
-                  <span className="fw-medium d-block">{ logineUser?.employeeInfo?.firstName}</span>
-                  <small className="text-muted">Admin</small>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li>
-            <div className="dropdown-divider"></div>
-          </li>
-          <li onClick={handleProfilePage}>
-            <a aria-label="go to profile" className="dropdown-item" >
-              <i className="bx bx-user me-2"></i>
-              <span className="align-middle">My Profile</span>
-            </a>
-          </li>
-          <li>
-            <a aria-label="go to setting" className="dropdown-item" href="#">
-              <i className="bx bx-cog me-2"></i>
-              <span className="align-middle">Settings</span>
-            </a>
-          </li>
-          <li>
-            <a aria-label="go to billing" className="dropdown-item" href="#">
-              <span className="d-flex align-items-center align-middle">
-                <i className="flex-shrink-0 bx bx-credit-card me-2"></i>
-                <span className="flex-grow-1 align-middle ms-1">Billing</span>
-                <span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
-                  4
-                </span>
-              </span>
-            </a>
-          </li>
-          <li>
-            <div className="dropdown-divider"></div>
-          </li>
-          <li>
-            <a
-              aria-label="click to log out"
-              className="dropdown-item"
-              href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
-              onClick={handleLogout}
-            >
-              <i className="bx bx-power-off me-2"></i>
-              <span className="align-middle">Log Out</span>
-            </a>
-          </li>
-        </ul>
-      </div> */}
     </aside>
   );
 };

src/pages/authentication/AuthWrapper.jsx

@@ -14,8 +14,12 @@ export const AuthWrapper = ({ children }) => {
                   to="/"
                   className="app-brand-link gap-2"
                 >
-                  <span className="app-brand-logo demo">
+                  <span className="app-brand-logo rounded-circle ">
-                    <img src="/img/brand/marco.png" alt="marco-logo" />
+                    <img
+                      src="/img/brand/marco.png"
+                      alt="marco-logo"
+                      className="app-brand-logo-login"
+                    />
                   </span>
                 </Link>
               </div>