Skip to content

Commit

Permalink
Update dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@eric-bach
eric-bach committed May 17, 2024
1 parent 7a7c562 commit 47ca0be
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 109 deletions.
8 changes: 8 additions & 0 deletions frontend.template/src/app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import { Content } from '@/components/home/content';

const dashboard = () => {
return <Content />;
};

export default dashboard;
23 changes: 9 additions & 14 deletions frontend.template/src/components/sidebar/sidebar-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import NextLink from "next/link";
import React from "react";
import { useSidebarContext } from "../layout/layout-context";
import clsx from "clsx";
import NextLink from 'next/link';
import React from 'react';
import { useSidebarContext } from '../layout/layout-context';
import clsx from 'clsx';

interface Props {
title: string;
Expand All @@ -10,7 +10,7 @@ interface Props {
href?: string;
}

export const SidebarItem = ({ icon, title, isActive, href = "" }: Props) => {
export const SidebarItem = ({ icon, title, isActive, href = '' }: Props) => {
const { collapsed, setCollapsed } = useSidebarContext();

const handleClick = () => {
Expand All @@ -19,21 +19,16 @@ export const SidebarItem = ({ icon, title, isActive, href = "" }: Props) => {
}
};
return (
<NextLink
href={href}
className="text-default-900 active:bg-none max-w-full"
>
<NextLink href={href} className='text-default-900 active:bg-none max-w-full'>
<div
className={clsx(
isActive
? "bg-primary-100 [&_svg_path]:fill-primary-500"
: "hover:bg-default-100",
"flex gap-2 w-full min-h-[44px] h-full items-center px-3.5 rounded-xl cursor-pointer transition-all duration-150 active:scale-[0.98]"
isActive ? 'bg-primary-100 [&_svg_path]:fill-primary-500' : 'hover:bg-default-100',
'flex gap-2 w-full min-h-[44px] h-full items-center px-3.5 rounded-xl cursor-pointer transition-all duration-150 active:scale-[0.98]'
)}
onClick={handleClick}
>
{icon}
<span className="text-default-900">{title}</span>
<span className='text-default-900'>{title}</span>
</div>
</NextLink>
);
Expand Down
139 changes: 44 additions & 95 deletions frontend.template/src/components/sidebar/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
import React from "react";
import { Sidebar } from "./sidebar.styles";
import { Avatar, Tooltip } from "@nextui-org/react";
import { CompaniesDropdown } from "./companies-dropdown";
import { HomeIcon } from "../icons/sidebar/home-icon";
import { PaymentsIcon } from "../icons/sidebar/payments-icon";
import { BalanceIcon } from "../icons/sidebar/balance-icon";
import { AccountsIcon } from "../icons/sidebar/accounts-icon";
import { CustomersIcon } from "../icons/sidebar/customers-icon";
import { ProductsIcon } from "../icons/sidebar/products-icon";
import { ReportsIcon } from "../icons/sidebar/reports-icon";
import { DevIcon } from "../icons/sidebar/dev-icon";
import { ViewIcon } from "../icons/sidebar/view-icon";
import { SettingsIcon } from "../icons/sidebar/settings-icon";
import { CollapseItems } from "./collapse-items";
import { SidebarItem } from "./sidebar-item";
import { SidebarMenu } from "./sidebar-menu";
import { FilterIcon } from "../icons/sidebar/filter-icon";
import { useSidebarContext } from "../layout/layout-context";
import { ChangeLogIcon } from "../icons/sidebar/changelog-icon";
import { usePathname } from "next/navigation";
import React from 'react';
import { Sidebar } from './sidebar.styles';
import { Avatar, Tooltip } from '@nextui-org/react';
import { CompaniesDropdown } from './companies-dropdown';
import { HomeIcon } from '../icons/sidebar/home-icon';
import { PaymentsIcon } from '../icons/sidebar/payments-icon';
import { BalanceIcon } from '../icons/sidebar/balance-icon';
import { AccountsIcon } from '../icons/sidebar/accounts-icon';
import { CustomersIcon } from '../icons/sidebar/customers-icon';
import { ProductsIcon } from '../icons/sidebar/products-icon';
import { ReportsIcon } from '../icons/sidebar/reports-icon';
import { DevIcon } from '../icons/sidebar/dev-icon';
import { ViewIcon } from '../icons/sidebar/view-icon';
import { SettingsIcon } from '../icons/sidebar/settings-icon';
import { CollapseItems } from './collapse-items';
import { SidebarItem } from './sidebar-item';
import { SidebarMenu } from './sidebar-menu';
import { FilterIcon } from '../icons/sidebar/filter-icon';
import { useSidebarContext } from '../layout/layout-context';
import { ChangeLogIcon } from '../icons/sidebar/changelog-icon';
import { usePathname } from 'next/navigation';

export const SidebarWrapper = () => {
const pathname = usePathname();
const { collapsed, setCollapsed } = useSidebarContext();

return (
<aside className="h-screen z-[20] sticky top-0">
{collapsed ? (
<div className={Sidebar.Overlay()} onClick={setCollapsed} />
) : null}
<aside className='h-screen z-[20] sticky top-0'>
{collapsed ? <div className={Sidebar.Overlay()} onClick={setCollapsed} /> : null}
<div
className={Sidebar({
collapsed: collapsed,
Expand All @@ -37,90 +35,41 @@ export const SidebarWrapper = () => {
<div className={Sidebar.Header()}>
<CompaniesDropdown />
</div>
<div className="flex flex-col justify-between h-full">
<div className='flex flex-col justify-between h-full'>
<div className={Sidebar.Body()}>
<SidebarItem
title="Home"
icon={<HomeIcon />}
isActive={pathname === "/"}
href="/"
/>
<SidebarMenu title="Main Menu">
<SidebarItem
isActive={pathname === "/accounts"}
title="Accounts"
icon={<AccountsIcon />}
href="accounts"
/>
<SidebarItem
isActive={pathname === "/payments"}
title="Payments"
icon={<PaymentsIcon />}
/>
<CollapseItems
icon={<BalanceIcon />}
items={["Banks Accounts", "Credit Cards", "Loans"]}
title="Balances"
/>
<SidebarItem
isActive={pathname === "/customers"}
title="Customers"
icon={<CustomersIcon />}
/>
<SidebarItem
isActive={pathname === "/products"}
title="Products"
icon={<ProductsIcon />}
/>
<SidebarItem
isActive={pathname === "/reports"}
title="Reports"
icon={<ReportsIcon />}
/>
<SidebarItem title='Home' icon={<HomeIcon />} isActive={pathname === '/'} href='/' />
<SidebarMenu title='Main Menu'>
<SidebarItem isActive={pathname === '/accounts'} title='Accounts' icon={<AccountsIcon />} href='accounts' />
<SidebarItem isActive={pathname === '/payments'} title='Payments' icon={<PaymentsIcon />} />
<CollapseItems icon={<BalanceIcon />} items={['Banks Accounts', 'Credit Cards', 'Loans']} title='Balances' />
<SidebarItem isActive={pathname === '/customers'} title='Customers' icon={<CustomersIcon />} />
<SidebarItem isActive={pathname === '/products'} title='Products' icon={<ProductsIcon />} />
<SidebarItem isActive={pathname === '/reports'} title='Reports' icon={<ReportsIcon />} />
</SidebarMenu>

<SidebarMenu title="General">
<SidebarItem
isActive={pathname === "/developers"}
title="Developers"
icon={<DevIcon />}
/>
<SidebarItem
isActive={pathname === "/view"}
title="View Test Data"
icon={<ViewIcon />}
/>
<SidebarItem
isActive={pathname === "/settings"}
title="Settings"
icon={<SettingsIcon />}
/>
<SidebarMenu title='General'>
<SidebarItem isActive={pathname === '/developers'} title='Developers' icon={<DevIcon />} />
<SidebarItem isActive={pathname === '/view'} title='View Test Data' icon={<ViewIcon />} />
<SidebarItem isActive={pathname === '/settings'} title='Settings' icon={<SettingsIcon />} />
</SidebarMenu>

<SidebarMenu title="Updates">
<SidebarItem
isActive={pathname === "/changelog"}
title="Changelog"
icon={<ChangeLogIcon />}
/>
<SidebarMenu title='Updates'>
<SidebarItem isActive={pathname === '/changelog'} title='Changelog' icon={<ChangeLogIcon />} />
</SidebarMenu>
</div>
<div className={Sidebar.Footer()}>
<Tooltip content={"Settings"} color="primary">
<div className="max-w-fit">
<Tooltip content={'Settings'} color='primary'>
<div className='max-w-fit'>
<SettingsIcon />
</div>
</Tooltip>
<Tooltip content={"Adjustments"} color="primary">
<div className="max-w-fit">
<Tooltip content={'Adjustments'} color='primary'>
<div className='max-w-fit'>
<FilterIcon />
</div>
</Tooltip>
<Tooltip content={"Profile"} color="primary">
<Avatar
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
size="sm"
/>
<Tooltip content={'Profile'} color='primary'>
<Avatar src='https://i.pravatar.cc/150?u=a042581f4e29026704d' size='sm' />
</Tooltip>
</div>
</div>
Expand Down

0 comments on commit 47ca0be

Please sign in to comment.