theme
This commit is contained in:
Flatlogic Bot
parent
bd06859ce7
commit
fe66b3cc75
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,3 +1,8 @@
|
||||
node_modules/
|
||||
*/node_modules/
|
||||
*/build/
|
||||
|
||||
**/node_modules/
|
||||
**/build/
|
||||
.DS_Store
|
||||
.env
|
||||
File diff suppressed because one or more lines are too long
1
frontend/json/runtimeError.json
Normal file
1
frontend/json/runtimeError.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
@ -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`;
|
||||
|
||||
@ -1,116 +1,33 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { mdiMinus, mdiPlus } from '@mdi/js';
|
||||
import BaseIcon from './BaseIcon';
|
||||
import React from 'react';
|
||||
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 [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 AsideMenuItem = ({ item }: Props) => {
|
||||
const { asPath, isReady } = useRouter();
|
||||
const isActive = isReady && item.href ? asPath.startsWith(item.href) : false;
|
||||
const borders = useAppSelector((state) => state.style.borders);
|
||||
|
||||
useEffect(() => {
|
||||
if (item.href && isReady) {
|
||||
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(' ');
|
||||
const baseClass = 'block px-3 py-2 text-gray-800 hover:bg-gray-100';
|
||||
const activeClass = isActive ? 'border-b-2 border-blue-600' : '';
|
||||
|
||||
return (
|
||||
<li className={'px-3 py-1.5'}>
|
||||
{item.withDevider && <hr className={`${borders} mb-3`} />}
|
||||
{item.href && (
|
||||
<Link href={item.href} target={item.target} className={componentClass}>
|
||||
{asideMenuItemInnerContents}
|
||||
<li>
|
||||
{item.withDevider && <hr className={`${borders} my-2`} />}
|
||||
{item.href ? (
|
||||
<Link href={item.href} target={item.target} className={`${baseClass} ${activeClass}`}>
|
||||
{item.label}
|
||||
</Link>
|
||||
)}
|
||||
{!item.href && (
|
||||
<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
|
||||
/>
|
||||
) : (
|
||||
<span className={`${baseClass} ${activeClass}`}>{item.label}</span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default AsideMenuItem;
|
||||
export default AsideMenuItem;
|
||||
@ -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:
|
||||
'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-black dark:text-white',
|
||||
asideMenuDropdown: 'bg-gray-100/75',
|
||||
navBarItemLabel: 'text-blue-600',
|
||||
navBarItemLabelHover: 'hover:text-black',
|
||||
navBarItemLabelActiveColor: 'text-black',
|
||||
overlay: 'from-white via-gray-100 to-white',
|
||||
activeLinkColor: 'bg-gray-100/70',
|
||||
bgLayoutColor: 'bg-gray-50',
|
||||
iconsColor: 'text-blue-500',
|
||||
asideMenuItem: 'text-gray-800 hover:bg-gray-100',
|
||||
asideMenuItemActive: 'font-bold text-blue-600',
|
||||
asideMenuDropdown: '',
|
||||
navBarItemLabel: 'text-gray-800',
|
||||
navBarItemLabelHover: 'hover:text-blue-600',
|
||||
navBarItemLabelActiveColor: 'text-blue-600',
|
||||
overlay: '',
|
||||
activeLinkColor: 'bg-gray-100',
|
||||
bgLayoutColor: 'bg-white',
|
||||
iconsColor: 'text-gray-800',
|
||||
cardsColor: 'bg-white',
|
||||
focusRingColor:
|
||||
'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: 'rounded',
|
||||
cardsStyle: 'bg-white border border-pavitra-400',
|
||||
focusRingColor: 'focus:ring focus:ring-blue-300 focus:outline-none',
|
||||
corners: '',
|
||||
cardsStyle: 'bg-white border border-gray-200',
|
||||
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 = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user