From aa6263db1da0c05cae84110f96e74aab61dfa370 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 14:31:55 +0530 Subject: [PATCH 1/6] Added Drawer section Signed-off-by: NishantSinghhhhh --- .../sistent/components/drawer/code.js | 8 + .../sistent/components/drawer/guidance.js | 8 + .../sistent/components/drawer/index.js | 8 + .../DrawerComponent/PersistentDrawer.js | 171 ++++++ .../drawer/DrawerComponent/TempDrawer.js | 140 +++++ .../components/drawer/DrawerComponent/data.js | 572 ++++++++++++++++++ .../drawer/DrawerComponent/miniVariant.js | 139 +++++ .../drawer/DrawerComponent/permanentDrawer.js | 107 ++++ .../Sistent/components/drawer/code.js | 141 +++++ .../Sistent/components/drawer/guidance.js | 146 +++++ .../Sistent/components/drawer/index.js | 280 +++++++++ .../Projects/Sistent/components/index.js | 7 + 12 files changed, 1727 insertions(+) create mode 100644 src/pages/projects/sistent/components/drawer/code.js create mode 100644 src/pages/projects/sistent/components/drawer/guidance.js create mode 100644 src/pages/projects/sistent/components/drawer/index.js create mode 100644 src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js create mode 100644 src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js create mode 100644 src/sections/Projects/Sistent/components/drawer/DrawerComponent/data.js create mode 100644 src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js create mode 100644 src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js create mode 100644 src/sections/Projects/Sistent/components/drawer/code.js create mode 100644 src/sections/Projects/Sistent/components/drawer/guidance.js create mode 100644 src/sections/Projects/Sistent/components/drawer/index.js diff --git a/src/pages/projects/sistent/components/drawer/code.js b/src/pages/projects/sistent/components/drawer/code.js new file mode 100644 index 000000000000..f82a26bf8b46 --- /dev/null +++ b/src/pages/projects/sistent/components/drawer/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { DrawerCode } from "../../../../../sections/Projects/Sistent/components/drawer/code"; + +const DrawerCodePage = () => { + return ; +}; + +export default DrawerCodePage; diff --git a/src/pages/projects/sistent/components/drawer/guidance.js b/src/pages/projects/sistent/components/drawer/guidance.js new file mode 100644 index 000000000000..f4c2bef77c09 --- /dev/null +++ b/src/pages/projects/sistent/components/drawer/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { DrawerGuidance } from "../../../../../sections/Projects/Sistent/components/drawer/guidance"; + +const DrawerGuidancePage = () => { + return ; +}; + +export default DrawerGuidancePage; diff --git a/src/pages/projects/sistent/components/drawer/index.js b/src/pages/projects/sistent/components/drawer/index.js new file mode 100644 index 000000000000..f8b2749d03f3 --- /dev/null +++ b/src/pages/projects/sistent/components/drawer/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentDrawer from "../../../../../sections/Projects/Sistent/components/drawer/index"; + +const SistentDrawerPage = () => { + return ; +}; + +export default SistentDrawerPage; diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js new file mode 100644 index 000000000000..905a3a33e8e1 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js @@ -0,0 +1,171 @@ +import React, { useEffect, useRef } from "react"; +import { Drawer, Button, SistentThemeProvider } from "@layer5/sistent"; +import { + Inbox as InboxIcon, + Mail as MailIcon, + Menu as MenuIcon, + ChevronLeft as ChevronLeftIcon, +} from "@mui/icons-material"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +const drawerWidth = 240; + +export default function PersistentDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + const wrapperRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event) { + if ( + wrapperRef.current && + !wrapperRef.current.contains(event.target) && + !event.target.closest(".MuiButton-root") + ) { + setOpen(false); + } + } + + if (open) { + document.addEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [open]); + + const toggleDrawer = (event) => { + event.stopPropagation(); + setOpen(!open); + }; + + return ( + +
+
+
+ + + Persistent Drawer + +
+ + + +
+
Menu
+
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+
{index % 2 === 0 ? : }
+ {text} +
+ ))} +
+
+
+ {["All mail", "Trash"].map((text, index) => ( +
+
{index % 2 === 0 ? : }
+ {text} +
+ ))} +
+
+ + +
+

Main Content

+

This is the main content area. Click anywhere outside the drawer to close it.

+ {Array.from({ length: 20 }).map((_, index) => ( +

+ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +

+ ))} +
+
+
+ + ); +} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js new file mode 100644 index 000000000000..13ec32e59516 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js @@ -0,0 +1,140 @@ +import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +import { + Box, + Drawer, + Button, + Divider, + ListItemIcon, + ListItemText +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; + +const drawerWidth = 240; + +export default function TemporaryDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); + }; + + const DrawerContent = () => ( + + + Menu + + + +
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ +
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ + ); + + return ( + + + + + Drawer Demo + + + + + + + + + This is a demonstration of a temporary drawer. You can add a button to trigger the drawer's opening, making it easy for users to access additional content or navigation options when needed. + + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/data.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/data.js new file mode 100644 index 000000000000..899d6af8dbf3 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/data.js @@ -0,0 +1,572 @@ + +export const codes = [ + ` import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +import { + Box, + Drawer, + Button, + Divider, + ListItemIcon, + ListItemText +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; + +const drawerWidth = 240; + +export default function TemporaryDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); + }; + + const DrawerContent = () => ( + + + Menu + + + +
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ +
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ + ); + + return ( + + + + + Drawer Demo + + + + + + + + + This is a demonstration of a temporary drawer. You can add a button to trigger the drawer's opening, making it easy for users to access additional content or navigation options when needed. + + + + + ); +} +`, + ` import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +import { + Box, + Drawer, + Button, + Divider, + ListItemIcon +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; + +const drawerWidth = 10; // Mini drawer width +const fullDrawerWidth = 60; // Full width when expanded + +export default function MiniVariantDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); + }; + + const DrawerContent = () => ( + + + + + +
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + +
+ ))} +
+ +
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + +
+ ))} +
+ + ); + + return ( + + + + + Mini Variant Drawer Demo + + + + + + + + +

Main Content

+

This is the main content area. Click the button above to open the drawer.

+ + + + + ); +} +`, + ` import React, { useEffect, useRef } from "react"; +import { Drawer, Button, SistentThemeProvider } from "@layer5/sistent"; +import { + Inbox as InboxIcon, + Mail as MailIcon, + Menu as MenuIcon, + ChevronLeft as ChevronLeftIcon, +} from "@mui/icons-material"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +const drawerWidth = 240; + +export default function PersistentDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + const wrapperRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event) { + if ( + wrapperRef.current && + !wrapperRef.current.contains(event.target) && + !event.target.closest(".MuiButton-root") + ) { + setOpen(false); + } + } + + if (open) { + document.addEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [open]); + + const toggleDrawer = (event) => { + event.stopPropagation(); + setOpen(!open); + }; + + return ( + +
+
+
+ + + Persistent Drawer + +
+ + + +
+
Menu
+
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+
{index % 2 === 0 ? : }
+ {text} +
+ ))} +
+
+
+ {["All mail", "Trash"].map((text, index) => ( +
+
{index % 2 === 0 ? : }
+ {text} +
+ ))} +
+
+ + +
+

Main Content

+

This is the main content area. Click anywhere outside the drawer to close it.

+ {Array.from({ length: 20 }).map((_, index) => ( +

+ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +

+ ))} +
+
+
+ + ); +} +`, + ` import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +import { + Box, + Drawer, + Divider, + ListItemIcon, + ListItemText +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon } from "@mui/icons-material"; + +const drawerWidth = 240; + +export default function PermanentDrawer() { + const { isDark } = useStyledDarkMode(); + + const DrawerContent = () => ( + + + Menu + + +
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ +
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ + ); + + return ( + + + + + + + +

Main Content

+

This is the main content area. The drawer on the left is permanent.

+

Additional content to demonstrate scrolling.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nulla vitae nisi pulvinar, sed congue magna feugiat.

+

Quisque dapibus metus sit amet arcu fermentum, sit amet gravida felis sodales.

+ {Array.from({ length: 20 }).map((_, index) => ( +

+ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +

+ ))} + + + + ); +} +`, + ` + + `, + ]; + \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js new file mode 100644 index 000000000000..5091a6ee5e8a --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js @@ -0,0 +1,139 @@ +import React from 'react'; +import { SistentThemeProvider } from '@layer5/sistent'; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +import { + Box, + Drawer, + Button, + Divider, + ListItemIcon +} from '@layer5/sistent'; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from '@mui/icons-material'; + +const drawerWidth = 10; // Mini drawer width +const fullDrawerWidth = 60; // Full width when expanded + +export default function MiniVariantDrawer() { + const { isDark } = useStyledDarkMode(); + const [open, setOpen] = React.useState(false); + + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); + }; + + const DrawerContent = () => ( + + + + + +
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + +
+ ))} +
+ +
+ {['All mail', 'Trash', 'Spam'].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + +
+ ))} +
+ + ); + + return ( + + + + + Mini Variant Drawer Demo + + + + + + + + +

Main Content

+

This is the main content area. Click the button above to open the drawer.

+ + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js new file mode 100644 index 000000000000..d67dcc71e0c9 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js @@ -0,0 +1,107 @@ +import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +import { + Box, + Drawer, + Divider, + ListItemIcon, + ListItemText +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon } from "@mui/icons-material"; + +const drawerWidth = 240; + +export default function PermanentDrawer() { + const { isDark } = useStyledDarkMode(); + + const DrawerContent = () => ( + + + Menu + + +
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ +
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
+ + {index % 2 === 0 ? : } + + +
+ ))} +
+ + ); + + return ( + + + + + + + +

Main Content

+

This is the main content area. The drawer on the left is permanent.

+

Additional content to demonstrate scrolling.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nulla vitae nisi pulvinar, sed congue magna feugiat.

+

Quisque dapibus metus sit amet arcu fermentum, sit amet gravida felis sodales.

+ {Array.from({ length: 20 }).map((_, index) => ( +

+ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +

+ ))} + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/drawer/code.js b/src/sections/Projects/Sistent/components/drawer/code.js new file mode 100644 index 000000000000..64cfb0102073 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/code.js @@ -0,0 +1,141 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { Button, SistentThemeProvider } from "@layer5/sistent"; +import { CodeBlock } from "../button/code-block"; +import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import {codes} from './DrawerComponent/data' +import TemporaryDrawer from "./DrawerComponent/TempDrawer"; +import MiniVariantDrawer from "./DrawerComponent/miniVariant"; +import PersistentDrawer from "./DrawerComponent/PersistentDrawer"; +import PermanentDrawer from "./DrawerComponent/permanentDrawer"; + +export const DrawerCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Drawer

+ +

+ A drawer is a navigation component that slides in from the side of the screen, providing quick access to additional content or options without disrupting the main view. It helps users explore different sections or perform actions while keeping the primary content accessible and uninterrupted. +

+
+ navigate("/projects/sistent/components/anchor")} + title="Overview" + /> + + navigate("/projects/sistent/components/anchor/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/identity/color/code")} + title="Code" + /> +
+
+

+ Drawers provide a convenient way to organize and display additional content or navigation options. They can be placed in various locations within the user interface, allowing users to access essential information and actions as needed. +

+ +

Drawers

+ +

+ The button comes in Various types: +

+

Temporary Drawers

+

+ Temporary drawers are a type of navigation panel that slides in from the edge of the screen and overlays the main content. +

+
+
+ + + +
+ +
+

Mini-Variant Drawers

+

+ Mini-variant drawers are compact versions of side navigation drawers that provide quick access to essential items while occupying minimal screen space. +

+
+
+ + + +
+ +
+

Persistent Drawer

+

+ Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. +

+
+
+ + + +
+ +
+ +

Permanent Drawer

+

+ Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. +

+
+
+ + + +
+ +
+ + +

Modal Drawer

+

+ Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. +

+
+
+ + {/* */} + +
+ +
+ +
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/drawer/guidance.js b/src/sections/Projects/Sistent/components/drawer/guidance.js new file mode 100644 index 000000000000..d8d6b7de9e2a --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/guidance.js @@ -0,0 +1,146 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { Button, SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const DrawerGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Drawer

+ +

+ The Drawer component serves as a slide-out panel that provides additional content or navigation options without navigating away from the current page. +

+
+ navigate("/projects/sistent/components/drawer")} + title="Overview" + /> + + navigate("/projects/sistent/components/drawer/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/drawer/code")} + title="Code" + /> +
+
+

+ For proper application, these Drawers can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +

+ +

Function

+ +

+ The function of different drawers is determined by their specific role in a + design and how well they provide access to information, assist in navigation, + or support task completion. Functions or roles that can be assigned to + drawers in a particular design include: +

+ +

Primary Drawer

+

+ The primary drawer is used to house the most important navigation options or + frequently accessed content within an application. It typically includes core + sections or main categories, helping users move efficiently through the app’s + structure. The primary drawer is often persistent to ensure consistent access + and can be especially helpful for users who need to switch between key areas + regularly. +

+ +

Secondary Drawer

+

+ Secondary drawers are used for supporting or auxiliary content, providing + access to settings, options, or filters that enhance the user's experience + without overwhelming the main interface. Secondary drawers are often + temporary or slide out when needed, keeping the interface clean while still + allowing quick access to additional functionality. +

+ +

Persistent Drawer

+

+ A persistent drawer remains visible and accessible even as users interact + with the main content. This type of drawer is beneficial for applications + where constant navigation options are needed without taking the user away + from their current task, helping maintain focus and accessibility. +

+ +

Action Drawer

+

+ Action drawers are used for task-specific actions such as a shopping cart, + notifications, or chat messages, allowing users to see real-time updates or + make selections. These drawers often have their own unique styling to make + them easily identifiable from other types and are designed to streamline + specific workflows. +

+ + +

Labeling

+ +

+ The drawer component provides an interactive way to display additional content or navigation options without navigating away from the current page. To ensure clarity and usability, the following guidelines should be considered: +

+ +

Visibility and Accessibility

+
    +
  • + The drawer should be easily opened and closed, with visual indicators such as buttons or icons to indicate its function. +
    • +
  • + Ensure that the drawer is accessible via keyboard navigation and screen readers to accommodate all users. +
    • +
+

Content Organization

+
    +
  • + Content within the drawer should be well-organized and categorized, allowing users to find what they need quickly and efficiently. +
    • +
  • + Use headings and dividers to separate different sections of content, making the drawer more scannable. +
    • +
+

Visual Design

+
    +
  • + The drawer’s design should be consistent with the overall application theme, including colors, typography, and spacing. +
    • +
  • + Consider the use of animations for opening and closing the drawer to enhance the user experience without causing distraction. +
    • +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/drawer/index.js b/src/sections/Projects/Sistent/components/drawer/index.js new file mode 100644 index 000000000000..1771e694dd20 --- /dev/null +++ b/src/sections/Projects/Sistent/components/drawer/index.js @@ -0,0 +1,280 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Button, Drawer } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, +} from "@mui/material"; + +import TemporaryDrawer from "./DrawerComponent/TempDrawer"; +import PersistentDrawer from "./DrawerComponent/PersistentDrawer"; +import MiniDrawer from "./DrawerComponent/miniVariant"; +import PermanentDrawer from "./DrawerComponent/permanentDrawer"; +const SistentDrawer = () => { + const props = [ + { + name: "anchor", + type: "\"left\" | \"right\" | \"top\" | \"bottom\"", + defaultValue: "\"left\"", + description: "Determines which edge of the screen the drawer will slide in from.", + }, + { + name: "open", + type: "boolean", + defaultValue: "", + description: "Controls whether the drawer is open or closed.", + }, + { + name: "onClose", + type: "(event: MouseEvent | KeyboardEvent) => void", + defaultValue: "", + description: "Callback fired when the drawer requests to be closed.", + }, + { + name: "onOpen", + type: "(event: MouseEvent | KeyboardEvent) => void", + defaultValue: "", + description: "Callback fired when the drawer requests to be opened (used in SwipeableDrawer).", + }, + { + name: "variant", + type: "\"permanent\" | \"persistent\" | \"temporary\"", + defaultValue: "\"temporary\"", + description: "Defines the behavior of the drawer (e.g., persistent drawers stay open).", + }, + { + name: "ModalProps", + type: "object", + defaultValue: "", + description: "Properties applied to the modal component used internally by the drawer.", + }, + { + name: "keepMounted", + type: "boolean", + defaultValue: "true", + description: "When set to true, the drawer's contents remain mounted in the DOM when closed.", + }, + { + name: "disableBackdropTransition", + type: "boolean", + defaultValue: "false", + description: "If true, disables the transition effect when the backdrop is shown or hidden.", + }, + { + name: "children", + type: "ReactNode", + defaultValue: "", + description: "The content to be rendered inside the drawer.", + }, + { + name: "className", + type: "string", + defaultValue: "", + description: "The CSS class applied to the drawer's root element.", + }, + { + name: "style", + type: "object", + defaultValue: "", + description: "Inline styles applied to the drawer's root element.", + }, + ]; + + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Drawer

+ +

+ A Drawer is an interactive component that serves as a sliding panel, providing users with quick access to additional content or navigation options. It helps streamline the user experience by allowing seamless transitions between different sections of an application or website, guiding users effortlessly through their tasks. +

+
+ navigate("/projects/sistent/components/drawer")} + title="Overview" + /> + + navigate("/projects/sistent/components/drawer/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/drawer/code")} + title="Code" + /> +
+
+

+ Drawers are essential components in a user interface, acting as expandable panels that provide quick access to additional content or navigation options. They enhance user experience by allowing seamless transitions between different sections of an application, keeping the main interface uncluttered. +

+ +

Props

+ +

+ Here are the commonly used props for the Drawer component, including both standard and swipeable variants: +

+ + + +
+ {/* Table Header */} +
+
Prop
+
Type
+
Default
+
Description
+
+ + {/* Table Body */} + {props.map((prop) => ( +
+
{prop.name}
+
{prop.type}
+
{prop.defaultValue}
+
{prop.description}
+
+ ))} +
+ +
+ + +
+ + +

Types

+ +

+ Here's an explanation of the types of drawers you mentioned, along with their features and use cases: +

+

Temporary Drawer

+
    +
  • +

    + Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. + The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the open prop. +

    +
    • +
  • +
    + + + +
    +
    • +
+ + +

Mini Variant drawer

+
    +
  • +

    + In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer. +

    +
    • +
  • +

    + The mini variant is recommended for apps sections that need quick selection access alongside content. +

    +
    • +
  • +
    + +
    +
    • +
+ +

Persistent drawer

+
    +
  • +

    + Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session. +

    +
    • +
  • +

    + Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation. +

    +
    • +
  • +
    + +
    +
    • + +
+
+
+ +

Permanent drawer

+
    +
  • +

    + Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. +

    +
    • +
  • +

    + Permanent navigation drawers are the recommended default for desktop. +

    +
    • +
  • +
    + +
    +
    • +
+
+ + +

Adding Drawers

+ +

+ Sometimes, icons are used alongside labels in buttons to pass across + specific information or relay added information for a higher level + of understanding and better comprehension. Depending on the + information being conveyed, the icons can be placed on the left side + of the label text or on the right side of the label text. No + specific rules apply apart from spacing tips which may be considered + here. For full width buttons, if icons must be added, they should be + centered in the button alongside the label text. +

+
+
+ + ); +}; + +export default SistentDrawer; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index fa716d565a50..138605a530c9 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -50,6 +50,13 @@ const componentsData = [ description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", url: "/projects/sistent/components/text-field", + }, + { + id: 7, + name: "Drawer", + description: + "A Drawer component provides a sliding panel that can be used to display navigation links, actions, or additional content", + url: "/projects/sistent/components/drawer", } ]; From c960d4586f5c8c5bcb8b33570891b2e71b060352 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 16:38:41 +0530 Subject: [PATCH 2/6] Linting issues removed Signed-off-by: NishantSinghhhhh --- .../drawer/DrawerComponent/TempDrawer.js | 2 +- .../components/drawer/DrawerComponent/data.js | 3 +- .../drawer/DrawerComponent/miniVariant.js | 76 +++++++++---------- .../Sistent/components/drawer/code.js | 19 +++-- .../Sistent/components/drawer/guidance.js | 27 ++++--- .../Sistent/components/drawer/index.js | 60 +++++++-------- tash pop stash@{1} | 16 ++++ 7 files changed, 104 insertions(+), 99 deletions(-) create mode 100644 tash pop stash@{1} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js index 13ec32e59516..0edd4a152308 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js @@ -96,7 +96,7 @@ export default function TemporaryDrawer() { position: "relative", flex: 1, overflow: "hidden", - display : "flex", + display: "flex", flexDirection: "row", }}> `, - ]; - \ No newline at end of file +]; diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js index 5091a6ee5e8a..1c3ec79be8a2 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { SistentThemeProvider } from '@layer5/sistent'; +import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; import { @@ -8,8 +8,8 @@ import { Button, Divider, ListItemIcon -} from '@layer5/sistent'; -import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from '@mui/icons-material'; +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; const drawerWidth = 10; // Mini drawer width const fullDrawerWidth = 60; // Full width when expanded @@ -24,15 +24,15 @@ export default function MiniVariantDrawer() { const DrawerContent = () => ( - -
- {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( -
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
{index % 2 === 0 ? : } @@ -41,8 +41,8 @@ export default function MiniVariantDrawer() {
- {['All mail', 'Trash', 'Spam'].map((text, index) => ( -
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
{index % 2 === 0 ? : } @@ -58,42 +58,42 @@ export default function MiniVariantDrawer() { sx={{ width: 800, height: 500, - margin: '20px auto', - border: '1px solid #ccc', - borderRadius: '8px', - overflow: 'hidden', - position: 'relative', - boxShadow: '0 2px 4px rgba(0,0,0,0.1)', - display: 'flex', - flexDirection: 'column' + margin: "20px auto", + border: "1px solid #ccc", + borderRadius: "8px", + overflow: "hidden", + position: "relative", + boxShadow: "0 2px 4px rgba(0,0,0,0.1)", + display: "flex", + flexDirection: "column" }} > - Mini Variant Drawer Demo + Mini Variant Drawer Demo @@ -104,14 +104,14 @@ export default function MiniVariantDrawer() { variant="persistent" sx={{ width: open ? fullDrawerWidth : drawerWidth, - position: 'relative', - '& .MuiDrawer-paper': { - position: 'relative', + position: "relative", + "& .MuiDrawer-paper": { + position: "relative", width: open ? fullDrawerWidth : drawerWidth, - boxSizing: 'border-box', - height: '80vh', - borderRight: '1px solid #ccc', - backgroundColor: isDark ? 'background.default' : '#fff', + boxSizing: "border-box", + height: "80vh", + borderRight: "1px solid #ccc", + backgroundColor: isDark ? "background.default" : "#fff", overflowX: "hidden", }, }} @@ -122,9 +122,9 @@ export default function MiniVariantDrawer() { {

Drawers

- The button comes in Various types: + The button comes in Various types:

Temporary Drawers

@@ -77,7 +76,7 @@ export const DrawerCode = () => {

- +
@@ -101,7 +100,7 @@ export const DrawerCode = () => {
- +
@@ -114,12 +113,12 @@ export const DrawerCode = () => {
- +
- +

Modal Drawer

@@ -128,12 +127,12 @@ export const DrawerCode = () => {

- {/* */} + {/* */}
- +
diff --git a/src/sections/Projects/Sistent/components/drawer/guidance.js b/src/sections/Projects/Sistent/components/drawer/guidance.js index d8d6b7de9e2a..f7bbd062f8a0 100644 --- a/src/sections/Projects/Sistent/components/drawer/guidance.js +++ b/src/sections/Projects/Sistent/components/drawer/guidance.js @@ -1,8 +1,7 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider } from "@layer5/sistent"; +// import { SistentThemeProvider } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; @@ -70,41 +69,41 @@ export const DrawerGuidance = () => {

Primary Drawer

-

+

The primary drawer is used to house the most important navigation options or frequently accessed content within an application. It typically includes core sections or main categories, helping users move efficiently through the app’s structure. The primary drawer is often persistent to ensure consistent access and can be especially helpful for users who need to switch between key areas regularly. -

- +

+

Secondary Drawer

-

+

Secondary drawers are used for supporting or auxiliary content, providing access to settings, options, or filters that enhance the user's experience without overwhelming the main interface. Secondary drawers are often temporary or slide out when needed, keeping the interface clean while still allowing quick access to additional functionality. -

+

-

Persistent Drawer

-

+

Persistent Drawer

+

A persistent drawer remains visible and accessible even as users interact with the main content. This type of drawer is beneficial for applications where constant navigation options are needed without taking the user away from their current task, helping maintain focus and accessibility. -

+

-

Action Drawer

-

+

Action Drawer

+

Action drawers are used for task-specific actions such as a shopping cart, notifications, or chat messages, allowing users to see real-time updates or make selections. These drawers often have their own unique styling to make them easily identifiable from other types and are designed to streamline specific workflows. -

- +

+

Labeling

 diff --git a/src/sections/Projects/Sistent/components/drawer/index.js b/src/sections/Projects/Sistent/components/drawer/index.js index 1771e694dd20..35359f95fca1 100644 --- a/src/sections/Projects/Sistent/components/drawer/index.js +++ b/src/sections/Projects/Sistent/components/drawer/index.js @@ -1,26 +1,18 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Button, Drawer } from "@layer5/sistent"; +import { SistentThemeProvider } from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; +import { Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Paper, -} from "@mui/material"; +import { Table } from "@layer5/sistent"; import TemporaryDrawer from "./DrawerComponent/TempDrawer"; import PersistentDrawer from "./DrawerComponent/PersistentDrawer"; import MiniDrawer from "./DrawerComponent/miniVariant"; import PermanentDrawer from "./DrawerComponent/permanentDrawer"; + const SistentDrawer = () => { const props = [ { @@ -146,30 +138,30 @@ const SistentDrawer = () => { Here are the commonly used props for the Drawer component, including both standard and swipeable variants:

- - -
- {/* Table Header */} -
-
Prop
-
Type
-
Default
-
Description
-
+ +
+
+ {/* Table Header */} +
+
Prop
+
Type
+
Default
+
Description
+
- {/* Table Body */} - {props.map((prop) => ( -
-
{prop.name}
-
{prop.type}
-
{prop.defaultValue}
-
{prop.description}
-
- ))} -
+ {/* Table Body */} + {props.map((prop) => ( +
+
{prop.name}
+
{prop.type}
+
{prop.defaultValue}
+
{prop.description}
+
+ ))} + -
- + +
diff --git a/tash pop stash@{1} b/tash pop stash@{1} new file mode 100644 index 000000000000..55cffba5e21a --- /dev/null +++ b/tash pop stash@{1} @@ -0,0 +1,16 @@ +stash@{0}: WIP on Drawer: 1e2a4fb0c Merge branch 'layer5io:master' into Drawer +stash@{1}: On Drawer: Drawer Component +stash@{2}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{3}: On CArd: Stash1 +stash@{4}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{5}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{6}: WIP on Link_Component: 59b3df469 Removed the extra component +stash@{7}: On Link_Component: changed code.js +stash@{8}: WIP on AppBar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{9}: autostash +stash@{10}: WIP on Link_Component: 8a4b85525 Chanegd the button style , removed green color prop from links and also removed download button +stash@{11}: WIP on (no branch): a5bb98c16 Update index.js +stash@{12}: WIP on Link_Component: 0cf978c3c Update guidance.js +stash@{13}: WIP on master: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{14}: WIP on Avatar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{15}: WIP on Link_Component: e994890d9 Did the Required changes From 09fbb9529ac331b55da2bd3118ed93b81220430f Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Sun, 27 Oct 2024 18:53:01 +0530 Subject: [PATCH 3/6] Delete tash pop stash@{1} Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- tash pop stash@{1} | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 tash pop stash@{1} diff --git a/tash pop stash@{1} b/tash pop stash@{1} deleted file mode 100644 index 55cffba5e21a..000000000000 --- a/tash pop stash@{1} +++ /dev/null @@ -1,16 +0,0 @@ -stash@{0}: WIP on Drawer: 1e2a4fb0c Merge branch 'layer5io:master' into Drawer -stash@{1}: On Drawer: Drawer Component -stash@{2}: WIP on CArd: 4ffb32c8e Started with the Card component -stash@{3}: On CArd: Stash1 -stash@{4}: WIP on CArd: 4ffb32c8e Started with the Card component -stash@{5}: WIP on CArd: 4ffb32c8e Started with the Card component -stash@{6}: WIP on Link_Component: 59b3df469 Removed the extra component -stash@{7}: On Link_Component: changed code.js -stash@{8}: WIP on AppBar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot -stash@{9}: autostash -stash@{10}: WIP on Link_Component: 8a4b85525 Chanegd the button style , removed green color prop from links and also removed download button -stash@{11}: WIP on (no branch): a5bb98c16 Update index.js -stash@{12}: WIP on Link_Component: 0cf978c3c Update guidance.js -stash@{13}: WIP on master: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot -stash@{14}: WIP on Avatar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot -stash@{15}: WIP on Link_Component: e994890d9 Did the Required changes From a31bffda56b8c7b6c48e851147b734d54724558b Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Wed, 30 Oct 2024 10:06:22 +0530 Subject: [PATCH 4/6] Removing merge conflicts Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/drawer/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/sections/Projects/Sistent/components/drawer/index.js b/src/sections/Projects/Sistent/components/drawer/index.js index 35359f95fca1..08d7a74702c7 100644 --- a/src/sections/Projects/Sistent/components/drawer/index.js +++ b/src/sections/Projects/Sistent/components/drawer/index.js @@ -13,6 +13,8 @@ import PersistentDrawer from "./DrawerComponent/PersistentDrawer"; import MiniDrawer from "./DrawerComponent/miniVariant"; import PermanentDrawer from "./DrawerComponent/permanentDrawer"; +// testing drawer + const SistentDrawer = () => { const props = [ { From 1063b9d2661ed15b51effd8369bef2a2c28ded5d Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sat, 9 Nov 2024 15:37:16 +0530 Subject: [PATCH 5/6] Changed the requested changes Signed-off-by: NishantSinghhhhh --- .../DrawerComponent/PersistentDrawer.js | 13 +- .../drawer/DrawerComponent/TempDrawer.js | 14 +- .../components/drawer/DrawerComponent/data.js | 262 ++++-------------- .../drawer/DrawerComponent/miniVariant.js | 11 +- .../drawer/DrawerComponent/permanentDrawer.js | 6 +- .../Sistent/components/drawer/code.js | 17 +- 6 files changed, 66 insertions(+), 257 deletions(-) diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js index 905a3a33e8e1..88b45a1a7552 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js @@ -34,7 +34,7 @@ export default function PersistentDrawer() { document.removeEventListener("mousedown", handleClickOutside); }; }, [open]); - + const toggleDrawer = (event) => { event.stopPropagation(); setOpen(!open); @@ -45,14 +45,11 @@ export default function PersistentDrawer() {
@@ -68,13 +65,10 @@ export default function PersistentDrawer() { style={{ width: "100%", height: "64px", - backgroundColor: "#00B39F", display: "flex", alignItems: "center", padding: "0 16px", - color: "white", zIndex: 1, - transition: "margin-left 0.3s ease", marginLeft: open ? drawerWidth : 0, }} > @@ -98,11 +92,10 @@ export default function PersistentDrawer() { width: drawerWidth, height: "140vh", position: "relative", - boxSizing: "border-box", borderRight: "1px solid #ccc", overflowY: "auto", overflowX: "hidden", - backgroundColor: "transparent", // Set the background to transparent + backgroundColor: "transparent", }, }} > diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js index 0edd4a152308..fd5b8475e601 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js @@ -62,17 +62,13 @@ export default function TemporaryDrawer() { height: 500, margin: "20px auto", border: "1px solid #ccc", - borderRadius: "8px", overflow: "hidden", position: "relative", - boxShadow: "0 2px 4px rgba(0,0,0,0.1)", display: "flex", flexDirection: "column" }} > Open drawer @@ -100,7 +93,6 @@ export default function TemporaryDrawer() { flexDirection: "row", }}> ( - - - Menu - - - -
- {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( -
- - {index % 2 === 0 ? : } - - -
- ))} -
- -
- {["All mail", "Trash", "Spam"].map((text, index) => ( -
- - {index % 2 === 0 ? : } - + + + Menu + + + + {["Inbox", "Starred", "Send email", "Drafts", "All mail", "Trash", "Spam"].map((text, index) => ( + + {index % 2 === 0 ? : } -
+ ))} -
- - ); + + ); return ( - Open drawer @@ -98,24 +60,21 @@ export default function TemporaryDrawer() { position: "relative", flex: 1, overflow: "hidden", - display : "flex", + display: "flex", flexDirection: "row", }}> - ); } `, - ` import React from "react"; -import { SistentThemeProvider } from "@layer5/sistent"; -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; - -import { - Box, - Drawer, - Button, - Divider, - ListItemIcon -} from "@layer5/sistent"; -import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; - -const drawerWidth = 10; // Mini drawer width -const fullDrawerWidth = 60; // Full width when expanded - -export default function MiniVariantDrawer() { +`export default function MiniVariantDrawer() { const { isDark } = useStyledDarkMode(); const [open, setOpen] = React.useState(false); @@ -166,37 +108,23 @@ export default function MiniVariantDrawer() { }; const DrawerContent = () => ( - - - - - -
- {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( -
- - {index % 2 === 0 ? : } - -
- ))} -
- -
- {["All mail", "Trash", "Spam"].map((text, index) => ( -
- - {index % 2 === 0 ? : } - -
+ + + + + + {["Inbox", "Starred", "Send email", "Drafts", "All mail", "Trash", "Spam"].map((text, index) => ( + + {index % 2 === 0 ? : } + ))} -
- - ); + + ); return ( - + Open drawer @@ -236,7 +157,9 @@ export default function MiniVariantDrawer() { - ); } `, - ` import React, { useEffect, useRef } from "react"; -import { Drawer, Button, SistentThemeProvider } from "@layer5/sistent"; -import { - Inbox as InboxIcon, - Mail as MailIcon, - Menu as MenuIcon, - ChevronLeft as ChevronLeftIcon, -} from "@mui/icons-material"; -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; - -const drawerWidth = 240; - -export default function PersistentDrawer() { +`export default function PersistentDrawer() { const { isDark } = useStyledDarkMode(); const [open, setOpen] = React.useState(false); const wrapperRef = useRef(null); useEffect(() => { - function handleClickOutside(event) { - if ( - wrapperRef.current && - !wrapperRef.current.contains(event.target) && - !event.target.closest(".MuiButton-root") - ) { - setOpen(false); - } - } if (open) { document.addEventListener("mousedown", handleClickOutside); @@ -322,18 +222,13 @@ export default function PersistentDrawer() { }; return ( -
@@ -349,17 +244,14 @@ export default function PersistentDrawer() { style={{ width: "100%", height: "64px", - backgroundColor: "#00B39F", display: "flex", alignItems: "center", padding: "0 16px", - color: "white", zIndex: 1, - transition: "margin-left 0.3s ease", marginLeft: open ? drawerWidth : 0, }} > - @@ -379,11 +271,10 @@ export default function PersistentDrawer() { width: drawerWidth, height: "140vh", position: "relative", - boxSizing: "border-box", borderRight: "1px solid #ccc", overflowY: "auto", overflowX: "hidden", - backgroundColor: "transparent", // Set the background to transparent + backgroundColor: "transparent", }, }} > @@ -430,11 +321,10 @@ export default function PersistentDrawer() { style={{ flexGrow: 1, padding: "24px", - transition: "margin-left 0.3s ease", marginLeft: open ? drawerWidth : 0, height: "calc(100% - 64px)", overflowY: "auto", - maxHeight: "calc(100% - 64px)", // Ensures scrolling within the content area + maxHeight: "calc(100% - 64px)", }} >

Main Content

@@ -447,46 +337,20 @@ export default function PersistentDrawer() {
- ); } -`, - ` import React from "react"; -import { SistentThemeProvider } from "@layer5/sistent"; -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; -import { - Box, - Drawer, - Divider, - ListItemIcon, - ListItemText -} from "@layer5/sistent"; -import { MoveToInbox as InboxIcon, Mail as MailIcon } from "@mui/icons-material"; -const drawerWidth = 240; - -export default function PermanentDrawer() { +`, +`export default function PermanentDrawer() { const { isDark } = useStyledDarkMode(); - const DrawerContent = () => ( - - - Menu - - -
- {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( -
- - {index % 2 === 0 ? : } - - -
- ))} -
- -
- {["All mail", "Trash", "Spam"].map((text, index) => ( + const DrawerContent = () => ( + + + Menu + + + {["Inbox", "Starred", "Send email", "Drafts", "All mail", "Trash", "Spam"].map((text, index) => (
{index % 2 === 0 ? : } @@ -494,22 +358,18 @@ export default function PermanentDrawer() {
))} -
- - ); + + ); return ( - @@ -555,17 +415,7 @@ export default function PermanentDrawer() { ))} - ); } `, - ` - - `, ]; diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js index 1c3ec79be8a2..89f119f1606c 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js @@ -63,14 +63,12 @@ export default function MiniVariantDrawer() { borderRadius: "8px", overflow: "hidden", position: "relative", - boxShadow: "0 2px 4px rgba(0,0,0,0.1)", display: "flex", flexDirection: "column" }} > Open drawer @@ -108,10 +102,9 @@ export default function MiniVariantDrawer() { "& .MuiDrawer-paper": { position: "relative", width: open ? fullDrawerWidth : drawerWidth, - boxSizing: "border-box", height: "80vh", borderRight: "1px solid #ccc", - backgroundColor: isDark ? "background.default" : "#fff", + backgroundColor: "transparent", overflowX: "hidden", }, }} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js index d67dcc71e0c9..4d2359e3072f 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/permanentDrawer.js @@ -53,10 +53,8 @@ export default function PermanentDrawer() { height: 500, margin: "20px auto", border: "1px solid #ccc", - borderRadius: "8px", overflow: "hidden", position: "relative", - boxShadow: "0 2px 4px rgba(0,0,0,0.1)", display: "flex", flexDirection: "row" }} @@ -73,7 +71,7 @@ export default function PermanentDrawer() { height: "100%", position: "relative", borderRight: "1px solid #ccc", - backgroundColor: isDark ? "background.default" : "#fff", + backgroundColor: "transparent", overflowX: "hidden", }, }} @@ -86,7 +84,7 @@ export default function PermanentDrawer() { flexGrow: 1, bgcolor: "background.default", p: 3, - height: "500px", // Set height to make it scrollable within the container + height: "500px", overflow: "auto" }} > diff --git a/src/sections/Projects/Sistent/components/drawer/code.js b/src/sections/Projects/Sistent/components/drawer/code.js index c62d32dcaca3..227f54243e36 100644 --- a/src/sections/Projects/Sistent/components/drawer/code.js +++ b/src/sections/Projects/Sistent/components/drawer/code.js @@ -116,23 +116,8 @@ export const DrawerCode = () => {
- +
- - -

Modal Drawer

-

- Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. -

-
-
- - {/* */} - -
- -
-
From 0d6b9978537e2522c220c419a8800779df366397 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sat, 9 Nov 2024 16:13:34 +0530 Subject: [PATCH 6/6] Done the requested changes Signed-off-by: NishantSinghhhhh --- .../components/drawer/DrawerComponent/PersistentDrawer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js index 88b45a1a7552..84cfebe13d38 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/PersistentDrawer.js @@ -34,7 +34,7 @@ export default function PersistentDrawer() { document.removeEventListener("mousedown", handleClickOutside); }; }, [open]); - + const toggleDrawer = (event) => { event.stopPropagation(); setOpen(!open); @@ -45,7 +45,7 @@ export default function PersistentDrawer() {