kevin/portfolio
1
0
Fork 0
Code

Create basic routing

Browse Source
This commit is contained in:
PA4KEV 2023-01-01 12:25:21 +01:00
parent 806f5b3b7c
commit bfed8512c9
7 changed files with 78 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.js
View File

@ -3,8 +3,7 @@ import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css';
import Navigation from './UI/Navigation';
import ContentItem from './Content/ContentItem';
import Sidebar from './UI/Sidebar';
function App() {
return (
@ -12,10 +11,6 @@ function App() {
<div className='row '>
<Navigation />
</div>
<div className='row'>
<Sidebar />
<ContentItem />
</div>
</div>
);
}

1
src/Content/ContentItem.js
View File

@ -4,6 +4,7 @@ import React from 'react';
const ContentItem = (props) => {
return (
<div className="col-6 offset-3">
<h1>{props.title}</h1>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" className="scrollspy-example" tabIndex="0">
<h4 id="list-item-1">Item 1</h4>
<p>

14
src/Pages/Linux/Linux.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import ContentItem from '../../Content/ContentItem';
import Sidebar from '../../UI/Sidebar';
function Linux (){
return (
<div className='row'>
<Sidebar />
<ContentItem title="Welcome to the Linux page!"/>
</div>
)
}
export default Linux;

14
src/Pages/Radio/Radio.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import ContentItem from '../../Content/ContentItem';
import Sidebar from '../../UI/Sidebar';
function Radio (){
return (
<div className='row'>
<Sidebar />
<ContentItem title="Welcome to the Radio page!"/>
</div>
)
}
export default Radio;

14
src/Pages/Software/Software.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import ContentItem from '../../Content/ContentItem';
import Sidebar from '../../UI/Sidebar';
function Software (){
return (
<div className='row'>
<Sidebar />
<ContentItem title="Welcome to the Software page!"/>
</div>
)
}
export default Software;

14
src/Pages/Test.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import ContentItem from '../Content/ContentItem';
import Sidebar from '../UI/Sidebar';
function Test (){
return (
<div className='row'>
<Sidebar />
<ContentItem title="Welcome to the Test page!"/>
</div>
)
}
export default Test;

23
src/UI/Navigation.js
View File

@ -1,9 +1,17 @@
import React from 'react';
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import Test from '../Pages/Test';
import Linux from '../Pages/Linux/Linux';
import Radio from '../Pages/Radio/Radio';
import Software from '../Pages/Software/Software';
import './Navigation.css';
const Navigation = (props) => {
return (
<Router>
<nav className="navbar navbar-expand-lg fixed-top bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#!">Kevin Matsubara<br/><span className='logo-sub'>Software Developer</span></a>
@ -13,7 +21,7 @@ const Navigation = (props) => {
<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>
<Link to="/test" className="nav-link active" aria-current="page" href="#!">Test</Link>
</li>
{/* <li className="nav-item">
<a className="nav-link" href="#!">Link</a>
@ -23,11 +31,11 @@ const Navigation = (props) => {
Portal
</a>
<ul className="dropdown-menu">
<li><a className="dropdown-item" href="#!">Software</a></li>
<li><Link to="/pages/software" className="dropdown-item" href="#!">Software</Link></li>
<li><hr className="dropdown-divider"/></li>
<li><a className="dropdown-item" href="#!">Radio Amateur</a></li>
<li><Link to="/pages/radio" className="dropdown-item" href="#!">Radio Amateur</Link></li>
<li><hr className="dropdown-divider"/></li>
<li><a className="dropdown-item" href="#!">Linux</a></li>
<li><Link to="/pages/linux" className="dropdown-item" href="#!">Linux</Link></li>
</ul>
</li>
{/* <li className="nav-item">
@ -41,6 +49,13 @@ const Navigation = (props) => {
</div>
</div>
</nav>
<Routes>
<Route exact path='/test' element={< Test />}></Route>
<Route exact path='/pages/software' element={< Software />}></Route>
<Route exact path='/pages/radio' element={< Radio />}></Route>
<Route exact path='/pages/linux' element={< Linux />}></Route>
</Routes>
</Router>
)
}