Skip to content

Commit

Permalink
feat(web): organize dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@tericcabrel
tericcabrel committed Jul 26, 2022
1 parent 06e73e7 commit 61907e8
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 170 deletions.
2 changes: 1 addition & 1 deletion apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"next-sitemap": "^3.1.8",
"next-transpile-modules": "^9.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"tailwindcss": "^3.1.6",
"typescript": "4.7.4"
}
}
4 changes: 2 additions & 2 deletions apps/web/src/components/layout/private/private-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ const PrivateLayout = ({ children }: Props) => {
}

return (
<div className="relative w-full h-screen bg-gray-50 flex-grow">
<div className="relative w-full min-h-screen bg-gray-50 flex-grow">
<Sidebar />
<div className="flex-grow border border-4 bg-red-500"></div>
{children}
{/*<PrivateHeader user={data} />
<div className="relative top-[65px]">
{children}
Expand Down
278 changes: 122 additions & 156 deletions apps/web/src/components/layout/private/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* This example requires Tailwind CSS v2.0+ */
import { Disclosure, Menu, Transition } from '@headlessui/react';
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
import { Icon } from '@sharingan/ui';
import { Disclosure, Icon, Menu, Transition } from '@sharingan/ui';
import router from 'next/router';
import { Fragment } from 'react';

import { useLogoutUser } from '@/services/users/logout-user';

const user = {
email: '[email protected]',
imageUrl:
Expand All @@ -27,177 +27,143 @@ function classNames(...classes: string[]) {
}

const Sidebar = () => {
return (
<>
{/*
This example requires updating your template:
const [logoutUserMutation] = useLogoutUser();

```
<html class="h-full bg-gray-100">
<body class="h-full">
```
*/}
<div className="min-h-full">
<Disclosure as="nav" className="bg-white shadow-sm">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<Icon.LogoLight className="block lg:hidden h-8 w-auto" />
<Icon.Logo className="hidden lg:block h-8 w-auto" />
</div>
<div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? 'border-indigo-500 text-gray-900'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
<button
type="button"
className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
const logout = async () => {
await logoutUserMutation({
onCompleted: async () => {
await router.push('/');
},
});
};

{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700',
)}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
<div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
{open ? (
<Icon.X className="block h-6 w-6" aria-hidden="true" />
) : (
<Icon.Menu className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
return (
<Disclosure as="nav" className="bg-white shadow-sm">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<Icon.LogoLight className="block lg:hidden h-8 w-auto" />
<Icon.Logo className="hidden lg:block h-8 w-auto" />
</div>
</div>

<Disclosure.Panel className="sm:hidden">
<div className="pt-2 pb-3 space-y-1">
<div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
{navigation.map((item) => (
<Disclosure.Button
<a
key={item.name}
as="a"
href={item.href}
className={classNames(
item.current
? 'bg-indigo-50 border-indigo-500 text-indigo-700'
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
? 'border-indigo-500 text-gray-900'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Disclosure.Button>
</a>
))}
</div>
<div className="pt-4 pb-3 border-t border-gray-200">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={user.imageUrl} alt="" />
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">{user.name}</div>
<div className="text-sm font-medium text-gray-500">{user.email}</div>
</div>
<button
type="button"
className="ml-auto bg-white flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 space-y-1">
{userNavigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
>
{item.name}
</Disclosure.Button>
))}
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
</Menu.Button>
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700',
)}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
<div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
{open ? (
<Icon.X className="block h-6 w-6" aria-hidden="true" />
) : (
<Icon.Menu className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
</div>
</div>

<div className="py-10">
<header>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold leading-tight text-gray-900">Dashboard</h1>
<Disclosure.Panel className="sm:hidden">
<div className="pt-2 pb-3 space-y-1">
{navigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className={classNames(
item.current
? 'bg-indigo-50 border-indigo-500 text-indigo-700'
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Disclosure.Button>
))}
</div>
</header>
<main>
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
{/* Replace with your content */}
<div className="px-4 py-8 sm:px-0">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
<div className="pt-4 pb-3 border-t border-gray-200">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={user.imageUrl} alt="" />
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">{user.name}</div>
<div className="text-sm font-medium text-gray-500">{user.email}</div>
</div>
</div>
<div className="mt-3 space-y-1">
{userNavigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
>
{item.name}
</Disclosure.Button>
))}
</div>
{/* /End replace */}
</div>
</main>
</div>
</div>
</>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
};

Expand Down
20 changes: 16 additions & 4 deletions apps/web/src/containers/private/board.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,22 @@ const Home = () => {
return (
<PrivateLayout>
<NextSeo title="Home" />
<main className="main">
<h1 className="title">Welcome to Dashboard</h1>
<br />
</main>
<div className="py-10">
<header>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold leading-tight text-gray-900">Dashboard</h1>
</div>
</header>
<main>
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
{/* Replace with your content */}
<div className="px-4 py-8 sm:px-0">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
{/* /End replace */}
</div>
</main>
</div>
</PrivateLayout>
);
};
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ import Button from './src/forms/button';
import TextInput from './src/forms/text-input';
import Icon from './src/icons';

export * from '@headlessui/react';

export { Alert, Button, Icon, TextInput };
4 changes: 2 additions & 2 deletions packages/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
"@types/react-dom": "17.0.17",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
"tailwindcss": "^3.1.6"
},
"dependencies": {
"@headlessui/react": "^1.6.5",
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^1.0.6",
"classnames": "^2.3.1",
"react": "18.2.0",
Expand Down
Loading

0 comments on commit 61907e8

Please sign in to comment.