chore: restructured app layout components and some minor fixes

playground/index.tsx

@@ -1,25 +1,89 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import {
-    LegacyFullscreen1pxIcon,
-    LegacyHandleMoreIcon,
+    LegacyReportsIcon,
+    LabelPairedHouseBlankMdRegularIcon,
+    LegacyChevronRight2pxIcon
 } from "@deriv/quill-icons";
-import { Header } from "../src/main";
-import { Text } from "../src/main";
+import {
+    MenuItem,
+    useDevice,
+    Header,
+    Drawer,
+    DerivLogo,
+    Button,
+    Wrapper,
+} from "../src/main";
 
-const App = () => (
-    <div style={{ margin: "50px", display: "flex" }}>
-        <Header.MenuItem
-            as="button"
-            leftComponent={<LegacyFullscreen1pxIcon width={16} height={16} />}
-            rightComponent={<LegacyHandleMoreIcon width={16} height={16} />}
-        >
-            <span style={{ padding: "8px 16px" }}>
-                <Text size="md">Home</Text>
-            </span>
-        </Header.MenuItem>
-    </div>
-);
+const App = () => {
+    const { isMobile } = useDevice();
+    const [is_drawer_open, setDrawerOpen] = React.useState(false);
+    return (
+        <div>
+            {!isMobile ? (
+                <Header>
+                    <Wrapper
+                        variant="left"
+                        style={{ gap: "15px", padding: "10px" }}
+                    >
+                        <DerivLogo variant="default" />
+                        <MenuItem
+                            style={{ marginLeft: "15px", gap: "5px" }}
+                            as="button"
+                            leftComponent={
+                                <LabelPairedHouseBlankMdRegularIcon />
+                            }
+                        >
+                            Trader's Hub
+                        </MenuItem>
+
+                        <MenuItem
+                            style={{ marginLeft: "15px", gap: "5px" }}
+                            as="button"
+                            leftComponent={<LegacyReportsIcon iconSize="xs" />}
+                        >
+                            Reports
+                        </MenuItem>
+                    </Wrapper>
+                </Header>
+            ) : (
+                <>
+                    <Button onClick={() => setDrawerOpen(true)}>
+                        Open Drawer
+                    </Button>
+                    <Drawer
+                        width="300px"
+                        isOpen={is_drawer_open}
+                        onCloseDrawer={() => setDrawerOpen(false)}
+                    >
+                        <Drawer.Header
+                            onCloseDrawer={() => setDrawerOpen(false)}
+                        >
+                            <DerivLogo variant="default" />
+                        </Drawer.Header>
+                        <Drawer.Content>
+                            <div style={{display: "flex", flexDirection: "column"}}>
+                                <MenuItem
+                                    style={{ gap: "5px", display: "flex", padding: "10px" }}
+                                    active
+                                    as="button"
+                                    leftComponent={
+                                        <LabelPairedHouseBlankMdRegularIcon />
+                                    }
+                                    rightComponent={<LegacyChevronRight2pxIcon iconSize="xs" />}
+                                >
+                                    Trader's Hub
+                                </MenuItem>
+
+                            </div>
+                        </Drawer.Content>
+                        <Drawer.Footer>This is a footer</Drawer.Footer>
+                    </Drawer>
+                </>
+            )}
+        </div>
+    );
+};
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>

src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx

@@ -22,7 +22,6 @@ describe("DrawerFooter Component", () => {
         );
 
         const contentElement = screen.getByText("some test content");
-        screen.debug();
         expect(contentElement).toBeInTheDocument();
         expect(contentElement).toHaveClass("deriv-drawer__footer test-class");
     });

src/components/AppLayout/Header/index.tsx

@@ -1,7 +1,5 @@
 import { ComponentProps, PropsWithChildren } from "react";
 import clsx from "clsx";
-import { DerivLogo } from "./DerivLogo";
-import { MenuItem } from "./MenuItem";
 import "./Header.scss";
 
 /**
@@ -21,7 +19,5 @@ export const Header = ({
     </header>
 );
 
-Header.DerivLogo = DerivLogo;
-Header.MenuItem = MenuItem;
 
 Header.displayName = "Header";

src/components/AppLayout/__test__/DerivLogo.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { DerivLogo } from "../Header/DerivLogo";
+import { DerivLogo } from "../DerivLogo";
 
 describe("DerivLogo Component", () => {
     it("renders default logo with correct size", () => {

src/components/AppLayout/__test__/MenuItem.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MenuItem } from "../Header/MenuItem";
+import { MenuItem } from "../MenuItem";
 
 describe("MenuItem Component", () => {
     it('renders as a button when "as" prop is "button"', () => {

src/components/AppLayout/index.ts

@@ -1,4 +1,6 @@
+export { DerivLogo } from "./DerivLogo";
 export { Drawer } from "./Drawer";
 export { Footer } from "./Footer";
 export { Header } from "./Header";
+export { MenuItem } from "./MenuItem";
 export { Wrapper } from "./Wrapper";

src/main.ts

@@ -23,5 +23,5 @@ export { ToggleSwitch } from "./components/ToggleSwitch";
 export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks";
 export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
-export { Header, Footer, Wrapper, Drawer } from "./components/AppLayout";
+export { Header, Footer, Wrapper, Drawer, DerivLogo, MenuItem } from "./components/AppLayout";
 export { ContextMenu } from "./components/ContextMenu";

stories/ContextMenu.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button, ContextMenu } from "../src/main";
-import { useEffect, useState } from "react";
+import { ContextMenu } from "../src/main";
 
 const meta = {
     title: "Components/ContextMenu",
@@ -11,7 +10,7 @@ const meta = {
     },
     tags: ["autodocs"],
     args: {
-        isOpen: false,
+        isOpen: true,
     },
     argTypes: {
         isOpen: {
@@ -28,35 +27,19 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     name: "Default ContextMenu",
-    args: {
-        isOpen: true,
-    },
     render: (args) => {
-        const [isOpen, setIsOpen] = useState(args.isOpen);
-
-        useEffect(() => {
-            setIsOpen(args.isOpen);
-        }, [args.isOpen]);
-
         return (
             <div style={{ width: "800px", height: "500px" }}>
                 <ContextMenu
-                    isOpen={isOpen}
-                    style={{ position: "absolute", top: 60, left: 10 }}
+                    isOpen={args.isOpen}
+                    style={{ position: "absolute", top: 10, left: 10 }}
                 >
                     <ul>
                         <li>Item 1</li>
                         <li>Item 2</li>
                         <li>Item 3</li>
                     </ul>
                 </ContextMenu>
-                <Button
-                    style={{ position: "relative" }}
-                    size="sm"
-                    onClick={() => setIsOpen(!isOpen)}
-                >
-                    Toggle ContextMenu
-                </Button>
             </div>
         );
     },