index.js
4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import Image from "next/image";
import React, { Fragment, useRef, useState } from "react";
import { Badge, Button, Col, Container, Nav, Navbar, Overlay, OverlayTrigger, Popover, Row } from "react-bootstrap";
const VendorDashboard = () => {
const [show, setShow] = useState(false);
const [target, setTarget] = useState(null);
const ref = useRef(null);
const handleClick = (event) => {
setShow(!show);
setTarget(event.target);
};
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#">Your Logo</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#">Home</Nav.Link>
<Nav.Link href="#">About</Nav.Link>
<Nav.Link href="#">Services</Nav.Link>
<Nav.Link href="#">Contact</Nav.Link>
</Nav>
<Nav>
<Nav.Link ref={ref}>
{/* <FaBell /> */}
<Badge variant="danger" onClick={handleClick}>5</Badge>
<Overlay
show={show}
target={target}
placement="bottom"
container={ref}
containerPadding={0}
className="bottom"
>
<Popover id="popover-contained">
<Popover.Header as="h3">Popover bottom</Popover.Header>
<Popover.Body>
<strong>Holy guacamole!</strong> Check this info.
</Popover.Body>
</Popover>
</Overlay>
</Nav.Link>
</Nav>
</Navbar>
<Fragment>
<header className="header_wrap">
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/zango-logo.svg" />
</span>
</Navbar.Brand>
{/* <Navbar.Toggle aria-controls="navbarScroll" /> */}
{/* <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav>
</Navbar.Collapse> */}
</Container>
</Navbar>
</header>
<Container fluid>
<Row>
<Col xs={12} md={3} lg={2} className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<ul>
<li><img src="/images/vendor/orders.svg" className="me-1 img-fluid" /> Orders</li>
<li><img src="/images/vendor/activities.svg" className="me-1 img-fluid" /> Activities</li>
</ul>
</Col>
<Col className="content">
{/* <Button onClick={toggleSidebar} className="toggle-btn">
{collapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
</Button> */}
</Col>
</Row>
</Container>
</Fragment>
</>
);
};
export default VendorDashboard;