nav setup

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import Navigation from './components/Navigation';
+import Navigation from './components/Navigation/Navigation';
 import DocsGPT from './components/DocsGPT';
 import './App.css';
 

frontend/src/components/Navigation.tsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-
-function MobileNavigation() {
-  return <div>Mobile Navigation</div>;
-}
-
-function DesktopNavigation() {
-  return <div>Desktop Navigation</div>;
-}
-
-export default function Navigation({ isMobile }: { isMobile: boolean }) {
-  if (isMobile) {
-    return <MobileNavigation />;
-  } else {
-    return <DesktopNavigation />;
-  }
-}

frontend/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Arrow1 from './imgs/arrow.svg';
+
+function MobileNavigation() {
+  return <div>Mobile Navigation</div>;
+}
+
+function DesktopNavigation() {
+  return (
+    <div className="fixed h-screen w-72 border-r-2 border-gray-100 bg-gray-50 lg:w-96">
+      <div className="h-16 border-b-2 border-gray-100">
+        <button className="float-right mr-4 mt-5 h-5 w-5">
+          <img src={Arrow1} alt="menu toggle" className="m-auto w-3" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function Navigation({ isMobile }: { isMobile: boolean }) {
+  if (isMobile) {
+    return <MobileNavigation />;
+  } else {
+    return <DesktopNavigation />;
+  }
+}

frontend/src/components/Navigation/imgs/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54"/>
+</svg>