diff --git a/public/icons/crown.svg b/public/icons/crown.svg new file mode 100644 index 00000000..48a8bb40 --- /dev/null +++ b/public/icons/crown.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/logo.svg b/public/icons/logo.svg new file mode 100644 index 00000000..e01126c0 --- /dev/null +++ b/public/icons/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/icons/plus.svg b/public/icons/plus.svg new file mode 100644 index 00000000..4b350da7 --- /dev/null +++ b/public/icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Sidebar/DashboardItem.tsx b/src/components/Sidebar/DashboardItem.tsx new file mode 100644 index 00000000..06722d06 --- /dev/null +++ b/src/components/Sidebar/DashboardItem.tsx @@ -0,0 +1,25 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +import crown from '@/../public/icons/crown.svg'; +import { Dashboard } from '@/types/Dashboard.interface'; + +interface DashboardItemProps { + dashboard: Dashboard; + nowDashboard?: number; +} + +export default function DashboardItem({ dashboard, nowDashboard }: DashboardItemProps) { + const isActive = nowDashboard === dashboard.id; + const itemClasses = `flex items-center gap-4 rounded-md px-3 py-3 ${isActive ? 'bg-violet_f1 text-black_33' : 'text-gray_78'} hover:bg-violet_f1`; + + return ( +
  • + +
    +

    {dashboard.title}

    + {dashboard.createdByMe && my} + +
    • + ); +} diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx new file mode 100644 index 00000000..648619d3 --- /dev/null +++ b/src/components/Sidebar/index.tsx @@ -0,0 +1,46 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { useSelector } from 'react-redux'; + +import DashboardItem from './DashboardItem'; + +import logo from '@/../public/icons/logo.svg'; +import plus from '@/../public/icons/plus.svg'; +import { useFetchDashboards } from '@/hooks/useFetchDashboards'; +import { RootState } from '@/store/store'; + +export default function Sidebar() { + const router = useRouter(); + const { id } = router.query; + + const { isLoading } = useFetchDashboards(); + const dashboards = useSelector((state: RootState) => state.dashboards.dashboards); + + if (isLoading) return
    Loading...
    ; + + return ( + + ); +}