Skip to content

Commit fe1bfe8

Browse files
mime9599mime9599
committed
minor presentation changes
1 parent 08d8e4a commit fe1bfe8

File tree

16 files changed

+425
-31
lines changed

16 files changed

+425
-31
lines changed

‎src/App.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {InputField} from './components/Canvas/InputField.js';
77
import MainCanvas from './components/Canvas/MainCanvas';
88
import SelectionSort from './components/Strategy/Algorithms/SelectionSort';
99

10-
import Header from './partial/Header';
11-
import Selection from './partial/Selection';
12-
import Footer from './partial/Footer';
10+
import Header from './components/Page/partial/Header';
11+
import Selection from './components/Page/partial/Selection';
12+
import Footer from './components/Page/partial/Footer';
1313
import SplashScreen from './components/Page/Splash/SplashScreen';
1414
import Box from './modals/cube/Box';
1515
import AppRouter from './AppRouter';
@@ -19,11 +19,6 @@ import AppRouter from './AppRouter';
1919
{/* Placeholder for the About page */}
2020

2121

22-
function About() {
23-
return null;
24-
}
25-
26-
2722

2823
class App extends Component {
2924

‎src/Utility/Dropdown/Dropdown.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, {useState} from 'react';
2+
import {DescriptorItems} from '../Navigation_Descriptor';
3+
import './dropdown.css';
4+
import {Link} from 'react-router-dom';
5+
6+
7+
8+
/**
9+
* @Description: This is the dropdown menu that is used in the navigation bar.
10+
* @briandesignz/react-dropdown-menu is used to create the dropdown menu.
11+
* @returns {JSX.Element}
12+
* @constructor
13+
*/
14+
function Dropdown() {
15+
const [click, setClick] = useState(false);
16+
17+
const handleClick = () => setClick(!click);
18+
19+
return (
20+
<>
21+
<ul
22+
onClick = {handleClick}
23+
className = {click ? 'dropdown-menu clicked' : 'dropdown-menu'}
24+
>
25+
{DescriptorItems.map((item, index) => {
26+
return (
27+
<li key = {index}>
28+
<Link
29+
className = {item.class}
30+
to = {item.path}
31+
onClick = {() => setClick(false)}
32+
>
33+
{item.title}
34+
</Link>
35+
</li>
36+
);
37+
})}
38+
</ul>
39+
</>
40+
);
41+
}
42+
43+
44+
export default Dropdown;

‎src/Utility/Dropdown/dropdown.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.dropdown-menu {
2+
background: #dedada;
3+
width: 165px;
4+
position: absolute;
5+
text-align: center;
6+
top: 70px;
7+
list-style: none;
8+
z-index: 10;
9+
}
10+
11+
.dropdown-menu li {
12+
background: #565960;
13+
cursor: pointer;
14+
}
15+
16+
.dropdown-menu li:hover {
17+
background: #5cabff;
18+
}
19+
20+
.dropdown-menu.clicked {
21+
display: none;
22+
}
23+
24+
.dropdown-link {
25+
display: block;
26+
height: 100%;
27+
width: 100%;
28+
text-decoration: none;
29+
color: #d2d3ef;
30+
padding: 16px;
31+
}
32+
33+
@media screen and (max-width: 960px) {
34+
.fa-caret-down {
35+
display: none;
36+
}
37+
}

‎src/Utility/Navigation_Descriptor.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const DescriptorItems = [
2+
{
3+
title: 'Alorithms',
4+
path: '/alorithms-Documentation',
5+
class: 'dropdown-link'
6+
},
7+
{
8+
title: 'Design',
9+
path: '/alorithms-design',
10+
class: 'dropdown-link'
11+
},
12+
{
13+
title: 'Code',
14+
path: '/alorithms-source',
15+
class: 'dropdown-link'
16+
},
17+
{
18+
title: '',
19+
path: '/',
20+
class: 'dropdown-link'
21+
}
22+
];

‎src/components/Canvas/MainCanvas.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Canvas } from './Canvas';
77
import { InputField } from './InputField';
88
import { Options } from './options/Options';
99
import { CONSTANTS } from '../../Utility/config'
10+
import Navigation from '../Page/partial/Navbar/Navigation';
11+
1012

1113
class MainCanvas extends Component {
1214
constructor(props) {
@@ -32,6 +34,7 @@ class MainCanvas extends Component {
3234
console.log(options);
3335
return (
3436
<>
37+
<Navigation />
3538
<InputField name = {['generic-input', 'instructions']} InputHandler={this}/>
3639
<Canvas generatedArray={this.state.generatedArray} barColor={options.defaultBarColor}/>
3740
</>

‎src/components/Page/About/AboutScreen.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
import React from 'react';
1+
import React from 'react';
22
import './about.css';
33
import '../Splash/splash.css';
4-
4+
import Navigation from '../partial/Navbar/Navigation';
55

66

77

88
const AboutScreen = () => {
99

1010
return (
11-
<div className = "splash_background">
12-
<div className = "splash_overlay">
13-
<div className = "splash_content">
14-
<div className = "about-screen">
15-
<div className = "about-screen-text">
16-
<h1>About</h1>
11+
<>
12+
<Navigation/>
13+
<div className = "splash_background">
14+
<div className = "splash_overlay">
15+
<div className = "splash_content">
16+
<div className = "about-screen">
17+
<div className = "about-screen-text">
18+
<h1>About</h1>
19+
</div>
1720
</div>
1821
</div>
1922
</div>
2023
</div>
21-
</div>
24+
</>
2225
);
2326
};
2427

‎src/components/Page/Contact/ContactScreen.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
1-
import React from 'react';
1+
import React from 'react';
22
import './contact.css';
33
import '../Splash/splash.css';
4-
4+
import Navigation from '../partial/Navbar/Navigation';
55

66

77

88
const ContactScreen = () => {
99

1010
return (
11-
<div className = "splash_background">
12-
<div className = "splash_overlay">
13-
<div className = "splash_content">
14-
<div className = "contact-screen">
15-
<div className = "contact-screen-text">
16-
<h1>Contact Us</h1>
11+
<>
12+
<Navigation/>
13+
14+
<div className = "splash_background">
15+
<div className = "splash_overlay">
16+
<div className = "splash_content">
17+
<div className = "contact-screen">
18+
<div className = "contact-screen-text">
19+
<h1>Contact Us</h1>
20+
</div>
1721
</div>
1822
</div>
1923
</div>
2024
</div>
21-
</div>
25+
</>
2226
);
2327
};
2428

‎src/components/Page/Splash/SplashScreen.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
1+
import React from 'react';
22
import './splash.css';
3-
3+
import Navigation from '../partial/Navbar/Navigation';
44

55

66

src/partial/Footer.js renamed to src/components/Page/partial/Footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import '../App.css';
2+
import '../../../App.css';
33

44

55

‎src/components/Page/partial/GenericButton/Button.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import './button.css';
3+
import {Link} from 'react-router-dom';
4+
5+
6+
7+
export function Button(props) {
8+
return (
9+
<Link to = {props.ref}>
10+
<button className = "btn"><span className={props.style}>{props.value}</span></button>
11+
</Link>
12+
);
13+
}

0 commit comments

Comments
 (0)