start sidebar

app/code/[id]/page.tsx

@@ -1,6 +1,5 @@
 import Navbar from "@/components/navbar"
 import dynamic from "next/dynamic"
-import Image from "next/image"
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
   ssr: false,
@@ -8,7 +7,7 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
 
 export default function CodePage() {
   return (
-    <div className="w-screen flex flex-col h-screen bg-background">
+    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Navbar />
       <div className="w-screen flex grow">
         <CodeEditor />

components/editor/index.tsx

@@ -21,6 +21,7 @@ import {
   X,
 } from "lucide-react"
 import Tab from "../ui/tab"
+import Sidebar from "./sidebar"
 
 export default function CodeEditor() {
   const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
@@ -65,7 +66,7 @@ export default function CodeEditor() {
 
   return (
     <>
-      <div className="h-full w-52"></div>
+      <Sidebar />
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel
           className="p-2 flex flex-col"
@@ -108,16 +109,16 @@ export default function CodeEditor() {
                 <div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
                   Preview
                   <div className="flex space-x-1 translate-x-1">
-                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
                       <TerminalSquare className="w-4 h-4" />
                     </div>
-                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
                       <ChevronLeft className="w-4 h-4" />
                     </div>
-                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
                       <ChevronRight className="w-4 h-4" />
                     </div>
-                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
                       <RotateCw className="w-3 h-3" />
                     </div>
                   </div>

components/editor/sidebar.tsx

@@ -0,0 +1,39 @@
+import {
+  File,
+  FilePlus,
+  Folder,
+  FolderOpen,
+  FolderPlus,
+  Search,
+} from "lucide-react"
+
+export default function Sidebar() {
+  return (
+    <div className="h-full w-56 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">
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FilePlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FolderPlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <Search className="w-4 h-4" />
+          </div>
+        </div>
+      </div>
+      <div className="w-full mt-2">
+        <div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
+          <File className="w-4 h-4 mr-2" />
+          index.html
+        </div>
+        <div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
+          <Folder className="w-4 h-4 mr-2" />
+          styles
+        </div>
+      </div>
+    </div>
+  )
+}

components/navbar/index.tsx

@@ -12,7 +12,7 @@ export default function Navbar() {
         </button>
         <div className="text-sm font-medium flex items-center">
           My React Project{" "}
-          <div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-md">
+          <div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
             <Pencil className="w-4 h-4" />
           </div>
         </div>

components/ui/tab.tsx

@@ -22,7 +22,7 @@ export default function Tab({
       {children}
       <div
         onClick={onClose ?? undefined}
-        className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+        className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
       >
         <X className="w-3 h-3" />
       </div>