Skip to content

Commit

Permalink
fix the responsive ness of the navabr and login page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AyushSharma72
AyushSharma72 committed Oct 25, 2024
1 parent 0758ce4 commit 121f37a
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 260 deletions.
48 changes: 28 additions & 20 deletions client/src/component/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
import "../css/Login.css";
import toast from "react-hot-toast";

const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
const VITE_SERVER_PORT =
import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";

const Login = ({ mode, showAlert }) => {
const [credentials, setCredentials] = useState({ email: "", password: "" });
Expand Down Expand Up @@ -64,23 +65,23 @@ const Login = ({ mode, showAlert }) => {
>
<form
onSubmit={handleSubmit}
className='form'
className="form"
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}
>
<h1 className='title'>Login</h1>
<span className='title-line'></span>
<div className='inp'>
<h1 className="title">Login</h1>
<span className="title-line"></span>
<div className="inp">
<Input
prefix={<UserOutlined />}
type='email'
placeholder='Email'
name='email'
type="email"
placeholder="Email"
name="email"
value={credentials.email}
onChange={onChange}
autoComplete='on'
autoComplete="on"
required
className="h-10 text-xl"
style={{
Expand All @@ -90,11 +91,11 @@ const Login = ({ mode, showAlert }) => {
/>
</div>

<div className='inp'>
<div className="inp">
<Input.Password
prefix={<LockOutlined />}
placeholder='Password'
name='password'
placeholder="Password"
name="password"
value={credentials.password}
onChange={onChange}
autoComplete="on"
Expand All @@ -110,14 +111,21 @@ const Login = ({ mode, showAlert }) => {
/>
</div>

<Button className="submit h-10 text-xl" type="submit" disabled={loading}>
<Button
className="submit h-10 text-xl"
type="submit"
disabled={loading}
>
{loading ? <Spin size="small" /> : "Login"}
</Button>

<p className="footer text-xl" style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}>
<p
className="footer text-xl"
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}
>
Don&apos;t have an account?
<Link className="link text-xl" to="/signup">
{" "}
Expand All @@ -134,9 +142,9 @@ const Login = ({ mode, showAlert }) => {
</Button>
</form>

<div className='banner'>
<div className="banner">
<h1
className='wel_text'
className="wel_text"
style={{
color: mode === "dark" ? "black" : "white",
}}
Expand All @@ -146,7 +154,7 @@ const Login = ({ mode, showAlert }) => {
BACK!
</h1>
<p
className='para'
className="para"
style={{
color: mode === "dark" ? "black" : "white",
}}
Expand Down
125 changes: 76 additions & 49 deletions client/src/component/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import { FaMoon } from "react-icons/fa6";

function Navbar(props) {
const { showAlert, mode } = props;
const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
const VITE_SERVER_PORT =
import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";

const navigate = useNavigate();
const location = useLocation();
Expand All @@ -21,7 +22,7 @@ function Navbar(props) {
const [isOpen, setIsOpen] = useState(false);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);

const style = { color: "white", fontSize: "1.5em" }
const style = { color: "white", fontSize: "1.5em" };

useEffect(() => {
window.onscroll = function () {
Expand Down Expand Up @@ -93,28 +94,21 @@ function Navbar(props) {
return (
<div>
<nav
className={`navbar navbar-expand-lg ${isScrolled ? "sticky" : ""} navbar-${props.mode === "dark" ? "dark" : "light"}`}
className={`navbar navbar-expand-lg ${
isScrolled ? "sticky" : ""
} navbar-${props.mode === "dark" ? "dark" : "light"}`}
style={{
backgroundColor: props.mode === "dark" ? "black" : "white",
borderBottom: "1px solid white",
}}
id="navbar"
>
{/* Hamburger icon */}
<button
className="navbar-toggler block lg:hidden absolute right-2 focus:outline-none"
type="button"
onClick={toggleSidebar}
aria-controls="navbarNavDropdown"
aria-expanded={isSidebarOpen}
aria-label="Toggle navigation"
style={{ color: props.mode === "dark" ? "white" : "black" }}
>
<span className="navbar-toggler-icon"></span>
</button>

<div
className={`gap-[4.8rem] visible navbar-collapse rnav ${isOpen ? "show" : ""}`}
className={`gap-[3rem] w-full visible navbar-collapse rnav ${
isOpen ? "show" : ""
}`}
style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}
>
{/* <div className="collapse navbar-collapse" id="navbarNavDropdown"> */}
Expand All @@ -127,68 +121,71 @@ function Navbar(props) {
src={logo}
alt="logo"
/>
<div className={`logoTitle md:block hidden ${props.mode === 'dark' ? 'text-white' : 'text-black'}`}>
<div
className={`logoTitle md:block hidden ${
props.mode === "dark" ? "text-white" : "text-black"
}`}
>
{props.title}
</div>
</Link>
<div
className={`collapse navbar-collapse justify-content-center ${isOpen ? "show" : ""}`}
className={`collapse navbar-collapse justify-content-center ${
isOpen ? "show" : ""
}`}
id="navbarSupportedContent"
>
<ul
className="navbar-nav mb-2 mb-lg-0 gap-3 fw-medium"
style={{ position: "absolute", left: "36%" }}
>
<li className="nav-item fs-4 fw-medium">

<Link
className={`nav-link ${location.pathname === "/" ? "active" : ""
}`}
className={`nav-link ${
location.pathname === "/" ? "active" : ""
}`}
aria-current="page"
to="/"
>
{props.home}
</Link>

</li>
<li className="nav-item fs-4">

<Link
className={`nav-link ${location.pathname === "/about" ? "active" : ""
}`}
className={`nav-link ${
location.pathname === "/about" ? "active" : ""
}`}
aria-current="page"
to="/about"
>
{props.about}
</Link>

</li>
<li className="nav-item fs-4">

<Link
className={`nav-link ${location.pathname === "/community" ? "active" : ""
}`}
className={`nav-link ${
location.pathname === "/community" ? "active" : ""
}`}
aria-current="page"
to="/community"
>
{props.community}
</Link>

</li>
<li className="nav-item fs-4">

<Link
className={`nav-link ${location.pathname === "/discussion" ? "active" : ""
}`}
className={`nav-link ${
location.pathname === "/discussion" ? "active" : ""
}`}
aria-current="page"
to="/discussion"
>
{props.discussion}
</Link>

</li>
</ul>
</div>

<form className="flex fs-4 fw-medium">
{!localStorage.getItem("token") ? (
<>
Expand All @@ -206,14 +203,12 @@ function Navbar(props) {
onChange={props.toggleMode}
/>
<label htmlFor="darkmode-toggle">
<FaSun
className="sun"
style={style}
/>
<FaSun className="sun" style={style} />
<FaMoon
className="moon"
style={{
color: props.mode === "dark" ? "yellow" : "gray", // Change colors based on mode
color:
props.mode === "dark" ? "yellow" : "gray", // Change colors based on mode
fontSize: "1.5rem",
}}
/>
Expand All @@ -238,6 +233,19 @@ function Navbar(props) {
>
Signup
</Link>
<button
className="navbar-toggler block lg:hidden ml-5 focus:outline-none"
type="button"
onClick={toggleSidebar}
aria-controls="navbarNavDropdown"
aria-expanded={isSidebarOpen}
aria-label="Toggle navigation"
style={{
color: props.mode === "dark" ? "white" : "black",
}}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
</ul>
</>
Expand All @@ -261,15 +269,17 @@ function Navbar(props) {
<FaSun
// className="sun"
style={{
color: props.mode === "dark" ? "white" : "orange", // Change color for dark mode
color:
props.mode === "dark" ? "white" : "orange", // Change color for dark mode
fontSize: "1.5rem",
marginRight: "8px",
}}
/>
<FaMoon
className="moon"
style={{
color: props.mode === "dark" ? "yellow" : "gray", // Change color for light mode
color:
props.mode === "dark" ? "yellow" : "gray", // Change color for light mode
fontSize: "1.5rem",
}}
/>
Expand Down Expand Up @@ -372,30 +382,47 @@ function Navbar(props) {
</div>
</nav>
{/* Sidebar for smaller devices */}
<div className={`sidebar ${isSidebarOpen ? "open" : ""}`} style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}>
<button className="close-btn" onClick={() => setIsSidebarOpen(false)} style={{
color: props.mode === "dark" ? "white" : "black",
}}>Close</button>
<div
className={`sidebar ${isSidebarOpen ? "open" : ""}`}
style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}
>
<button
className="close-btn"
onClick={() => setIsSidebarOpen(false)}
style={{
color: props.mode === "dark" ? "white" : "black",
}}
>
Close
</button>
<ul className="sidebar-links">
<li>
<Link to="/" onClick={() => setIsSidebarOpen(false)}>Home</Link>
<Link to="/" onClick={() => setIsSidebarOpen(false)}>
Home
</Link>
</li>
<li>
<Link to="/about" onClick={() => setIsSidebarOpen(false)}>About</Link>
<Link to="/about" onClick={() => setIsSidebarOpen(false)}>
About
</Link>
</li>
<li>
<Link to="/community" onClick={() => setIsSidebarOpen(false)}>Community</Link>
<Link to="/community" onClick={() => setIsSidebarOpen(false)}>
Community
</Link>
</li>
<li>
<Link to="/discussion" onClick={() => setIsSidebarOpen(false)}>Discussion</Link>
<Link to="/discussion" onClick={() => setIsSidebarOpen(false)}>
Discussion
</Link>
</li>
</ul>
</div>

<button
className="sidebar-toggle"
onClick={() => setIsSidebarOpen(true)}
style={{ display: isOpen ? 'block' : 'none' }}
style={{ display: isOpen ? "block" : "none" }}
>
Menu
</button>
Expand Down
Loading

0 comments on commit 121f37a

Please sign in to comment.