feat: add new theme berry (#860)

* feat: add theme berry

* docs: add development notes

* fix: fix blank page

* chore: update implementation

* fix: fix package.json

* chore: update ui copy

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/berry/src/layout/MinimalLayout/Header/index.js

@@ -0,0 +1,75 @@
+// material-ui
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Stack } from "@mui/material";
+import LogoSection from "layout/MainLayout/LogoSection";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+// ==============================|| MAIN NAVBAR / HEADER ||============================== //
+
+const Header = () => {
+  const theme = useTheme();
+  const { pathname } = useLocation();
+  const account = useSelector((state) => state.account);
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: 228,
+          display: "flex",
+          [theme.breakpoints.down("md")]: {
+            width: "auto",
+          },
+        }}
+      >
+        <Box component="span" sx={{ flexGrow: 1 }}>
+          <LogoSection />
+        </Box>
+      </Box>
+
+      <Box sx={{ flexGrow: 1 }} />
+      <Box sx={{ flexGrow: 1 }} />
+      <Stack spacing={2} direction="row">
+        <Button
+          component={Link}
+          variant="text"
+          to="/"
+          color={pathname === "/" ? "primary" : "inherit"}
+        >
+          首页
+        </Button>
+        <Button
+          component={Link}
+          variant="text"
+          to="/about"
+          color={pathname === "/about" ? "primary" : "inherit"}
+        >
+          关于
+        </Button>
+        {account.user ? (
+          <Button
+            component={Link}
+            variant="contained"
+            to="/panel"
+            color="primary"
+          >
+            控制台
+          </Button>
+        ) : (
+          <Button
+            component={Link}
+            variant="contained"
+            to="/login"
+            color="primary"
+          >
+            登入
+          </Button>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export default Header;

web/berry/src/layout/MinimalLayout/index.js

@@ -0,0 +1,39 @@
+import { Outlet } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
+import Header from './Header';
+import Footer from 'ui-component/Footer';
+
+// ==============================|| MINIMAL LAYOUT ||============================== //
+
+const MinimalLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <CssBaseline />
+      <AppBar
+        enableColorOnDark
+        position="fixed"
+        color="inherit"
+        elevation={0}
+        sx={{
+          bgcolor: theme.palette.background.default,
+          flex: 'none'
+        }}
+      >
+        <Toolbar>
+          <Header />
+        </Toolbar>
+      </AppBar>
+      <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} paddingTop={'64px'}>
+        <Outlet />
+      </Box>
+      <Box sx={{ flex: 'none' }}>
+        <Footer />
+      </Box>
+    </Box>
+  );
+};
+
+export default MinimalLayout;