landing

components/editor/sidebar/index.tsx

@@ -64,7 +64,7 @@ const data: (TFile | TFolder)[] = [
 
 export default function Sidebar() {
   return (
-    <div className="h-full w-56 flex flex-col text-sm items-start p-2">
+    <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
       <div className="flex w-full items-center justify-between h-8 mb-1 ">
         <div className="text-muted-foreground">EXPLORER</div>
         <div className="flex space-x-1">

components/navbar/index.tsx

@@ -1,16 +1,20 @@
 import Image from "next/image"
 import Logo from "@/assets/logo.svg"
-import { Input } from "../ui/input"
 import { Pencil } from "lucide-react"
 import { UserButton } from "@clerk/nextjs"
+import Link from "next/link"
+import { dark } from "@clerk/themes"
 
 export default function Navbar() {
   return (
     <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
-        <button className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm">
+        <Link
+          href="/"
+          className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
+        >
           <Image src={Logo} alt="Logo" width={36} height={36} />
-        </button>
+        </Link>
         <div className="text-sm font-medium flex items-center">
           My React Project{" "}
           <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
@@ -18,7 +22,12 @@ export default function Navbar() {
           </div>
         </div>
       </div>
-      <UserButton />
+      <UserButton
+        appearance={{
+          baseTheme: dark,
+        }}
+        afterSignOutUrl="/"
+      />
     </div>
   )
 }