Dashboard design (#72)

* fix: import errors

* notification provider

* feat: removed style prop for notification

* fix: package issue

* fix: package issue

* fix: package issue

* fix: package issue

* package.json changes

* feat: dashboard route

* feat: authlayout

* feat: sidebar

* feat: authlayout width

* feat: dashboard design

* fix: route fix

* feat: Binded all routes with DashboardLayout

* feat: removed unwanted routes

* feat: dashboardlayout changes

* feat: dashboard

* feat: removed dashboardlayout wroking as wrapper

* feat: dashboard card title changes

* feat: moved to dashboard layout to privatelayout

* feat: auth

* feat: sidebar resposive

Author: Zeeshnhmd

package-lock.json

@@ -4,7 +4,7 @@ import { HomePage } from "./pages/Homepage";
 import { AppContextProvider } from "./context/AppContextProvider";
 import { Flags } from "./pages/Flags";
 import { Segments } from "./pages/Segments";
-import { Dashboard } from "./pages/Dashboard";
+import Dashboard from "./pages/Dashboard";
 import PrivateRoute from "./components/shared/PrivateRoute";
 import { NotificationProvider } from "./components/shared/NotificationProvider";
 import { ApiKeys } from "./components/settings/apiKeys/ApiKeys";
@@ -16,6 +16,7 @@ const App: React.FC = () => {
                 <BrowserRouter>
                     <Routes>
                         <Route path="/" element={<HomePage />} />
+
                         <Route
                             path="/dashboard"
                             element={

packages/ui/src/App.tsx

@@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom";
+
+import Sidebar from "./Sidebar";
+
+const AuthLayout = () => {
+    return (
+        <div className="flex w-screen bg-[#F9FAFB]">
+            <aside className="pl-2 py-2 w-60 h-screen">
+                <div className="pl-2 pt-10 rounded-2xl bg-white h-full">
+                    <Sidebar />
+                </div>
+            </aside>
+            <div className="w-[calc(100vw_-_240px)] p-6 max-w-6xl mx-auto">
+                <Outlet />
+            </div>
+        </div>
+    );
+};
+
+export default AuthLayout;

packages/ui/src/components/shared/AuthLayout.tsx

@@ -2,14 +2,15 @@ import { ReactElement } from "react";
 import React from "react";
 import { Navigate } from "react-router-dom";
 import { useAppContext } from "../../context/AppContextProvider";
+import DashboardLayout from "../../layout/DashboardLayout";
 
 const PrivateRoute: React.FC<{ children: ReactElement }> = ({ children }) => {
     const { authContext } = useAppContext();
 
     return !(authContext.userData?.authenticated as boolean) ? (
         <Navigate replace to={"/unauthorized"} />
     ) : (
-        children
+        <DashboardLayout>{children}</DashboardLayout>
     );
 };
 

packages/ui/src/components/shared/PrivateRoute.tsx

@@ -0,0 +1,72 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+    ArrowLeftOnRectangleIcon,
+    Cog6ToothIcon,
+    FlagIcon,
+    FolderIcon,
+    HomeIcon,
+} from "@heroicons/react/24/outline";
+
+const Sidebar = () => {
+    const location = useLocation();
+
+    const routes = [
+        {
+            id: 1,
+            link: "/dashboard",
+            name: "Dashboard",
+            icon: <HomeIcon className="h-5 w-5 font-extrabold" />,
+        },
+        {
+            id: 2,
+            link: "/flags",
+            name: "Flags",
+            icon: <FlagIcon className="h-5 w-5 font-extrabold" />,
+        },
+        {
+            id: 3,
+            link: "/segments",
+            name: "Segments",
+            icon: <FolderIcon className="h-5 w-5 font-extrabold" />,
+        },
+        {
+            id: 4,
+            link: "/settings/apikeys",
+            name: "Settings",
+            icon: <Cog6ToothIcon className="h-5 w-5 font-extrabold" />,
+        },
+    ];
+
+    return (
+        <div className="flex flex-col justify-between h-full">
+            <ul className="flex flex-col gap-8">
+                {routes.map((el) => (
+                    <li key={el.id}>
+                        <Link
+                            to={el.link}
+                            className={`flex items-center text-base gap-4 pl-8 ${
+                                el.link === location.pathname
+                                    ? "text-black font-bold"
+                                    : "text-[#2563EB]"
+                            } hover:text-black`}
+                        >
+                            {el.icon}
+                            <span>{el.name}</span>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+            <div className="bg-[#2563EB] hover:bg-blue-700 text-white py-3 rounded-b-2xl">
+                <Link
+                    to="/"
+                    className="flex items-center text-base gap-4 pl-8 text-white hover:"
+                >
+                    <ArrowLeftOnRectangleIcon className="h-5 w-5 font-extrabold" />
+                    <span>Logout</span>
+                </Link>
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;