feat(style): update console with new sidebar and topbar design (#425)

Because

- We have new topbar and sidebar design

This commit

- update console with new sidebar and topbar design

package.json

@@ -28,8 +28,10 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^1.9.1",
     "@code-hike/mdx": "^0.7.3",
-    "@instill-ai/design-system": "^0.10.6",
-    "@instill-ai/toolkit": "^0.46.3",
+    "@instill-ai/design-system": "^0.15.0",
+    "@instill-ai/design-tokens": "^0.1.5",
+    "@instill-ai/toolkit": "^0.47.1",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-select": "^1.2.1",
     "@tanstack/react-query": "^4.26.1",
     "@tanstack/react-query-devtools": "^4.26.1",

src/components/PageBase.tsx

@@ -1,19 +1,22 @@
-import { Sidebar } from "@/components";
-import { ReactNode } from "react";
+import * as React from "react";
 
-export type PageBaseProps = {
-  children: ReactNode;
+export const PageBase = ({ children }: { children: React.ReactNode }) => {
+  return <div className="min-h-screen w-full">{children}</div>;
 };
 
-export const PageBase = ({ children }: PageBaseProps) => {
+const Container = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-1">{children}</div>;
+};
+
+const Content = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex min-h-screen flex-col">
-      <div className="flex flex-1 flex-row">
-        <Sidebar />
-        <div className="flex min-h-screen flex-1 flex-col overflow-y-scroll bg-instillGrey05">
-          {children}
-        </div>
+    <div className="flex flex-1 bg-semantic-bg-base-bg">
+      <div className="h-[calc(100vh-var(--topbar-height))] w-full min-w-[927px] overflow-y-scroll p-20">
+        {children}
       </div>
     </div>
   );
 };
+
+PageBase.Container = Container;
+PageBase.Content = Content;

src/components/Sidebar/PipelineCollapsible.tsx

@@ -0,0 +1,89 @@
+import cn from "clsx";
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { Icons } from "@instill-ai/design-system";
+import * as Collapsible from "@radix-ui/react-collapsible";
+
+export const PipelineCollapsible = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const router = useRouter();
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={setIsOpen} className="w-full">
+      <div className="relative">
+        <Link
+          href="/pipelines"
+          className={cn(
+            "mb-2 flex flex-row items-center rounded-xs border border-transparent px-3 py-2 hover:bg-semantic-bg-base-bg",
+            {
+              "!border-semantic-accent-default border-opacity-100 bg-semantic-accent-bg":
+                router.pathname === "/pipelines",
+            }
+          )}
+        >
+          <div className="flex flex-row items-center space-x-3">
+            <Icons.Pipeline className="h-6 w-6 stroke-semantic-fg-primary" />
+            <h4 className="text-semantic-fg-primary product-body-text-2-semibold">
+              Pipelines
+            </h4>
+          </div>
+        </Link>
+        <Collapsible.Trigger className="absolute right-3 top-1/2 z-30 ml-auto -translate-y-1/2">
+          {isOpen ? (
+            <Icons.ChevronUp className="h-6 w-6 stroke-semantic-fg-primary" />
+          ) : (
+            <Icons.ChevronDown className="h-6 w-6 stroke-semantic-fg-primary" />
+          )}
+        </Collapsible.Trigger>
+      </div>
+      <Collapsible.Content className="flex flex-col space-y-1">
+        <Link
+          href="/sources"
+          className={cn(
+            "flex flex-row items-center space-x-2 rounded-xs border border-transparent py-2 pl-12 pr-3 hover:bg-semantic-bg-base-bg",
+            {
+              "!border-semantic-accent-default border-opacity-100 bg-semantic-accent-bg":
+                router.pathname === "/sources",
+            }
+          )}
+        >
+          <Icons.Database01 className="h-6 w-6 stroke-semantic-fg-primary" />
+          <p className="stroke-semantic-fg-primary product-body-text-2-semibold">
+            Sources
+          </p>
+        </Link>
+        <Link
+          href="/models"
+          className={cn(
+            "flex flex-row items-center space-x-2 rounded-xs border border-transparent py-2 pl-12 pr-3 hover:bg-semantic-bg-base-bg",
+            {
+              "!border-semantic-accent-default border-opacity-100 bg-semantic-accent-bg":
+                router.pathname === "/models",
+            }
+          )}
+        >
+          <Icons.Model className="h-6 w-6 stroke-semantic-fg-primary" />
+          <p className="stroke-semantic-fg-primary product-body-text-2-semibold">
+            Models
+          </p>
+        </Link>
+        <Link
+          href="/destinations"
+          className={cn(
+            "flex flex-row items-center space-x-2 rounded-xs border border-transparent py-2 pl-12 pr-3 hover:bg-semantic-bg-base-bg",
+            {
+              "!border-semantic-accent-default border-opacity-100 bg-semantic-accent-bg":
+                router.pathname === "/destinations",
+            }
+          )}
+        >
+          <Icons.Box className="h-6 w-6 stroke-semantic-fg-primary" />
+          <p className="stroke-semantic-fg-primary product-body-text-2-semibold">
+            Destinations
+          </p>
+        </Link>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};