Update layout

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { GeistProvider, CssBaseline, useToasts } from '@geist-ui/core';
+import { GeistProvider, CssBaseline, useToasts, Page, Text, User, Button, Spacer, Breadcrumbs } from '@geist-ui/core';
+import { Settings } from '@geist-ui/icons';
 import Editor from './components/Editor';
 import FileTree from './components/FileTree';
 import { fetchFileList, fetchFileContent, saveFileContent } from './services/api';
@@ -52,10 +53,30 @@ function App() {
     }
   }, [setToast]);
 
+  const renderBreadcrumbs = () => {
+    if (!selectedFile) return null;
+    const pathParts = selectedFile.split('/');
+    return (
+      <Breadcrumbs>
+        {pathParts.map((part, index) => (
+          <Breadcrumbs.Item key={index}>{part}</Breadcrumbs.Item>
+        ))}
+      </Breadcrumbs>
+    );
+  };
+
   return (
     <GeistProvider>
       <CssBaseline />
-      <div className="App">
+      <Page>
+        <Page.Header className="custom-navbar">
+          <Text b>NovaMD</Text>
+          <Spacer w={1} />
+          <User src="https://via.placeholder.com/40" name="User" />
+          <Spacer w={0.5} />
+          <Button auto icon={<Settings />} />
+        </Page.Header>
+        <Page.Content className="main-container">
           <div className="sidebar">
             {error ? (
               <div className="error">{error}</div>
@@ -68,7 +89,7 @@ function App() {
             )}
           </div>
           <div className="main-content">
-          <h1>NovaMD</h1>
+            {renderBreadcrumbs()}
             <Editor 
               content={content} 
               onChange={setContent} 
@@ -76,7 +97,8 @@ function App() {
               filePath={selectedFile}
             />
           </div>
-      </div>
+        </Page.Content>
+      </Page>
     </GeistProvider>
   );
 }

frontend/src/App.scss

@@ -2,26 +2,38 @@
 $sidebar-width: 250px;
 $border-color: #eaeaea;
 $padding: 20px;
+$navbar-height: 64px; // Adjust this value based on your preference
 
-.App {
+.custom-navbar {
   display: flex;
-  height: 100vh;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $padding;
+  height: $navbar-height;
+  border-bottom: 1px solid $border-color;
+}
 
-  .sidebar {
+.main-container {
+  display: flex;
+  height: calc(100vh - #{$navbar-height});
+  padding: 0 !important; // Override Geist UI's default padding
+}
+
+.sidebar {
   width: $sidebar-width;
   padding: $padding;
   border-right: 1px solid $border-color;
   overflow-y: auto;
-  }
+}
 
-  .main-content {
+.main-content {
   flex-grow: 1;
   padding: $padding;
   overflow-y: auto;
 
-    h1 {
-      margin-top: 0;
-    }
+  // Add styles for breadcrumbs
+  .breadcrumbs {
+    margin-bottom: $padding;
   }
 }