Skip to content

Commit

Permalink
responsive navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@exodus31
exodus31 committed Sep 1, 2022
1 parent 1b61249 commit 43bb73e
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 42 deletions.
2 changes: 2 additions & 0 deletions frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Binary Brains</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import './App.css';
import './Components/Style.css';
import Homepage from './Components/Homepage';
import AboutUs from './Components/AboutUs';
import Navbar from './Components/Navbar';
import Navbar2 from './Components/Navbar2';
import Contests from './Components/Contests';
import Login from './Components/Login';
Expand All @@ -12,6 +13,7 @@ import Viewprizes from './Components/Viewprizes';
import FAQs from './Components/FAQs';
import Dailyprob from './Components/Dailyprob';
import Confirmation from './Components/Confirmation';
import Timeline from './Components/Timeline'
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Expand All @@ -21,7 +23,7 @@ function App() {
<div>
<Router>
<div className="back">
<Navbar2 />
<Navbar />
<Routes>
<Route path="" element={<Homepage />} />
<Route path="contests" element={<Contests />} />
Expand All @@ -33,6 +35,7 @@ function App() {
<Route path="faq" element={<FAQs />}/>
<Route path="viewprize" element={<Viewprizes />}/>
<Route path="confirmation/:code" element={<Confirmation />}/>
<Route path="timeline" element={<Timeline />}/>
<Route path="*" />
</Routes>
</div>
Expand Down
23 changes: 18 additions & 5 deletions frontend/src/Components/Login.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import * as React from "react";
import "./Style2.css";
import {useState, useEffect} from "react";
import Footer2 from "./Footer2";
import axios from "axios";


function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() =>{
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
},[])
return size;
}

function Login() {
const token = localStorage.getItem("token");
const [height,width] = useWindowSize();
if (token) {
window.location.href = "/yourprofile";
}
Expand Down Expand Up @@ -38,7 +52,7 @@ function Login() {
};

return (
<div>
<div style={{height:`${height}px`}}>
<div className="login">
<div
className="alert alert-danger"
Expand All @@ -54,13 +68,13 @@ function Login() {
<div className="whitebox2 signup_container2">
<h1 className="text-center heading">LOGIN</h1>
<div className="mb-3 inputs" style={{ textAlign: "left" }}>
<label className="form-label auth">Username</label>
<label className="form-label auth">Email</label>
<br />
<input
type="text"
name="username"
className="inputbox"
placeholder="Username"
placeholder="Email"
style={{ color: "black" }}
required
onChange={(e) => setEmail(e.target.value)}
Expand All @@ -87,8 +101,7 @@ function Login() {
Login
</button>
</div>
</div>
<div className="loginend"></div>
</div>
</div>
</div>
);
Expand Down
137 changes: 104 additions & 33 deletions frontend/src/Components/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,113 @@
import React from 'react'
import { BrowserRouter as Router, Routes, Route ,Link} from "react-router-dom";
import './Style.css'
import img1 from '../poster.png'
import img1 from "./BBlogo2.png";
import {useState, useEffect} from 'react'

function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container">
<Link to="/"><img src={img1} className="navimg"/></Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li className="nav-item">
<Link to="/" className="nav-link">Home</Link>
</li>
<li className="nav-item">
<Link to="/contests" className="nav-link">Contests</Link>
</li>
</ul>
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link to="/yourprofile" className="nav-link">Profile</Link>
</li>
<li className="nav-item active">
<Link to="/login" className="nav-link">Login</Link>
</li>
<li className="nav-item active">
<Link to="/signup" className="nav-link">SignUp</Link>
</li>
</ul>
</div>

</div>
</nav>
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() =>{
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
},[])
return size;
}


function Navbar() {
const [height,width] = useWindowSize();

const handleLogout = () => {
localStorage.removeItem("token");
window.location.href = "/";
};
const token = localStorage.getItem("token");
return (
<nav className="navbar navbar-expand-lg navbar-dark navbg">
<div className="container">
<Link to="/">
<img src={img1} className="navimg" alt="..." />
</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li className="nav-item">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</li>
{token ? (
<li className="nav-item">
<Link className="nav-link" to="/contests">Contests <span className="sr-only">(current)</span></Link>
</li>
) : (
<></>
)
}
<li className="nav-item">
<Link className="nav-link" to="/about">Our Teams<span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/timeline">Schedule <span className="sr-only">(current)</span></Link>
</li>
{ width < "992" && !token ? (
<>
<li className="nav-item">
<Link className="nav-link" to="/login">Login <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/signup">Register <span className="sr-only">(current)</span></Link>
</li>
</>
) : (
<></>
)
}
{ width < "992" && token ? (
<>
<li className="nav-item">
<Link className="nav-link" to="/yourprofile">Your Profile <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/" onClick={handleLogout()}>Logout <span className="sr-only">(current)</span></Link>
</li>
</>
) : (
<></>
)
}
</ul>
</div>
{ width >= "992" && !token ? (
<>
<Link to="login">
<button className="btnnav2">Login</button>
</Link>
<Link to="signup">
<button className=" btnnav2">Register</button>
</Link>
</>
) : (
<></>
)
}
{ width >= "992" && token ? (
<>
<Link to="/yourprofile">
<button className="btnnav2">Your Profile</button>
</Link>
<Link to="/">
<button className=" btnnav2" onClick={handleLogout()}>Logout</button>
</Link>
</>
) : (
<></>
)
}
</div>
</nav>
)
}

Expand Down
9 changes: 7 additions & 2 deletions frontend/src/Components/Navbar2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@ function Navbar() {
Home
</Link>
</li>
{/* {!token ? (
{!token ? (
<li className="nav-item">
<Link to="/contests" className="nav-link">
Contests
</Link>
</li>
) : (
<></>
)} */}
)}
{/* <li className="nav-item">
<Link to="/viewprize" className="nav-link">
Prizes
Expand All @@ -57,6 +57,11 @@ function Navbar() {
Our Team
</Link>
</li>
<li className="nav-item">
<Link to="/timeline" className="nav-link">
Schedule
</Link>
</li>
</ul>
</div>

Expand Down
20 changes: 19 additions & 1 deletion frontend/src/Components/Style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
.navbar{
box-shadow: 0px 0px 15px rgb(30, 30, 30);
}

.nav-txt{
list-style: none;
text-decoration: none ;
display: inline-block;
margin:0 8px;
padding: 10px 10px 10px 10px;
border-radius: 5px;
color: white;
}
.nav-txt:hover{
background-color: #0b1534;
color: rgb(193, 193, 193);
}
.navx{
background-color: #111f49;
padding-top: 15px;
height: 80px;
box-shadow: 0px 0px 15px rgb(30, 30, 30);
}
.back{
background-color: #182b5c;
}
Expand Down
46 changes: 46 additions & 0 deletions frontend/src/Components/Timeline.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react'
import {Link} from 'react-router-dom'

function Schedule() {
return (
<div className='container mt-4' style={{height:"1100px"}}>
<div className="card">
<div className="card-body">
<h2 className="upcomingContestHead" align="center">Schedule Of The Course</h2>
<div className="responsive scrollTable">
<table className='tabtop leaderboard scrollTable'>
<tbody>
<tr>
<th className='thtop'>Beginner</th>
</tr>
<tr>
<td className="tdtop">
<div className="anythinglisting4">
<ul>
<li>C++ Basics I</li>
<li>C++ Basics II</li>
<li>Time Complexity And Basic Problem Solving</li>
<li>Recursion Backtracking</li>
<li>Searching Sorting And Two Pointers</li>
<li>STL I</li>
<li>STL II</li>
<li>Prefix Sum, Circular Arrys And Difference Arrays</li>
<li>Number Theory I</li>
<li>Number Theory II</li>
<li>Bit Manipulation</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br/>
</div>
</div>
)
}

export default Schedule

0 comments on commit 43bb73e

Please sign in to comment.