diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 18413d04..efa133dd 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -3,7 +3,10 @@ const withTM = require('next-transpile-modules')(['@sharingan/ui'])
/** @type {import('next').NextConfig} */
const nextConfigOptions = withTM({
- reactStrictMode: true
+ reactStrictMode: true,
+ images: {
+ domains: ['images.unsplash.com']
+ }
});
const sentryWebpackPluginOptions = {
diff --git a/apps/web/src/components/layout/private/sidebar.tsx b/apps/web/src/components/layout/private/sidebar.tsx
index d80f42fc..80a25ef8 100644
--- a/apps/web/src/components/layout/private/sidebar.tsx
+++ b/apps/web/src/components/layout/private/sidebar.tsx
@@ -1,11 +1,213 @@
-const Sidebar = () => {
+/* This example requires Tailwind CSS v2.0+ */
+import { Dialog, Transition } from '@headlessui/react';
+import { Icon } from '@sharingan/ui';
+import Image from 'next/image';
+import { Fragment, useState } from 'react';
+
+const navigation = [
+ { current: true, href: '#', icon: Icon.Home, name: 'Dashboard' },
+ { current: false, href: '#', icon: Icon.Users, name: 'Team' },
+ { current: false, href: '#', icon: Icon.Folder, name: 'Projects' },
+ { current: false, href: '#', icon: Icon.Calendar, name: 'Calendar' },
+ { current: false, href: '#', icon: Icon.Inbox, name: 'Documents' },
+ { current: false, href: '#', icon: Icon.ChartBart, name: 'Reports' },
+];
+
+function classNames(...classes: string[]) {
+ return classes.filter(Boolean).join(' ');
+}
+
+export default function Example() {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+
return (
-
-
Logo
-
Menu
-
Profile
-
- );
-};
+ <>
+ {/*
+ This example requires updating your template:
+
+ ```
+
+
+ ```
+ */}
+
+
+
+
+
+ {/* Static sidebar for desktop */}
+
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dashboard
+
+
+ {/* Replace with your content */}
+
+ {/* /End replace */}
+
+
+
+
+
+ >
+ );
+}
diff --git a/apps/web/src/containers/private/board.tsx b/apps/web/src/containers/private/board.tsx
index c6719950..1776ee73 100644
--- a/apps/web/src/containers/private/board.tsx
+++ b/apps/web/src/containers/private/board.tsx
@@ -1,8 +1,11 @@
+import { NextSeo } from 'next-seo';
+
import PrivateLayout from '@/components/layout/private/private-layout';
const Home = () => {
return (
+
Welcome to Dashboard
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2e22678a..237ea33b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,6 +13,8 @@
"tailwindcss": "^3.1.4"
},
"dependencies": {
+ "@headlessui/react": "^1.6.5",
+ "@heroicons/react": "^1.0.6",
"classnames": "^2.3.1",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
index c9282bdb..8a807039 100644
--- a/packages/ui/src/icons/index.tsx
+++ b/packages/ui/src/icons/index.tsx
@@ -1,3 +1,14 @@
+import {
+ CalendarIcon,
+ ChartBarIcon,
+ FolderIcon,
+ HomeIcon,
+ InboxIcon,
+ MenuIcon,
+ UsersIcon,
+ XIcon,
+} from '@heroicons/react/outline';
+
import CheckIcon from './check';
import CollectionIcon from './collection';
import CrossIcon from './cross';
@@ -8,24 +19,34 @@ import GithubIcon from './github';
import GoogleIcon from './google';
import ImportIcon from './import';
import LogoIcon from './logo';
+import LogoWhiteIcon from './logo-white';
import ProductHuntIcon from './product-hunt';
import ShareIcon from './share';
import SpinnerIcon from './spinner';
import TwitterIcon from './twitter';
export default {
+ Calendar: CalendarIcon,
+ ChartBart: ChartBarIcon,
Check: CheckIcon,
Collection: CollectionIcon,
Cross: CrossIcon,
DocumentSearch: DocumentSearchIcon,
Embed: EmbedIcon,
Extension: ExtensionIcon,
+ Folder: FolderIcon,
Github: GithubIcon,
Google: GoogleIcon,
+ Home: HomeIcon,
Import: ImportIcon,
+ Inbox: InboxIcon,
Logo: LogoIcon,
+ LogoWhite: LogoWhiteIcon,
+ Menu: MenuIcon,
ProductHunt: ProductHuntIcon,
Share: ShareIcon,
Spinner: SpinnerIcon,
Twitter: TwitterIcon,
+ Users: UsersIcon,
+ X: XIcon,
};
diff --git a/packages/ui/src/icons/logo-white.tsx b/packages/ui/src/icons/logo-white.tsx
new file mode 100644
index 00000000..d2ac0858
--- /dev/null
+++ b/packages/ui/src/icons/logo-white.tsx
@@ -0,0 +1,52 @@
+import { IconProps } from '../typings/components';
+
+const LogoIcon = ({ height = 32, width = 160 }: IconProps) => {
+ return (
+ /**/
+
+ );
+};
+
+export default LogoIcon;
diff --git a/packages/ui/src/icons/logo.tsx b/packages/ui/src/icons/logo.tsx
index 443e0e36..e4556e52 100644
--- a/packages/ui/src/icons/logo.tsx
+++ b/packages/ui/src/icons/logo.tsx
@@ -1,4 +1,4 @@
-import { IconProps } from '@/typings/common';
+import { IconProps } from '../typings/components';
const LogoIcon = ({ height = 32, width = 160 }: IconProps) => {
return (
diff --git a/yarn.lock b/yarn.lock
index 7a6f8bc1..3e671e67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1532,6 +1532,11 @@
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c"
integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==
+"@heroicons/react@^1.0.6":
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+ integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+
"@hookform/resolvers@^2.9.3":
version "2.9.3"
resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.9.3.tgz#13f6934cfe705e24fac094da377e0621adcfc424"