From d33606a3be2e6cc20daaf95bfc1ca560a70280f2 Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Thu, 29 Dec 2022 15:53:24 +0100
Subject: [PATCH] Add basic navigation and content item components

---
 src/App.css                |  5 ++++
 src/App.js                 | 38 ++++++++++++------------------
 src/Content/ContentItem.js | 17 ++++++++++++++
 src/UI/Navigation.css      |  3 +++
 src/UI/Navigation.js       | 47 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 87 insertions(+), 23 deletions(-)
 create mode 100644 src/Content/ContentItem.js
 create mode 100644 src/UI/Navigation.css
 create mode 100644 src/UI/Navigation.js

diff --git a/src/App.css b/src/App.css
index 74b5e05..168d46d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,8 @@
+.container {
+  max-width: 800px;
+  background-color: #282c34;
+}
+
 .App {
   text-align: center;
 }
diff --git a/src/App.js b/src/App.js
index db196dd..e11a639 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,29 +1,21 @@
-import logo from './logo.svg';
-import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/js/bootstrap.bundle.min";
+
+import './App.css';
+import Navigation from './UI/Navigation';
+import ContentItem from './Content/ContentItem';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <p>
-          <button type="button" class="btn btn-primary">Primary</button>
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    return (
+    <div>
+      <Navigation />
+
+      <ContentItem />
+      <ContentItem />
+      <ContentItem />
+
     </div>
-  );
+    );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Content/ContentItem.js b/src/Content/ContentItem.js
new file mode 100644
index 0000000..cd63076
--- /dev/null
+++ b/src/Content/ContentItem.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+
+const ContentItem = (props) => {
+    return (
+        <div>
+            <p>
+            Whether we like it or not, we have all been born on this earth as part of one great human family. Rich or poor, educated or uneducated, belonging to one nation or another, to one religion or another, adhering to this ideology or that, ultimately each of us is just a human being like everyone else: we all desire happiness and do not want suffering. Furthermore, each of us has an equal right to pursue these goals.
+            </p>
+            <p>
+            Let us cultivate love and compassion, both of which give life true meaning. This is the religion I preach. It is simple. Its temple is the heart. Its teaching is love and compassion. Its moral values are loving and respecting others, whoever they may be. Whether one is a lay person or a monastic, we have no other option if we wish to survive in this world.
+            </p>
+        </div>
+    )
+}
+
+export default ContentItem;
diff --git a/src/UI/Navigation.css b/src/UI/Navigation.css
new file mode 100644
index 0000000..f57518f
--- /dev/null
+++ b/src/UI/Navigation.css
@@ -0,0 +1,3 @@
+.logo-sub {
+    font-size: 10pt;
+}
diff --git a/src/UI/Navigation.js b/src/UI/Navigation.js
new file mode 100644
index 0000000..9dc9404
--- /dev/null
+++ b/src/UI/Navigation.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import './Navigation.css';
+
+
+const Navigation = (props) => {
+    return (                
+        <nav className="navbar navbar-expand-lg bg-light">
+            <div className="container-fluid">
+                <a className="navbar-brand" href="#!">Kevin Matsubara<br/><span className='logo-sub'>Software Developer</span></a>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+                </button>
+                <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li className="nav-item">
+                    <a className="nav-link active" aria-current="page" href="#!">About</a>
+                    </li>
+                    {/* <li className="nav-item">
+                    <a className="nav-link" href="#!">Link</a>
+                    </li> */}
+                    <li className="nav-item dropdown">
+                    <a className="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Portal
+                    </a>
+                    <ul className="dropdown-menu">
+                        <li><a className="dropdown-item" href="#!">Software</a></li>
+                        <li><hr className="dropdown-divider"/></li>
+                        <li><a className="dropdown-item" href="#!">Radio Amateur</a></li>
+                        <li><hr className="dropdown-divider"/></li>
+                        <li><a className="dropdown-item" href="#!">Linux</a></li>
+                    </ul>
+                    </li>
+                    {/* <li className="nav-item">
+                    <a href="#!" className="nav-link disabled">Disabled</a>
+                    </li> */}
+                </ul>
+                {/* <form className="d-flex" role="search">
+                    <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+                    <button className="btn btn-outline-success" type="submit">Search</button>
+                </form> */}
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Navigation;
\ No newline at end of file