theme

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/colors.ts

@@ -1,7 +1,7 @@
 import type { ColorButtonKey } from './interfaces';
 
 export const gradientBgBase = 'bg-gradient-to-tr';
-export const colorBgBase = 'bg-violet-50/50';
+export const colorBgBase = 'bg-[#f6f8fa]';
 export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
 export const gradientBgViolet = `${gradientBgBase} ${colorBgBase}`;
 export const gradientBgDark = `${gradientBgBase} from-dark-700 via-dark-900 to-dark-800`;

frontend/src/components/AsideMenuItem.tsx

@@ -1,113 +1,30 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { mdiMinus, mdiPlus } from '@mdi/js';
-import BaseIcon from './BaseIcon';
 import Link from 'next/link';
-import { getButtonColor } from '../colors';
-import AsideMenuList from './AsideMenuList';
-import { MenuAsideItem } from '../interfaces';
-import { useAppSelector } from '../stores/hooks';
 import { useRouter } from 'next/router';
+import { useAppSelector } from '../stores/hooks';
+import { MenuAsideItem } from '../interfaces';
 
 type Props = {
   item: MenuAsideItem;
-  isDropdownList?: boolean;
 };
 
-const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+const AsideMenuItem = ({ item }: Props) => {
-  const [isLinkActive, setIsLinkActive] = useState(false);
-  const [isDropdownActive, setIsDropdownActive] = useState(false);
-
-  const asideMenuItemStyle = useAppSelector(
-    (state) => state.style.asideMenuItemStyle,
-  );
-  const asideMenuDropdownStyle = useAppSelector(
-    (state) => state.style.asideMenuDropdownStyle,
-  );
-  const asideMenuItemActiveStyle = useAppSelector(
-    (state) => state.style.asideMenuItemActiveStyle,
-  );
-  const borders = useAppSelector((state) => state.style.borders);
-  const activeLinkColor = useAppSelector(
-    (state) => state.style.activeLinkColor,
-  );
-  const activeClassAddon =
-    !item.color && isLinkActive ? asideMenuItemActiveStyle : '';
-
   const { asPath, isReady } = useRouter();
+  const isActive = isReady && item.href ? asPath.startsWith(item.href) : false;
+  const borders = useAppSelector((state) => state.style.borders);
 
-  useEffect(() => {
+  const baseClass = 'block px-3 py-2 text-gray-800 hover:bg-gray-100';
-    if (item.href && isReady) {
+  const activeClass = isActive ? 'border-b-2 border-blue-600' : '';
-      const linkPathName = new URL(item.href, location.href).pathname + '/';
-      const activePathname = new URL(asPath, location.href).pathname;
-
-      const activeView = activePathname.split('/')[1];
-      const linkPathNameView = linkPathName.split('/')[1];
-
-      setIsLinkActive(linkPathNameView === activeView);
-    }
-  }, [item.href, isReady, asPath]);
-
-  const asideMenuItemInnerContents = (
-    <>
-      {item.icon && (
-        <BaseIcon
-          path={item.icon}
-          className={`flex-none mx-3 ${activeClassAddon}`}
-          size='18'
-        />
-      )}
-      <span
-        className={`grow text-ellipsis line-clamp-1 ${
-          item.menu ? '' : 'pr-12'
-        } ${activeClassAddon}`}
-      >
-        {item.label}
-      </span>
-      {item.menu && (
-        <BaseIcon
-          path={isDropdownActive ? mdiMinus : mdiPlus}
-          className={`flex-none ${activeClassAddon}`}
-          w='w-12'
-        />
-      )}
-    </>
-  );
-
-  const componentClass = [
-    'flex cursor-pointer py-1.5 ',
-    isDropdownList ? 'px-6 text-sm' : '',
-    item.color
-      ? getButtonColor(item.color, false, true)
-      : `${asideMenuItemStyle}`,
-    isLinkActive
-      ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800`
-      : '',
-  ].join(' ');
 
   return (
-    <li className={'px-3 py-1.5'}>
+    <li>
-      {item.withDevider && <hr className={`${borders} mb-3`} />}
+      {item.withDevider && <hr className={`${borders} my-2`} />}
-      {item.href && (
+      {item.href ? (
-        <Link href={item.href} target={item.target} className={componentClass}>
+        <Link href={item.href} target={item.target} className={`${baseClass} ${activeClass}`}> 
-          {asideMenuItemInnerContents}
+          {item.label}
         </Link>
-      )}
+      ) : (
-      {!item.href && (
+        <span className={`${baseClass} ${activeClass}`}>{item.label}</span>
-        <div
-          className={componentClass}
-          onClick={() => setIsDropdownActive(!isDropdownActive)}
-        >
-          {asideMenuItemInnerContents}
-        </div>
-      )}
-      {item.menu && (
-        <AsideMenuList
-          menu={item.menu}
-          className={`${asideMenuDropdownStyle} ${
-            isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
-          }`}
-          isDropdownList
-        />
       )}
     </li>
   );

frontend/src/styles.ts

@@ -25,31 +25,29 @@ interface StyleObject {
 }
 
 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white',
+  aside: 'bg-white',
   asideScrollbars: 'aside-scrollbars-light',
   asideBrand: '',
-  asideMenuItem:
+  asideMenuItem: 'text-gray-800 hover:bg-gray-100',
-    'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
+  asideMenuItemActive: 'font-bold text-blue-600',
-  asideMenuItemActive: 'font-bold text-black dark:text-white',
+  asideMenuDropdown: '',
-  asideMenuDropdown: 'bg-gray-100/75',
+  navBarItemLabel: 'text-gray-800',
-  navBarItemLabel: 'text-blue-600',
+  navBarItemLabelHover: 'hover:text-blue-600',
-  navBarItemLabelHover: 'hover:text-black',
+  navBarItemLabelActiveColor: 'text-blue-600',
-  navBarItemLabelActiveColor: 'text-black',
+  overlay: '',
-  overlay: 'from-white via-gray-100 to-white',
+  activeLinkColor: 'bg-gray-100',
-  activeLinkColor: 'bg-gray-100/70',
+  bgLayoutColor: 'bg-white',
-  bgLayoutColor: 'bg-gray-50',
+  iconsColor: 'text-gray-800',
-  iconsColor: 'text-blue-500',
   cardsColor: 'bg-white',
-  focusRingColor:
+  focusRingColor: 'focus:ring focus:ring-blue-300 focus:outline-none',
-    'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+  corners: '',
-  corners: 'rounded',
+  cardsStyle: 'bg-white border border-gray-200',
-  cardsStyle: 'bg-white border border-pavitra-400',
   linkColor: 'text-blue-600',
   websiteHeder: 'border-b border-gray-200',
   borders: 'border-gray-200',
   shadow: '',
   websiteSectionStyle: '',
-  textSecondary: 'text-gray-500',
+  textSecondary: 'text-gray-600',
 };
 
 export const dataGridStyles = {