added header

src/App.js

@@ -6,6 +6,7 @@ import Sidebar from './sidebar/sidebar'
 import WidgetsContainer from './sidebar/widgetsContainer'
 import UploadsContainer from './sidebar/uploadsContainer'
 import Canvas from './canvas/canvas'
+import Header from './components/header'
 
 function App() {
 
@@ -32,10 +33,12 @@ function App() {
 	]
 
 	return (
-		<div className="tw-w-full tw-h-[100vh] tw-flex tw-bg-primaryBg">
-
-			<Sidebar tabs={tabs}/>
-			<Canvas />
+		<div className="tw-w-full tw-h-[100vh] tw-flex tw-flex-col tw-bg-primaryBg">
+			<Header className="tw-h-[6vh]"/>
+			<div className="tw-w-full tw-h-[94vh] tw-flex">
+				<Sidebar tabs={tabs}/>
+				<Canvas />
+			</div>
 		</div>
 	);
 }

src/components/header.js

@@ -0,0 +1,41 @@
+import { useState } from "react"
+
+import { Select, Input } from "antd"
+import { DownOutlined } from "@ant-design/icons"
+
+const items = [
+    {
+        key: 'tkinter',
+        label: 'tkinter',
+    },
+    {
+        key: 'customtk',
+        label: 'customtk',
+    },
+]
+
+
+function Header(props){
+
+    const [projectName, setProjectName] = useState("project")
+
+    return (
+        <div className={`tw-w-full tw-bg-primaryBg tw-p-2 tw-flex tw-place-items-center
+                             ${props.className||''}`}>
+
+            <Select
+                defaultValue={"tkinter"}
+                options={items}
+                className="tw-min-w-[150px]"
+            />
+            
+            <div className="tw-ml-auto tw-flex tw-place-content-center">
+                <Input value={projectName} onChange={(e) => setProjectName(e.target.value)} placeholder="project name"/>
+            </div>
+
+        </div>
+    )
+
+} 
+
+export default Header

src/sidebar/sidebar.js

@@ -46,7 +46,8 @@ function Sidebar({tabs}){
         <div className={`tw-relative tw-duration-[0.3s] tw-transition-all
                         tw-max-w-[400px] tw-flex tw-h-full tw-z-10
                         ${sidebarOpen ? "tw-bg-white tw-min-w-[400px] tw-w-[400px] tw-shadow-lg": "tw-bg-primaryBg tw-min-w-[80px] tw-w-[80px]"}
-                        `} ref={sideBarRef} 
+                        `} 
+                        ref={sideBarRef} 
                         onMouseLeave={hideOnMouseLeave}
                 >