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,31 +53,52 @@ 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>
-        <div className="sidebar">
+        <Page.Header className="custom-navbar">
-          {error ? (
+          <Text b>NovaMD</Text>
-            <div className="error">{error}</div>
+          <Spacer w={1} />
-          ) : (
+          <User src="https://via.placeholder.com/40" name="User" />
-            <FileTree 
+          <Spacer w={0.5} />
-              files={files} 
+          <Button auto icon={<Settings />} />
-              onFileSelect={handleFileSelect} 
+        </Page.Header>
-              selectedFile={selectedFile} 
+        <Page.Content className="main-container">
+          <div className="sidebar">
+            {error ? (
+              <div className="error">{error}</div>
+            ) : (
+              <FileTree 
+                files={files} 
+                onFileSelect={handleFileSelect} 
+                selectedFile={selectedFile} 
+              />
+            )}
+          </div>
+          <div className="main-content">
+            {renderBreadcrumbs()}
+            <Editor 
+              content={content} 
+              onChange={setContent} 
+              onSave={handleSave}
+              filePath={selectedFile}
             />
-          )}
+          </div>
-        </div>
+        </Page.Content>
-        <div className="main-content">
+      </Page>
-          <h1>NovaMD</h1>
-          <Editor 
-            content={content} 
-            onChange={setContent} 
-            onSave={handleSave}
-            filePath={selectedFile}
-          />
-        </div>
-      </div>
     </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 {
-    width: $sidebar-width;
+  display: flex;
-    padding: $padding;
+  height: calc(100vh - #{$navbar-height});
-    border-right: 1px solid $border-color;
+  padding: 0 !important; // Override Geist UI's default padding
-    overflow-y: auto;
+}
-  }
 
-  .main-content {
+.sidebar {
-    flex-grow: 1;
+  width: $sidebar-width;
-    padding: $padding;
+  padding: $padding;
-    overflow-y: auto;
+  border-right: 1px solid $border-color;
+  overflow-y: auto;
+}
 
-    h1 {
+.main-content {
-      margin-top: 0;
+  flex-grow: 1;
-    }
+  padding: $padding;
+  overflow-y: auto;
+
+  // Add styles for breadcrumbs
+  .breadcrumbs {
+    margin-bottom: $padding;
   }
 }