main menu

This commit is contained in:
devid2971 2021-05-14 13:57:28 +02:00
parent 5efe10e610
commit cec1787cf0
15 changed files with 17042 additions and 0 deletions

23
highneed_react/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

70
highneed_react/README.md Normal file
View File

@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

16635
highneed_react/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,39 @@
{
"name": "highneed",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://kit.fontawesome.com/193dc25cf1.js" crossorigin="anonymous"></script>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@ -0,0 +1,6 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Quicksand';
}

19
highneed_react/src/App.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './App.css';
import NavBar from './components/NavBar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return (
<>
<Router>
<NavBar />
<Switch>
<Route path='/' exact />
</Switch>
</Router>
</>
);
}
export default App;

View File

@ -0,0 +1,75 @@
.navbar
{
background-color: #64BE7B;
width: 100%;
height: 50px;
z-index: 999;
}
.navbar-container
{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 45px;
}
.line
{
height: 5px;
width: 100%;
background-color: #347945;
}
h1
{
color: white;
font-size: 18px;
}
h2 {
color: white;
font-weight: lighter;
font-size: 12px;
text-align: center;
}
.icons
{
display: flex;
}
.logo
{
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-container
{
height: 45px;
width: 45px;
display: flex;
align-items: center;
justify-content: center;
}
li
{
display: flex;
padding: 5px;
text-align: center;
}
.sidebar.disable
{
visibility: hidden;
}

View File

@ -0,0 +1,90 @@
import React, {useState} from 'react'
import {Link} from 'react-router-dom';
import './NavBar.css';
function NavBar() {
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
return (
<>
<nav className='navbar'>
<div className='navbar-container'>
<div className='menu-icon icon-container' onClick={handleClick}>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="4.28572" y1="7.92847" x2="25.7143" y2="7.92847" stroke="white" stroke-width="3"/>
<line x1="4.28572" y1="21.6428" x2="25.7143" y2="21.6428" stroke="white" stroke-width="3"/>
<line x1="4.28572" y1="14.7856" x2="25.7143" y2="14.7856" stroke="white" stroke-width="3"/>
</svg>
</div>
<div classname='logo ' onClick={closeMobileMenu}>
<h1>HighNeed.pl</h1><h2>Poznań</h2>
</div>
<div className='icons'>
<div className='home-icon icon-container'>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6061 23.7391V17.4347H17.3886V23.7391C17.3886 24.4326 17.9267 25 18.5843 25H22.1712C22.8288 25 23.3668 24.4326 23.3668 23.7391V14.9129H25.3994C25.9494 14.9129 26.2125 14.1942 25.794 13.816L15.7984 4.32153C15.3441 3.89282 14.6506 3.89282 14.1963 4.32153L4.20069 13.816C3.79417 14.1942 4.04526 14.9129 4.59525 14.9129H6.62785V23.7391C6.62785 24.4326 7.16588 25 7.82349 25H11.4104C12.068 25 12.6061 24.4326 12.6061 23.7391Z" fill="white"/>
</svg>
</div>
<div className='log-in-icon icon-container'>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6805 8.1121C19.6805 10.4926 17.6606 12.4224 15.1692 12.4224C12.6777 12.4224 10.6579 10.4926 10.6579 8.1121C10.6579 5.73156 12.6777 3.80176 15.1692 3.80176C17.6606 3.80176 19.6805 5.73156 19.6805 8.1121ZM17.4248 8.1121C17.4248 9.30237 16.415 10.2673 15.1692 10.2673C13.9234 10.2673 12.9135 9.30237 12.9135 8.1121C12.9135 6.92183 13.9234 5.95693 15.1692 5.95693C16.415 5.95693 17.4248 6.92183 17.4248 8.1121Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 24.6724V17.1724C7.5 15.1012 8.93909 13.4224 10.7143 13.4224H19.2857C21.061 13.4224 22.5 15.1012 22.5 17.1724V24.6724H7.5ZM19.2857 15.9224C19.8775 15.9224 20.3571 16.482 20.3571 17.1724V22.3448H9.64286V17.1724C9.64286 16.482 10.1226 15.9224 10.7143 15.9224H19.2857Z" fill="white"/>
</svg>
</div>
</div>
</div>
<div class='line'></div>
</nav>
<nav className={click ? 'sidebar disable' : 'sidebar'}>
<ul>
<li>
<div className='sidebar-icon'>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4004 6.76005C16.4004 8.74383 14.7172 10.352 12.641 10.352C10.5647 10.352 8.88159 8.74383 8.88159 6.76005C8.88159 4.77626 10.5647 3.16809 12.641 3.16809C14.7172 3.16809 16.4004 4.77626 16.4004 6.76005ZM14.5207 6.76005C14.5207 7.75194 13.6791 8.55602 12.641 8.55602C11.6028 8.55602 10.7613 7.75194 10.7613 6.76005C10.7613 5.76815 11.6028 4.96407 12.641 4.96407C13.6791 4.96407 14.5207 5.76815 14.5207 6.76005Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 20.5604V14.3104C6.25 12.5844 7.44924 11.1854 8.92857 11.1854H16.0714C17.5508 11.1854 18.75 12.5844 18.75 14.3104V20.5604H6.25ZM16.0714 13.2687C16.5646 13.2687 16.9643 13.735 16.9643 14.3104V18.6207H8.03571V14.3104C8.03571 13.735 8.43546 13.2687 8.92857 13.2687H16.0714Z" fill="black"/>
</svg>
</div>
Zaloguj się
</li>
<li>
<div className='sidebar-icon'>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9325 15.7562C18.969 13.1408 18.785 9.35694 16.3807 6.95262C13.7772 4.34913 9.55612 4.34913 6.95262 6.95262C4.34913 9.55612 4.34913 13.7772 6.95262 16.3807C9.35694 18.785 13.1408 18.969 15.7562 16.9325C15.7675 16.9453 15.7793 16.9578 15.7915 16.97L19.327 20.5055C19.6524 20.8309 20.1801 20.8309 20.5055 20.5055C20.8309 20.1801 20.8309 19.6524 20.5055 19.327L16.97 15.7915C16.9578 15.7793 16.9453 15.7675 16.9325 15.7562ZM15.2022 8.13113C17.1548 10.0838 17.1548 13.2496 15.2022 15.2022C13.2496 17.1548 10.0838 17.1548 8.13113 15.2022C6.17851 13.2496 6.17851 10.0838 8.13113 8.13113C10.0838 6.17851 13.2496 6.17851 15.2022 8.13113Z" fill="black"/>
</svg>
</div>
Wyszukaj wydarzenia
</li>
<li>
<div className='sidebar-icon'>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6667 10.4167H8.33333C7.76042 10.4167 7.29167 10.8854 7.29167 11.4583C7.29167 12.0312 7.76042 12.5 8.33333 12.5H16.6667C17.2396 12.5 17.7083 12.0312 17.7083 11.4583C17.7083 10.8854 17.2396 10.4167 16.6667 10.4167ZM19.7917 3.12499H18.75V2.08332C18.75 1.51041 18.2812 1.04166 17.7083 1.04166C17.1354 1.04166 16.6667 1.51041 16.6667 2.08332V3.12499H8.33333V2.08332C8.33333 1.51041 7.86458 1.04166 7.29167 1.04166C6.71875 1.04166 6.25 1.51041 6.25 2.08332V3.12499H5.20833C4.05208 3.12499 3.125 4.06249 3.125 5.20832V19.7917C3.125 20.9375 4.05208 21.875 5.20833 21.875H19.7917C20.9375 21.875 21.875 20.9375 21.875 19.7917V5.20832C21.875 4.06249 20.9375 3.12499 19.7917 3.12499ZM18.75 19.7917H6.25C5.67708 19.7917 5.20833 19.3229 5.20833 18.75V8.33332H19.7917V18.75C19.7917 19.3229 19.3229 19.7917 18.75 19.7917ZM13.5417 14.5833H8.33333C7.76042 14.5833 7.29167 15.0521 7.29167 15.625C7.29167 16.1979 7.76042 16.6667 8.33333 16.6667H13.5417C14.1146 16.6667 14.5833 16.1979 14.5833 15.625C14.5833 15.0521 14.1146 14.5833 13.5417 14.5833Z" fill="black" fill-opacity="0.8"/>
</svg>
</div>
Kalendarz
</li>
<li>
<div className='sidebar-icon'>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 12.5C25 5.59589 19.4041 0 12.5 0C5.59589 0 0 5.59589 0 12.5C0 18.7397 4.56849 23.911 10.5479 24.8493V16.1164H7.37671V12.5H10.5479V9.74658C10.5479 6.61644 12.411 4.88356 15.2671 4.88356C16.637 4.88356 18.0685 5.13014 18.0685 5.13014V8.20548H16.4931C14.9384 8.20548 14.4589 9.17123 14.4589 10.1575V12.5H17.9247L17.3699 16.1164H14.4589V24.8493C20.4315 23.911 25 18.7397 25 12.5Z" fill="#1877F2"/>
<path d="M17.3631 16.1164L17.9178 12.5H14.4521V10.1575C14.4521 9.17119 14.9384 8.20543 16.4863 8.20543H18.0617V5.13009C18.0617 5.13009 16.6302 4.88351 15.2603 4.88351C12.4041 4.88351 10.5411 6.61639 10.5411 9.74653V12.5H7.3699V16.1164H10.5411V24.8493C11.1781 24.952 11.8288 25 12.4932 25C13.1576 25 13.8083 24.9452 14.4452 24.8493V16.1164H17.3631Z" fill="white"/>
</svg>
</div>
Facebook fanpage
</li>
</ul>
</nav>
</>
)
}
export default NavBar

View File

@ -0,0 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);