sidebar darker

frontend/src/components/AsideMenuItem.tsx

@@ -85,7 +85,7 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
   ].join(' ');
 
   return (
-    <li className={'px-3 py-1.5'}>
+<li className="p-0 m-0 rounded-none">
       {item.withDevider && <hr className={`${borders} mb-3`} />}
       {item.href && (
         <Link href={item.href} target={item.target} className={componentClass}>

frontend/src/components/AsideMenuLayer.tsx

@@ -65,7 +65,7 @@ export default function AsideMenuLayer({
   return (
     <aside
       id='asideMenu'
-      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
+      className={`${className} zzz w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden p-0 m-0 rounded-none bg-[#f8f8f8]`}
     >
       <div
         className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}

frontend/src/components/AsideMenuList.tsx

@@ -32,7 +32,7 @@ export default function AsideMenuList({
           />
         );
       })}
-      <li onClick={() => alert('Hello!')} className="cursor-pointer px-2 py-1 hover:bg-gray-200">New Item</li>
+<li onClick={() => alert('Hello!')} className="cursor-pointer px-2 py-1 hover:bg-gray-200 rounded-none">New Item</li>
     </ul>
   );
 }

frontend/src/css/_app.css

@@ -32,3 +32,12 @@ li.stack-item:not(:last-child):after {
 .app-sidebar-brand {
   box-shadow: 0px -1px 40px rgba(112, 144, 176, 0.2);
 }
+
+
+/* Custom override for sidebar styling */
+.app-sidebar {
+  background-color: #f8f8f8 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}

frontend/src/css/_theme.css

@@ -103,3 +103,13 @@
     @apply text-pavitra-800;
   }
 }
+
+
+/* Custom override for sidebar in themes */
+.theme-pink .app-sidebar,
+.theme-green .app-sidebar {
+  background-color: #f8f8f8 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}

frontend/src/styles.ts

@@ -52,7 +52,7 @@ export const basic: StyleObject = {
 };
 
 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white  lg:rounded-2xl',
+  aside: 'bg-[#f8f8f8] dark:text-white',
   asideScrollbars: 'aside-scrollbars-light',
   asideBrand: '',
   asideMenuItem: