import React, { useState } from 'react'; import { Button, Card, Col, Container, Image, Offcanvas, OverlayTrigger, Row, Tooltip, } from 'react-bootstrap'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; import SimpleBar from 'simplebar-react'; import { DefaultOffcanvasExample, PlacementOffcanvasExample, BackdropOffcanvasExample } from './UiOffcanvasCode'; // Import Images import avatar1 from "../../../../images/users/avatar-1.jpg"; import avatar2 from "../../../../images/users/avatar-2.jpg"; import avatar3 from "../../../../images/users/avatar-3.jpg"; import avatar4 from "../../../../images/users/avatar-4.jpg"; import avatar6 from "../../../../images/users/avatar-6.jpg"; import avatar7 from "../../../../images/users/avatar-7.jpg"; import avatar8 from "../../../../images/users/avatar-8.jpg"; import img2 from "../../../../images/small/img-2.jpg"; import img3 from "../../../../images/small/img-3.jpg"; import img4 from "../../../../images/small/img-4.jpg"; import img9 from "../../../../images/small/img-9.jpg"; import img10 from "../../../../images/small/img-10.jpg"; import img11 from "../../../../images/small/img-11.jpg"; import img12 from "../../../../images/small/img-12.jpg"; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; const UiOffcanvas = () => { const [isTop, setIsTop] = useState(false); const [isRight, setIsRight] = useState(false); const [isBottom, setIsBottom] = useState(false); const [isLeft, setIsLeft] = useState(false); const [isEnableScroll, setIsEnableScroll] = useState(false); const [isBackdrop, setIsBackdrop] = useState(false); const [isScrollBackDrop, setIsScrollBackDrop] = useState(false); const toggleTopCanvas = () => { setIsTop(!isTop); }; const toggleRightCanvas = () => { setIsRight(!isRight); }; const toggleBottomCanvas = () => { setIsBottom(!isBottom); }; const toggleLeftCanvas = () => { setIsLeft(!isLeft); }; const toggleEnableScroll = () => { setIsEnableScroll(!isEnableScroll); }; const toggleBackdrop = () => { setIsBackdrop(!isBackdrop); }; const toggleScrollBackDrop = () => { setIsScrollBackDrop(!isScrollBackDrop); }; const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return (

Use the offcanvas class to set a default offcanvas.

Use direction="start" , direction="top", direction="bottom", or direction="end", to offcanvas attribute to set different Offcanvas Placement.

Here are the example of offcanvas with scrolling active and backdrop visible.
{/* Defult Offcanvas */} Recent Acitivity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Building product

Christi} > Frank Hook} > Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to Judia dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
{/* Top offcanvas */} Gallery
A mix of friends and strangers heading off to find an adventure.
by Erica Kernan
Dramatic clouds at the Golden Gate Bridge
by Ron Mackie
Cycling in the countryside
by Nancy Martino
Fun day at the Hill Station
by Henry Baird
 {/* Right offcanvas */} Recent Acitivity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Buildng product

Christi} > Frank Hook} > Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to velzon dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
{/* Bottom offcanvas */} Gallery
A mix of friends and strangers heading off to find an adventure.
by Erica Kernan
Dramatic clouds at the Golden Gate Bridge
by Ron Mackie
Cycling in the countryside
by Nancy Martino
Fun day at the Hill Station
by Henry Baird
 {/* Left offcanvas */} Recent Acitivity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Buildng product

Christi} > Frank Hook} > Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to velzon dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
{/* Enable body scrolling */} Customer Activity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Buildng product

Christi} >
Frank Hook} >
Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to velzon dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
{/* Enable backdrop (default) */} Customer Activity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Buildng product

Christi} > Frank Hook} > Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to velzon dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
{/* Enable both scrolling & backdrop */} Customer Activity
Oliver Phillips New

We talked about a project on linkedin.

Today
N
Nancy Martino In Progress

Create new project Buildng product

Christi} > Frank Hook} > Ruby} >
R
More} >
2+
Yesterday
Natasha Carey Completed

Adding a new event with attachments

25 Nov
Bethany Johnson

added a new member to velzon dashboard

19 Nov
Your order is placed Out of Delivery

These customers can rest assured their order has been placed.

16 Nov
Lewis Pratt

They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.

22 Oct
Monthly sales report

2 days left notification to submit the monthly sales report. Reports Builder

15 Oct
New ticket received Completed

User Erica245 submitted a ticket.

26 Aug
View All Acitivity
); }; UiOffcanvas.layout = (page: any) => export default UiOffcanvas;