feat(examples): add mui-treasury-layout-nextjs

.gitignore

@@ -9,7 +9,8 @@ storybook-static
 
 # local test
 mui-treasury.config.js
-mui-treasury
+/mui-treasury
+/src/mui-treasury
 
 build-storybook.log
 chromatic.log

examples/mui-treasury-layout-nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/mui-treasury-layout-nextjs/README.md

@@ -0,0 +1,45 @@
+# MUI Treasury Layout - Next.js App Router example in TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with MUI Treasury Layout ([standard preset](https://mui-treasury.com/?path=/story/layout-v6-preset-standard--standard)) installed.
+
+## How to use
+
+Download the example:
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/siriwatknp/mui-treasury/tar.gz/next | tar -xz --strip=2  mui-treasury-master/examples/mui-treasury-layout-nextjs
+cd mui-treasury-layout-nextjs
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/siriwatknp/mui-treasury/tree/master/examples/mui-treasury-layout-nextjs)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/siriwatknp/mui-treasury/tree/master/examples/mui-treasury-layout-nextjs)
+
+## Learn more
+
+To learn more about this example:
+
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs) - learn about layout configuration.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section.

examples/mui-treasury-layout-nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/mui-treasury-layout-nextjs/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "mui-treasury-layout-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "next",
+    "@mui/material": "next",
+    "@mui/material-nextjs": "next",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest"
+  }
+}

examples/mui-treasury-layout-nextjs/src/app/MuiProvider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
+import CssBaseline from "@mui/material/CssBaseline";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+const theme = createTheme({
+  cssVariables: true,
+  colorSchemes: { light: true, dark: true },
+  typography: {
+    fontFamily: "var(--font-inter)",
+  },
+});
+
+export default function MuiProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}

examples/mui-treasury-layout-nextjs/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import MuiProvider from "./MuiProvider";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <MuiProvider>{children}</MuiProvider>
+      </body>
+    </html>
+  );
+}

examples/mui-treasury-layout-nextjs/src/app/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React from "react";
+import {
+  applyEdgeSidebarStyles,
+  applyHeaderStyles,
+  Content,
+  EdgeSidebar,
+  EdgeSidebarContent,
+  EdgeTemporaryClose,
+  Footer,
+  Header,
+  layoutClasses,
+  Root,
+  toggleEdgeSidebarCollapse,
+  toggleTemporaryEdgeSidebar,
+} from "@/mui-treasury/layout-core-v6";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Menu from "@mui/icons-material/Menu";
+import ButtonBase from "@mui/material/ButtonBase";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <Root>
+      <Header
+        sx={{
+          ...applyHeaderStyles({
+            height: { xs: "56px", md: "64px" },
+            fullWidth: "md",
+          }),
+          position: { xs: "sticky", md: "relative" },
+          px: 2,
+        }}
+      >
+        <IconButton
+          className={layoutClasses.TemporaryEdgeSidebarTrigger}
+          onClick={() => {
+            toggleTemporaryEdgeSidebar();
+          }}
+          sx={{ mr: 1 }}
+        >
+          <Menu />
+        </IconButton>
+        <Image
+          src="/next.svg"
+          alt="Vercel Logo"
+          width={100}
+          height={24}
+          priority
+        />
+      </Header>
+      <EdgeSidebar
+        sx={(theme) => ({
+          ...applyEdgeSidebarStyles({
+            theme,
+            config: {
+              xs: {
+                variant: "temporary",
+                width: "256px",
+              },
+              sm: {
+                variant: "permanent",
+                width: "256px",
+                autoCollapse: "sm",
+                collapsedWidth: "64px",
+              },
+            },
+          }),
+        })}
+      >
+        <EdgeTemporaryClose />
+        <EdgeSidebarContent>
+          <ButtonBase
+            className={layoutClasses.EdgeSidebarCollapser}
+            onClick={(event) => toggleEdgeSidebarCollapse({ event })}
+            sx={{ height: 48, mt: "auto" }}
+          >
+            <KeyboardArrowLeft
+              className={layoutClasses.EdgeSidebarUncollapsedVisible}
+            />
+            <KeyboardArrowRight
+              className={layoutClasses.EdgeSidebarCollapsedVisible}
+            />
+          </ButtonBase>
+        </EdgeSidebarContent>
+      </EdgeSidebar>
+      <Content>
+        <Container maxWidth="md" sx={{ py: 5 }}></Container>
+      </Content>
+      <Footer sx={{ minHeight: 300 }}></Footer>
+    </Root>
+  );
+}

examples/mui-treasury-layout-nextjs/src/mui-treasury/layout-core-v6/Content.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { BoxProps } from "@mui/material/Box";
+import { layoutClasses } from "./layoutClasses";
+import { styled } from "./zero-styled";
+
+/**
+ * Note: StyledContent cannot have `overflow: auto` by default because
+ *       it will break the InsetSidebar absolute positioning.
+ */
+const StyledContent = styled("main")({
+  gridArea: layoutClasses.Content,
+  minHeight: 0,
+  marginTop: "var(--Content-insetTop)",
+  marginBottom: "var(--Content-insetBottom)",
+});
+
+const Content = React.forwardRef<HTMLElement, BoxProps>(function Content(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <StyledContent
+      // @ts-expect-error Material UI issue
+      ref={ref}
+      className={`${layoutClasses.Content} ${className || ""}`}
+      {...props}
+    />
+  );
+});
+
+export default Content;