elangptra/frontend_adaptive_learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing user responsive

Browse Source
This commit is contained in:
Dimas Atmodjo 2024-11-25 17:00:45 +07:00
parent 57849e88b8
commit 402400ddf2
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layout/guest/MainNav.jsx
View File

@ -92,9 +92,9 @@ const MainNav = () => {
<Nav.Link href="#feature" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
<Nav.Link href="#youget" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
<Nav.Link href="#contacts" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top border-bottom text-blue'>Join Now.</Nav.Link>
<div className="d-flex w-100 justify-content-between mt-3">
<Nav.Link href="/signup" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
<Nav.Link href="/login" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
<div className="d-flex w-100 justify-content-between mt-2">
<Nav.Link href="/signup" onClick={() => setShow(false)} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
<Nav.Link href="/login" onClick={() => setShow(false)} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
</div>
</Offcanvas.Body>
</Offcanvas>

33
src/components/layout/user/UserNavbar.jsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip, Offcanvas } from 'react-bootstrap';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import logo from '../../../assets/images/logo.png';
import logoW from '../../../assets/images/logo-w.png';
@ -23,6 +23,10 @@ const UserNavbar = () => {
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [showMenu, setShowMenu] = useState(false);
const handleCloseMenu = () => setShowMenu(false);
const handleShowMenu = () => setShowMenu(true);
const [showReport, setShowReport] = useState(false);
const handleCloseReport = () => setShowReport(false);
const handleShowReport = () => setShowReport(true);
@ -50,7 +54,7 @@ const UserNavbar = () => {
return (
<>
<Navbar bg={bgBlue() ? 'blue' : 'white'} expand="md" fixed="top">
<Container fluid className='px-0'>
<Container fluid className='px-md-0'>
<Navbar.Brand as={Link} to="/learning" className='col-md-3 col-lg-2 d-flex items-center'>
<img
alt="logo"
@ -58,8 +62,11 @@ const UserNavbar = () => {
height="32"
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-nav" />
<div className="navbar-title col-md-6 col-lg-8">
{/* <Navbar.Toggle className='custom-toggle shadow-none border-white' /> */}
<Button variant="btn-outline-white" onClick={handleShowMenu} className='border py-0 d-block d-md-none'>
<i className="bi bi-list text-white fs-3"></i>
</Button>
<div className="d-none d-md-block navbar-title col-md-6 col-lg-8">
{hasTopicAndLevel ? (
lastSegment === 'exercise' ? (
<h5 className={`text-center m-0 ${bgBlue() ? 'text-white' : 'text-blue'}`}>
@ -73,7 +80,7 @@ const UserNavbar = () => {
)
):('')}
</div>
<Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-flex items-center'>
<Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-none d-md-flex items-center'>
<Nav className={bgBlue() ? 'd-flex' : 'd-none'}>
<OverlayTrigger
placement='bottom'
@ -124,6 +131,22 @@ const UserNavbar = () => {
<Modal centered show={showReport} onHide={handleCloseReport} size='lg'>
<Report onClose={handleCloseReport}/>
</Modal>
<Offcanvas show={showMenu} onHide={handleCloseMenu} placement={'end'}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Menu</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body className='h-100'>
<Nav.Link as={Link} to="home" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
<Nav.Link as={Link} to="module" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Learning.</Nav.Link>
<Nav.Link as={Link} to="history" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>History.</Nav.Link>
<Nav.Link as={Link} to="setting" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Setting.</Nav.Link>
<div className="d-flex w-100 justify-content-between mt-2">
<Nav.Link onClick={() => (handleCloseMenu(), handleShowReport())} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Report</Nav.Link>
<Nav.Link onClick={() => (handleCloseMenu(), handleShow())} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-red rounded-3'>Logout</Nav.Link>
</div>
</Offcanvas.Body>
</Offcanvas>
</>
);
};

2
src/components/layout/user/UserSideNav.jsx
View File

@ -31,7 +31,7 @@ const UserSideNav = () => {
height={72} width={72}
style={{objectFit:'cover'}}
/>
<h6 className='display-username text-white text-center truncate truncate-2 my-3'>{validName(username)}</h6>
<h6 className='display-username text-white text-center text-capitalize truncate truncate-2 my-3'>{validName(username)}</h6>
</div>
<Nav className="flex-column">
<Nav.Link as={NavLink} to="home" className="mb-2 text-white rounded">