From 294f8b56c83cd5618db3f933def52dfaa1c3b754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?torbj=C3=B8rn=20saghaug=20halland?= <torbjsh@stud.ntnu.no>
Date: Wed, 17 Apr 2024 12:10:57 +0200
Subject: [PATCH] Added navigation to main page
---
Frontend/src/App.jsx | 24 +++---------------------
Frontend/src/Navigation.jsx | 23 +++++++++++++++++++++++
Frontend/src/{ => css}/App.css | 0
Frontend/src/{ => css}/index.css | 0
Frontend/src/main.jsx | 2 +-
5 files changed, 27 insertions(+), 22 deletions(-)
create mode 100644 Frontend/src/Navigation.jsx
rename Frontend/src/{ => css}/App.css (100%)
rename Frontend/src/{ => css}/index.css (100%)
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index b8b8473..0ae64df 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,33 +1,15 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
-import './App.css'
+import './css/App.css'
+import Navigation from './Navigation'
function App() {
const [count, setCount] = useState(0)
return (
<>
- <div>
- <a href="https://vitejs.dev" target="_blank">
- <img src={viteLogo} className="logo" alt="Vite logo" />
- </a>
- <a href="https://react.dev" target="_blank">
- <img src={reactLogo} className="logo react" alt="React logo" />
- </a>
- </div>
- <h1>Vite + React</h1>
- <div className="card">
- <button onClick={() => setCount((count) => count + 1)}>
- count is {count}
- </button>
- <p>
- Edit <code>src/App.jsx</code> and save to test HMR
- </p>
- </div>
- <p className="read-the-docs">
- Click on the Vite and React logos to learn more
- </p>
+ <Navigation />
</>
)
}
diff --git a/Frontend/src/Navigation.jsx b/Frontend/src/Navigation.jsx
new file mode 100644
index 0000000..d40393d
--- /dev/null
+++ b/Frontend/src/Navigation.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+function Navigation() {
+
+ return (
+
+ <div className="navigation">
+
+ <div className="navTop">
+ <h1> ElectroMart </h1>
+ </div>
+
+ <div className="navBot">
+ <ul className="navigationBar">
+ <li> <a href="#" id="products"> Products </a> </li>
+ <li> <a href="#" id="categories"> Categories</a> </li>
+ </ul>
+ </div>
+ </div>
+ );
+}
+
+export default Navigation;
\ No newline at end of file
diff --git a/Frontend/src/App.css b/Frontend/src/css/App.css
similarity index 100%
rename from Frontend/src/App.css
rename to Frontend/src/css/App.css
diff --git a/Frontend/src/index.css b/Frontend/src/css/index.css
similarity index 100%
rename from Frontend/src/index.css
rename to Frontend/src/css/index.css
diff --git a/Frontend/src/main.jsx b/Frontend/src/main.jsx
index 54b39dd..cafb340 100644
--- a/Frontend/src/main.jsx
+++ b/Frontend/src/main.jsx
@@ -1,7 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
-import './index.css'
+import './css/index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
--
GitLab