Adding the App Bar section

src/pages/projects/sistent/components/appbar/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { AppBarCode } from "../../../../../sections/Projects/Sistent/components/appbar/code";
+
+const AppBarCodePage = () => {
+  return <AppBarCode />;
+};
+
+export default AppBarCodePage;

src/pages/projects/sistent/components/appbar/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { AppBarGuidance } from "../../../../../sections/Projects/Sistent/components/appbar/guidance.js";
+
+const AppBarGuidancePage = () => {
+  return <AppBarGuidance />;
+};
+
+export default AppBarGuidancePage;

src/pages/projects/sistent/components/appbar/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentAppBar from "../../../../../sections/Projects/Sistent/components/appbar/index.js";
+
+const SistentAppBarPage = () => {
+  return <SistentAppBar />;
+};
+
+export default SistentAppBarPage;

src/reusecore/CodeBlock/codeBlock.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Code from "../../components/CodeBlock";
+
+export const CodeBlock = ({ name, code }) => {
+  const [showCode, setShowCode] = useState(false);
+  const onChange = () => {
+    setShowCode((prev) => !prev);
+  };
+  return (
+    <div className="show-code">
+      <input type="checkbox" name={name} id={name} onChange={onChange} />
+      <label htmlFor={name} className="label">
+        Show Code
+      </label>
+      {showCode && (
+        <Code codeString={code} language="javascript" />
+      )}
+    </div>
+  );
+};

src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js

@@ -0,0 +1,101 @@
+import * as React from "react";
+import {
+  SistentThemeProvider,
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Button,
+} from "@layer5/sistent";
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
+import InputBase from "@mui/material/InputBase";
+import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode";
+
+export default function SearchAppBar() {
+  const { isDark } = useStyledDarkMode();
+
+  // State for window width (for client-side check only)
+  const [isLargeScreen, setIsLargeScreen] = React.useState(false);
+
+  React.useEffect(() => {
+    // Check if window is defined to handle SSR
+    if (typeof window !== "undefined") {
+      setIsLargeScreen(window.innerWidth >= 600);
+
+      // Optional: Update the width on resize
+      const handleResize = () => setIsLargeScreen(window.innerWidth >= 600);
+      window.addEventListener("resize", handleResize);
+
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+
+  return (
+    <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="open drawer"
+            sx={{ marginRight: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            News
+          </Typography>
+
+          <div
+            style={{
+              position: "relative",
+              borderRadius: "4px",
+              backgroundColor: "rgba(255, 255, 255, 0.15)",
+              marginLeft: isLargeScreen ? "8px" : 0,
+              width: isLargeScreen ? "auto" : "100%",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <div
+              style={{
+                padding: "0 16px",
+                height: "100%",
+                position: "absolute",
+                pointerEvents: "none",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <SearchIcon />
+            </div>
+
+            <InputBase
+              placeholder="Search…"
+              inputProps={{ "aria-label": "search" }}
+              sx={{
+                width: "100%",
+                color: "black",
+                paddingLeft: "calc(1em + 32px)",
+                transition: "width 0.2s ease",
+                ...(isLargeScreen && {
+                  width: "12ch",
+                  "&:focus": {
+                    width: "20ch",
+                  },
+                }),
+              }}
+            />
+          </div>
+
+          <Button color="inherit" sx={{ marginLeft: 2 }}>
+            Login
+          </Button>
+        </Toolbar>
+      </AppBar>
+    </SistentThemeProvider>
+  );
+}

src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBar.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {
+  SistentThemeProvider,
+  Button,
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+} from "@layer5/sistent";
+import MenuIcon from "@mui/icons-material/Menu"; // Import MenuIcon from MUI
+import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode";
+
+export default function BasicAppBar() {
+  const { isDark } = useStyledDarkMode();
+  return (
+    <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon  /> {/* Use MUI MenuIcon here */}
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            News
+          </Typography>
+          <Button color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+    </SistentThemeProvider>
+  );
+}

src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarMenu.js

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import {
+  SistentThemeProvider,
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  Menu,
+  MenuItem,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+} from "@layer5/sistent";
+import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode";
+
+export default function MenuAppBar() {
+  const { isDark } = useStyledDarkMode();
+  const [auth, setAuth] = useState(true);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleChange = (event) => {
+    setAuth(event.target.checked);
+  };
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={auth}
+              onChange={handleChange}
+              aria-label="login switch"
+            />
+          }
+          label={auth ? "Logout" : "Login"}
+        />
+      </FormGroup>
+      <AppBar position="static">
+        <Toolbar>
+          <Button
+            size="large"
+            edge="start"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+              Menu
+          </Button>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Photos
+          </Typography>
+          {auth && (
+            <div>
+              <Button
+                size="large"
+                aria-label="account of current user"
+                aria-haspopup="true"
+                onClick={handleMenu}
+                color="inherit"
+              >
+               Account
+              </Button>
+              <Menu
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+              >
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>My account</MenuItem>
+              </Menu>
+            </div>
+          )}
+        </Toolbar>
+      </AppBar>
+    </SistentThemeProvider>
+  );
+}

src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js

@@ -0,0 +1,115 @@
+import * as React from "react";
+import {
+  SistentThemeProvider,
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Button,
+  Menu,
+  MenuItem,
+  Box,
+  Container,
+  Tooltip,
+  Avatar,
+} from "@layer5/sistent";
+import MenuIcon from "@mui/icons-material/Menu"; // Import MenuIcon from MUI
+import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode";
+
+const pages = ["Products", "Pricing", "Blog"];
+const settings = ["Profile", "Account", "Dashboard", "Logout"];
+
+export default function ResponsiveAppBar() {
+  const { isDark } = useStyledDarkMode();
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <AppBar position="static">
+        <Container maxWidth="xl">
+          <Toolbar disableGutters>
+            <IconButton
+              size="large"
+              edge="start"
+              aria-label="menu"
+              onClick={handleOpenNavMenu}
+              sx={{ mr: 2, display: { xs: "block", md: "none" } }} // Show only on small screens
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" sx={{ flexGrow: 1 }}>
+              LOGO
+            </Typography>
+
+            {/* Mobile Menu */}
+            <Menu
+              anchorEl={anchorElNav}
+              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+              keepMounted
+              transformOrigin={{ vertical: "top", horizontal: "left" }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{ display: { xs: "block", md: "none" } }} // Show only on small screens
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+
+            {/* Desktop Menu */}
+            <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+              {pages.map((page) => (
+                <Button key={page} onClick={handleCloseNavMenu} >
+                  {page}
+                </Button>
+              ))}
+            </Box>
+
+            {/* User Settings */}
+            <Box sx={{ flexGrow: 0 }}>
+              <Tooltip title="Open settings">
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  <Avatar alt="User" src="/static/images/avatar/2.jpg" />
+                </IconButton>
+              </Tooltip>
+              <Menu
+                sx={{ mt: "45px" }}
+                anchorEl={anchorElUser}
+                anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                keepMounted
+                transformOrigin={{ vertical: "top", horizontal: "right" }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                {settings.map((setting) => (
+                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                    <Typography textAlign="center">{setting}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </SistentThemeProvider>
+  );
+}