Skip to content

Commit d2b91c1

Browse files
vikdieselvikdiesel
committed
init
0 parents  commit d2b91c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+8069
-0
lines changed

‎.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "prettier"]
3+
}

‎.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# testing
7+
/coverage
8+
9+
# next.js
10+
/.next/
11+
/out/
12+
13+
# production
14+
/build
15+
16+
# misc
17+
.DS_Store
18+
*.pem
19+
20+
# debug
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# local env files
26+
.env.local
27+
.env.development.local
28+
.env.test.local
29+
.env.production.local
30+
31+
# vercel
32+
.vercel

‎README.md‎

Whitespace-only changes.

‎components/NavBarItem.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Link from "next/link";
2+
import { useState } from 'react';
3+
import { useSelector } from 'react-redux'
4+
import { mdiChevronUp, mdiChevronDown } from "@mdi/js";
5+
import BaseDivider from "./baseDivider";
6+
import BaseIcon from "./baseIcon";
7+
import UserAvatarCurrentUser from "./userAvatarCurrentUser";
8+
import NavBarMenuList from "./navBarMenuList";
9+
10+
export default function NavBarItem({ item }) {
11+
const navBarItemLabelActiveColorStyle = useSelector(state => state.style.navBarItemLabelActiveColorStyle)
12+
const navBarItemLabelStyle = useSelector(state => state.style.navBarItemLabelStyle)
13+
const navBarItemLabelHoverStyle = useSelector(state => state.style.navBarItemLabelHoverStyle)
14+
15+
const userName = useSelector(state => state.main.userName)
16+
17+
const [isDropdownActive, setIsDropdownActive] = useState(false)
18+
19+
const componentClass = [
20+
"block lg:flex items-center relative cursor-pointer",
21+
isDropdownActive
22+
? `${navBarItemLabelActiveColorStyle} dark:text-slate-400`
23+
: `${navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${navBarItemLabelHoverStyle}`,
24+
item.menu ? "lg:py-2 lg:px-3" : "py-2 px-3",
25+
item.isDesktopNoLabel ? "lg:w-16 lg:justify-center" : ""
26+
].join(' ')
27+
28+
const itemLabel = item.isCurrentUser ? userName : item.label
29+
30+
const NavBarItemComponentContents = (
31+
<>
32+
<div className={`flex items-center ${item.menu ? 'bg-gray-100 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0' : ''}`}>
33+
{item.isCurrentUser && <UserAvatarCurrentUser className="w-6 h-6 mr-3 inline-flex" />}
34+
{item.icon && <BaseIcon path={item.icon} className="transition-colors" />}
35+
<span className={`px-2 transition-colors ${item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''}`}>
36+
{itemLabel}
37+
</span>
38+
{item.menu && <BaseIcon path={isDropdownActive ? mdiChevronUp : mdiChevronDown} className="hidden lg:inline-flex transition-colors" />}
39+
</div>
40+
{item.menu && (
41+
<div
42+
className={`${!isDropdownActive ? 'lg:hidden' : ''} text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-800 dark:border-slate-700`}
43+
>
44+
<NavBarMenuList menu={item.menu} onClick={() => setIsDropdownActive(!isDropdownActive)} />
45+
</div>
46+
)}
47+
</>
48+
)
49+
50+
if (item.isDivider) {
51+
return <BaseDivider navBar />
52+
}
53+
54+
if (item.href) {
55+
return (
56+
<Link
57+
href={item.href}
58+
59+
>
60+
<a className={componentClass}>
61+
{NavBarItemComponentContents}
62+
</a>
63+
</Link>
64+
)
65+
}
66+
67+
return (
68+
<div className={componentClass}>
69+
{NavBarItemComponentContents}
70+
</div>
71+
)
72+
}

‎components/asideMenu.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import AsideMenuLayer from "./asideMenuLayer";
2+
import OverlayLayer from "./overlayLayer";
3+
4+
export default function AsideMenu({menu, isAsideMobileExpanded=false, isAsideLgActive=false}) {
5+
return (
6+
<>
7+
<AsideMenuLayer
8+
menu={menu}
9+
className={`${isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'} ${!isAsideLgActive ? 'lg:hidden xl:flex' : ''}`}
10+
/>
11+
{isAsideLgActive && <OverlayLayer zIndex="z-30" />}
12+
</>
13+
)
14+
}

‎components/asideMenuItem.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useState } from "react";
2+
import { mdiMinus, mdiPlus } from "@mdi/js";
3+
import BaseIcon from "./baseIcon";
4+
import Link from "next/link";
5+
import { getButtonColor } from "../src/colors";
6+
import { useSelector } from "react-redux";
7+
import AsideMenuList from "./asideMenuList";
8+
9+
export default function AsideMenuItem({item, isDropdownList=false}) {
10+
const [isDropdownActive, setIsDropdownActive] = useState(false);
11+
const asideMenuItemStyle = useSelector(state => state.style.asideMenuItemStyle)
12+
const asideMenuDropdownStyle = useSelector(state => state.style.asideMenuDropdownStyle)
13+
14+
const asideMenuItemInnerContents = (
15+
<>
16+
{item.icon && <BaseIcon path={item.icon} className="flex-none" w="w-16" size="18" />}
17+
<span className={`grow text-ellipsis line-clamp-1 ${item.menu ? '' : 'pr-12'}`}>
18+
{item.label}
19+
</span>
20+
{item.menu && <BaseIcon path={isDropdownActive ? mdiMinus : mdiPlus} className="flex-none" w="w-12" />}
21+
</>
22+
)
23+
24+
const componentClass = [
25+
"flex cursor-pointer",
26+
isDropdownList ? "py-3 px-6 text-sm" : "py-3",
27+
item.color
28+
? getButtonColor(item.color, false, true)
29+
: `${asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`,
30+
].join(" ")
31+
32+
return (
33+
<li>
34+
{item.href && (
35+
<Link href={item.href} target={item.target}>
36+
<a className={componentClass}>
37+
{asideMenuItemInnerContents}
38+
</a>
39+
</Link>
40+
)}
41+
{!item.href && (
42+
<div className={componentClass}>
43+
{asideMenuItemInnerContents}
44+
</div>
45+
)}
46+
{item.menu && (
47+
<AsideMenuList
48+
menu={item.menu}
49+
className={`${asideMenuDropdownStyle} ${isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'}`}
50+
isDropdownList
51+
/>
52+
)}
53+
</li>
54+
)
55+
}

‎components/asideMenuLayer.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { useSelector } from "react-redux"
2+
import { mdiLogout, mdiClose } from "@mdi/js";
3+
import BaseIcon from "./baseIcon";
4+
import AsideMenuItem from "./asideMenuItem";
5+
import AsideMenuList from "./asideMenuList";
6+
7+
export default function AsideMenuLayer({menu, className}) {
8+
const asideStyle = useSelector(state => state.style.asideStyle)
9+
const asideBrandStyle = useSelector(state => state.style.asideBrandStyle)
10+
const asideScrollbarsStyle = useSelector(state => state.style.asideScrollbarsStyle)
11+
const darkMode = useSelector(state => state.style.darkMode)
12+
13+
const logoutItem = {
14+
label: "Logout",
15+
icon: mdiLogout,
16+
color: "info",
17+
isLogout: true,
18+
};
19+
20+
return (
21+
<aside className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}>
22+
<div
23+
className={`lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900 ${asideStyle}`}
24+
>
25+
<div className={`flex flex-row h-14 items-center justify-between dark:bg-slate-900 ${asideBrandStyle}`}>
26+
<div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
27+
<b className="font-black">One</b>
28+
</div>
29+
<button className="hidden lg:inline-block xl:hidden p-3">
30+
<BaseIcon path={mdiClose} />
31+
</button>
32+
</div>
33+
<div
34+
className={`flex-1 overflow-y-auto overflow-x-hidden ${darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle}`}
35+
>
36+
<AsideMenuList menu={menu} />
37+
</div>
38+
<ul>
39+
<AsideMenuItem item={logoutItem} />
40+
</ul>
41+
</div>
42+
</aside>
43+
)
44+
}

‎components/asideMenuList.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import AsideMenuItem from "./asideMenuItem";
2+
3+
export default function AsideMenuList({menu, isDropdownList=false, className=''}) {
4+
return (
5+
<ul className={className}>
6+
{menu.map((item, index) => (
7+
<AsideMenuItem
8+
key={index}
9+
item={item}
10+
isDropdownList={isDropdownList}
11+
/>
12+
))}
13+
</ul>
14+
)
15+
}

‎components/baseButton.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import Link from 'next/link'
3+
import { getButtonColor } from '../src/colors';
4+
import BaseIcon from './baseIcon';
5+
6+
export default function BaseButton({label, icon, iconSize, href, target, type=null, color, asAnchor=false, className, small=false, outline=false, active=false, disabled=false, roundedFull=false}) {
7+
const componentClass = [
8+
"inline-flex",
9+
"cursor-pointer",
10+
"justify-center",
11+
"items-center",
12+
"whitespace-nowrap",
13+
"focus:outline-none",
14+
"transition-colors",
15+
"focus:ring",
16+
"duration-150",
17+
"border",
18+
roundedFull ? "rounded-full" : "rounded",
19+
getButtonColor(color, outline, !disabled, active),
20+
className
21+
];
22+
23+
if (!label && icon) {
24+
componentClass.push("p-1");
25+
} else if (small) {
26+
componentClass.push("text-sm", roundedFull ? "px-3 py-1" : "p-1");
27+
} else {
28+
componentClass.push("py-2", roundedFull ? "px-6" : "px-3");
29+
}
30+
31+
if (disabled) {
32+
componentClass.push(
33+
"cursor-not-allowed",
34+
outline ? "opacity-50" : "opacity-70"
35+
);
36+
}
37+
38+
const componentClassString = componentClass.join(' ')
39+
40+
const componentChildren = <>
41+
{ icon && <BaseIcon path={icon} size={iconSize} /> }
42+
{ label && <span className={small && icon ? 'px-1' : 'px-2'}>{label}</span> }
43+
</>
44+
45+
if (href) {
46+
return (<Link href={href} target={target} disabled={disabled} passHref>
47+
<a className={componentClassString} disabled={disabled}>
48+
{componentChildren}
49+
</a>
50+
</Link>)
51+
}
52+
53+
return React.createElement(
54+
asAnchor ? 'a' : 'button',
55+
{ className: componentClassString, type: type ?? 'button', target, disabled },
56+
componentChildren
57+
)
58+
}

‎components/baseButtons.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
export default function BaseButtons({noWrap=false, type='justify-start', mb='-mb-3', children}) {
4+
const parentClass = [
5+
"flex",
6+
"items-center",
7+
type,
8+
noWrap ? "flex-nowrap" : "flex-wrap",
9+
mb
10+
];
11+
12+
return <div className={parentClass}>{children}</div>
13+
}

0 commit comments

Comments
 (0)