From 60789b8faedc019e2fa1579d1addaa83edd149ec Mon Sep 17 00:00:00 2001 From: Jakub-prog Date: Fri, 17 May 2024 23:53:10 +0200 Subject: [PATCH] new styles for the home menu abr dropdown login stats user profile in navbar navbar component; home component home page new layout Game details page created (#56) User profile page (#43) new styles for the home menu abrs user profile in navbar navbar component; home component home page new layout home page shared navbar new dropdown menu trash update of home css working logic style update lock json --- package-lock.json | 70 +++---- src/App.js | 53 ++---- src/App.scss | 162 ++++++++++++---- src/Home.js | 84 ++++++++ src/Home.scss | 222 ++++++++++++++++++++++ src/Navbar.js | 49 +++++ src/Navbar.scss | 161 ++++++++++++++++ src/Tournaments/TournamentNav.js | 65 +++++-- src/Tournaments/TournamentNav.scss | 151 ++++++++++++--- src/Tournaments/TournamentsLeaderboard.js | 8 +- src/User/User.js | 100 ++++++++-- src/User/UserButtons.js | 1 - src/User/UserButtons.scss | 128 ++++++++++--- src/index.js | 3 - src/index.scss | 1 - src/lists/TournamentsList.js | 2 - src/resources/arrow-down.svg | 6 + src/resources/arrow-up.svg | 6 + src/resources/menu.png | Bin 0 -> 487 bytes src/resources/robot3.png | Bin 0 -> 127830 bytes 20 files changed, 1060 insertions(+), 212 deletions(-) create mode 100644 src/Home.js create mode 100644 src/Home.scss create mode 100644 src/Navbar.js create mode 100644 src/Navbar.scss create mode 100644 src/resources/arrow-down.svg create mode 100644 src/resources/arrow-up.svg create mode 100644 src/resources/menu.png create mode 100644 src/resources/robot3.png diff --git a/package-lock.json b/package-lock.json index f6087fe..dfce20c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,5 @@ { "name": "Bot-Wars-front", - "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { @@ -51,9 +50,9 @@ } }, "node_modules/@adobe/css-tools": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz", - "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==" + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz", + "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==" }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", @@ -6518,12 +6517,12 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", + "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", "dependencies": { "bytes": "3.1.2", - "content-type": "~1.0.5", + "content-type": "~1.0.4", "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", @@ -6531,7 +6530,7 @@ "iconv-lite": "0.4.24", "on-finished": "2.4.1", "qs": "6.11.0", - "raw-body": "2.5.2", + "raw-body": "2.5.1", "type-is": "~1.6.18", "unpipe": "1.0.0" }, @@ -7251,9 +7250,9 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", "engines": { "node": ">= 0.6" } @@ -8570,9 +8569,9 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, "node_modules/ejs": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", - "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", + "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", "dependencies": { "jake": "^10.8.5" }, @@ -9618,16 +9617,16 @@ } }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.18.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", + "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.1", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.5.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -9996,9 +9995,9 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==" }, "node_modules/follow-redirects": { - "version": "1.15.6", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", - "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "funding": [ { "type": "individual", @@ -10251,19 +10250,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -16871,9 +16857,9 @@ } }, "node_modules/raw-body": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", - "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", + "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -20246,9 +20232,9 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", - "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz", + "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==", "dependencies": { "colorette": "^2.0.10", "memfs": "^3.4.3", diff --git a/src/App.js b/src/App.js index 9d78e0e..d138b12 100644 --- a/src/App.js +++ b/src/App.js @@ -1,43 +1,26 @@ -import './App.scss' -import User from "./User/User"; -import {Link} from "react-router-dom"; -import UserButtons from './User/UserButtons'; +import './App.scss'; +import Navbar from './Navbar'; +import Home from './Home'; +import { useState } from 'react'; function App() { + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(false); + + + const toggleUserBar = () => { + setIsCollapsed(!isCollapsed); + }; + return (
- + + + {/* tutaj przesyla uzytkownika */} -
-

Bot-Wars

-
- -
-
-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
+
- ) + ); } -export default App +export default App; diff --git a/src/App.scss b/src/App.scss index fe08829..47eddbf 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,52 +4,146 @@ -webkit-box-sizing: border-box; } +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: #000; + color: #0f0; +} + .app { + text-align: center; - h1:hover { - cursor: default; - } + .log-head { + display: flex; + flex-flow: column; + align-items: left; - .title { - overflow: auto; - padding: 10px; - } + .header { + z-index: 600; + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(0, 0, 0, 0.8); + width: 100%; - .login-btns { - float: right; - } + .logo { + flex-basis: 60%; + display: flex; + justify-content: left; + letter-spacing: 5px; + } - .btn { - display: inline-block; - width: 100%; - } + .logo h1 { + margin: 0; + font-size: 1.5em; + color: #0f0; + } + } - .menu-btn { - margin: 3px; - width: 23% - } - .menu-btns.admin .menu-btn{ - width: 32% - } + .flex-user { + z-index: 300; + max-width: 50%; + display: flex; + flex-direction: row; + align-items: left; + background-color: #000; + opacity: 0.85; + border: 3px solid #24da00; + // margin-top: -60px; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + transform: translateY(0); + &.collapsed { + transform: translateY(-100%); + opacity: 0; + } - .menu-btns { - margin-top: 25px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } + .user-bar { + border: none; + + .user-buttons-container { + display: flex; + justify-content: flex-end; + + a { + display: flex; + align-items: center; + } + + .user-button { + width: 65px; + height: 65px; + padding: 6px; + margin-right: 10px; + border-radius: 50%; + border: 2px solid #24da00; + text-align: center; + } + + .setting-button { + padding: 0; + } + } + } + } + + .hide-arrow { + position: relative; + z-index: 200; + top: -10px; + margin: 0; + padding-top: 10px; + background-color: #0f0; + color: #000; + width: 100px; + font-size: 16px; + border-radius: 10px; + cursor: pointer; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + transform: translateY(0); - @media only screen and (max-width: 650px) { - .menu-btn { - width: 100% + &.collapsed { + transform: translateY(-100px); + opacity: 0; + } } - .menu-btns.admin .menu-btn{ - width: 100% + + .collapsed-bar { + position: relative; + margin-top: -108px; + background: #0f0; + color: #000; + min-width: 150px; + height: 60; + -webkit-border-bottom-right-radius: 20px; + -webkit-border-bottom-left-radius: 20px; + -moz-border-radius-bottomright: 20px; + -moz-border-radius-bottomleft: 20px; + border-bottom-right-radius: 20px; + border-bottom-left-radius: 20px; + display: flex; + justify-content: space-around; + align-items: center; + padding: 0 10px; + cursor: pointer; + font-size: 22px; + + .username { + margin-left: 10px; + } } } - .login-btn { - width: 100%; + .container { + display: flex; + width: 70%; + opacity: 85%; + height: 100%; + margin: auto; + background-color: #161616; + // border-left: 3px dashed #0BE400; + // border-right: 3px dashed #0BE400; } } \ No newline at end of file diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..b4aab2d --- /dev/null +++ b/src/Home.js @@ -0,0 +1,84 @@ +import React, { useRef } from 'react'; +import './Home.scss'; +import roboImg from './resources/robot3.png'; + +function Home({ isAuthenticated }) { + const getStartedRef = useRef(null); + + const scrollToGetStarted = () => { + if (getStartedRef.current) { + getStartedRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }; + + return ( +
+
+ Robot +
+

Welcome to Bot-Wars!

+ {isAuthenticated ? ( + <> +

Welcome back! Check out our latest tournaments and games.

+ + ) : ( + <> +

Join us today and start competing in our exciting tournaments!

+
+ Get Started +
+ + )} +
+
+ +
+
+

Versatile Bot Platform

+

+ Create, duel, and compete with your bots. Join or create tournaments, challenge friends, or rise in the global rankings. +

+
+
+

AI Bot Mastery

+

Learn to design and configure bots for exciting matches and tournaments.

+
+
+

Tournaments

+

Join tournaments, compete with players, and climb the leaderboard to become the champion.

+
+
+ +
+
+

Getting Started

+
    +
  1. Sign Up: Create your account to join the community.
    2. +
  2. Explore Games: Discover various bot games and tournaments available.
    3. +
  3. Create Your Own Tournament: Design and host your tournaments, invite friends, and compete.
    4. +
+
+
+

How to Play

+
    +

  • Design Your Bot:

    Use our intuitive tools to create and program your bot or see the example bots on our GitHub page
    • +

  • Test Your Bot:

    Run simulations to ensure your bot performs well under different scenarios.
    • +

  • Join Tournament:

    Enter your bot in matches and tournaments to compete against others.
    • +

  • Analyze Results:

    Review match results to improve your bot's performance.
    • +
+
+
+

Registration Process

+
    +
  1. Visit the Sign-Up Page.
    2. +
  2. Fill in your details and verify your email.
    3. +
  3. Complete your profile and set up your first bot.
    4. +
  4. Start participating in tournaments and duels!
    5. +
+
+
+
+ ); +} + +export default Home; diff --git a/src/Home.scss b/src/Home.scss new file mode 100644 index 0000000..925d2b3 --- /dev/null +++ b/src/Home.scss @@ -0,0 +1,222 @@ +@import './index'; + +$color-primary-0: #14980D; /* Main Primary color */ +$color-primary-1: #2E602B; +$color-primary-2: #185515; +$color-primary-3: #0BE400; +$color-primary-4: #0AC100; + +$color-secondary-1-0: #BC9310; /* Main Secondary color (1) */ +$color-secondary-1-1: #776835; +$color-secondary-1-2: #69561A; +$color-secondary-1-3: #FFC300; +$color-secondary-1-4: #EEB600; + +$color-secondary-2-0: #3D1680; /* Main Secondary color (2) */ +$color-secondary-2-1: #372951; +$color-secondary-2-2: #291747; +$color-secondary-2-3: #530AD2; +$color-secondary-2-4: #3F05A2; + +$small: 300px; +$medium: 900px; + +.home { + display: flex; + align-items: center; + flex-direction: column; + + .hero-section { + display: flex; + align-items: center; + padding: 2em; + background-size: cover; + width: 90%; + margin: 0; + justify-content: space-around; + + .hero-image { + width: 30%; + height: auto; + border-radius: 50%; + box-shadow: 0 -0.3rem 10px $color-primary-0; + margin-right: 2rem; + + @media screen and (max-width: $medium) { + width: 50%; + } + } + + .welcome-box { + max-width: 50%; + color: #ffffff; + + h1 { + font-size: 3rem; + margin-bottom: 1rem; + } + + p { + font-size: 1.5rem; + margin-bottom: 1rem; + } + + .get-started-link { + a { + display: inline-block; + padding: 0.75rem 1.5rem; + background-color: $color-primary-3; + color: #000000; + text-decoration: none; + border-radius: 5px; + font-size: 1.25rem; + + &:hover { + background-color: darken($color-primary-3, 10%); + } + } + } + } + } + + .info-boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 2rem; + + .info-box { + background-color: rgba(0, 0, 0, 0.75); + color: #ffffff; + padding: 1.5rem; + margin: 1rem; + border-radius: 10px; + flex: 1; + min-width: 300px; + transition: transform 0.3s ease-in-out, background-color 0.3s ease; + + &:hover { + transform: scale(1.08); + cursor: pointer; + + h2 { + color: $color-secondary-1-3; + } + } + + &.large { + flex: 2; + } + + h2 { + font-size: 2rem; + margin-bottom: 1rem; + color: $color-primary-1; + text-shadow: 0cm 0cm 0.05cm #ffffff; + letter-spacing: 0.2rem; + } + + p { + font-size: 1.25rem; + text-shadow: 0cm 0cm 0.05cm #ffffff; + } + } + } + + .content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 2rem; + background-color: #1a1a1a; + + .content-box { + background-color: rgba(34, 34, 34, 0.9); + color: #ffffff; + padding: 2rem; + margin: 1rem 0; + border-radius: 15px; + width: 80%; + max-width: 1200px; + transition: transform 0.3s ease-in-out, background-color 0.3s ease; + display: flex; + justify-content: left; + align-items: center; + flex-direction: column; + + h2 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + color: $color-primary-3; + text-shadow: 0cm 0cm 0.05cm #000000; + letter-spacing: 0.2rem; + } + + ol, + ul { + padding-left: 2rem; + width: 80%; + display: flex; + flex-direction: column; + justify-content: flex-start; + font-size: 1.5rem; + text-shadow: none; + + li { + margin-bottom: 1rem; + + a { + color: $color-primary-3; + text-decoration: none; + + &:hover { + color: darken($color-primary-3, 10%); + text-decoration: underline; + } + } + } + } + + ol { + align-items: center; + justify-content: flex-start; + text-align: left; + + li { + width: 80%; + } + } + + ul { + align-items: flex-start; + margin-left: 1rem; + padding-left: 3rem; + + li { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: start; + text-align: left; + + h3 { + margin: 2rem 0 0.8rem 0; + color: $color-primary-1; + } + + &::marker { + font-size: 3.5rem; + } + + > span { + display: inline-block; + margin-left: 1.5rem; + padding: 0; + } + } + } + + } + } +} diff --git a/src/Navbar.js b/src/Navbar.js new file mode 100644 index 0000000..32f7015 --- /dev/null +++ b/src/Navbar.js @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import User from './User/User'; +import './Navbar.scss'; + +function Navbar({ isAuthenticated, user }) { + const [menuOpen, setMenuOpen] = useState(false); + + const toggleMenu = () => { + setMenuOpen(!menuOpen); + }; + + return ( +
+
+

Bot-Wars

+
+ +
+
+
+
+
+
+ ); +} + +export default Navbar; diff --git a/src/Navbar.scss b/src/Navbar.scss new file mode 100644 index 0000000..9fdb917 --- /dev/null +++ b/src/Navbar.scss @@ -0,0 +1,161 @@ +$small: 300px; +$medium: 1280px; +$menu-breakpoint: 900px; + +.navbar { + display: flex; + align-items: center; + width: 100%; + justify-content: space-between; + padding: 10px 20px; + background: rgba(0, 0, 0, 0.8); + border-bottom: 1px solid #0f0; + position: relative; + + .logo { + display: flex; + justify-content: left; + letter-spacing: 5px; + + h1 { + margin: 0; + font-size: 1.5em; + color: #0f0; + } + } + + .nav { + flex-grow: 0.1rem; + display: flex; + justify-content: space-between; + align-items: center; + + .menu-btns { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + + .menu-btn { + display: flex; + align-items: center; + margin: 10px 0 10px 5px; + padding: 0; + + a { + text-decoration: none; + display: flex; + align-items: center; + + .btn, + .login-btn { + padding: 10px 20px; + border: none; + font-weight: bold; + cursor: pointer; + min-width: 100px; + + &:hover { + background: #fff; + color: #000; + } + + @media screen and (max-width: $medium) { + min-width: 80px; + padding: 5px 10px; + } + } + + .signup-btn { + padding: 10px 20px; + background-color: #0be400; + color: #000; + border-radius: 20px; + font-weight: bold; + cursor: pointer; + min-width: 130px; + margin-right: 10px; + + &:hover { + background: #fff; + color: #000; + } + } + } + } + + .active-nav { + box-shadow: 0 0 0.2cm #088f0f; + } + } + + @media screen and (max-width: $menu-breakpoint) { + display: none; + flex-direction: column; + background: rgba(0, 0, 0, 0.9); + position: absolute; + top: 98px; + right: 0; + width: 100%; + z-index: 1; + + &.open { + display: flex; + } + + .menu-btns { + flex-direction: column; + gap: 10px; + width: 80%; + + a { + min-width: 200px; + + .btn, + .login-btn { + padding: 10px 20px; + border: none; + font-weight: bold; + cursor: pointer; + min-width: 200px; + } + + } + } + } + } + + .menu-icon { + display: none; + flex-direction: column; + justify-content: space-around; + height: 24px; + cursor: pointer; + + .bar { + width: 25px; + height: 3px; + background-color: #0f0; + border-radius: 2px; + } + + @media screen and (max-width: $menu-breakpoint) { + display: flex; + } + + &.open { + .bar1 { + transform: rotate(-45deg) translate(-5px, 5px); + } + .bar2 { + opacity: 0; + } + .bar3 { + transform: rotate(45deg) translate(-5px, -5px); + } + } + } +} diff --git a/src/Tournaments/TournamentNav.js b/src/Tournaments/TournamentNav.js index bd3c836..cdb1ef0 100644 --- a/src/Tournaments/TournamentNav.js +++ b/src/Tournaments/TournamentNav.js @@ -1,28 +1,55 @@ -import './TournamentNav.scss'; -import React from "react"; +import React, { useState } from "react"; import { NavLink } from 'react-router-dom'; import { login, logout } from '../User/store'; import { connect } from 'react-redux'; - +import User from "../User/User"; +import '../Navbar.scss'; function TournamentNav({ isAuthenticated }) { + const [menuOpen, setMenuOpen] = useState(false); + + const toggleMenu = () => { + setMenuOpen(!menuOpen); + }; + return ( - <> -