diff --git a/src/pages/projects/sistent/components/appbar/code.js b/src/pages/projects/sistent/components/appbar/code.js new file mode 100644 index 000000000000..261c458db54d --- /dev/null +++ b/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 ; +}; + +export default AppBarCodePage; diff --git a/src/pages/projects/sistent/components/appbar/guidance.js b/src/pages/projects/sistent/components/appbar/guidance.js new file mode 100644 index 000000000000..b3d2fd0f7831 --- /dev/null +++ b/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 ; +}; + +export default AppBarGuidancePage; diff --git a/src/pages/projects/sistent/components/appbar/index.js b/src/pages/projects/sistent/components/appbar/index.js new file mode 100644 index 000000000000..23dd4e6fa521 --- /dev/null +++ b/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 ; +}; + +export default SistentAppBarPage; diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js new file mode 100644 index 000000000000..a5abdeaceda9 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js @@ -0,0 +1,102 @@ +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"; + +// test + +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 ( + + + + + + + + News + + +
+
+ +
+ + +
+ + + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBar.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBar.js new file mode 100644 index 000000000000..edd578ef2409 --- /dev/null +++ b/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 ( + + + + + {/* Use MUI MenuIcon here */} + + + News + + + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarMenu.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarMenu.js new file mode 100644 index 000000000000..8177d56ec726 --- /dev/null +++ b/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 ( + + + + } + label={auth ? "Logout" : "Login"} + /> + + + + + + Photos + + {auth && ( +
+ + + Profile + My account + +
+ )} + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js new file mode 100644 index 000000000000..0bc560b146b4 --- /dev/null +++ b/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"; +import { Image } from "../../../../../../assets/images/favicon.webp"; + +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 ( + + + + + + + + + + + + {/* Mobile Menu */} + + {pages.map((page) => ( + + {page} + + ))} + + + {/* Desktop Menu */} + + {pages.map((page) => ( + + ))} + + + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js new file mode 100644 index 000000000000..518a7e67ccfd --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js @@ -0,0 +1,70 @@ +import * as React from "react"; +import { + SistentThemeProvider, + AppBar, + Toolbar, + IconButton, + Typography, + Box, +} from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +import { FavoriteIcon, BellIcon } from "@layer5/sistent"; +export default function BottomAppBar() { + const { isDark } = useStyledDarkMode(); + return ( + + + + + Welcome to the App + + + This is a sample area to add content above the bottom app bar. You can place any text, images, or other components here. + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/data.js b/src/sections/Projects/Sistent/components/appbar/AppBars/data.js new file mode 100644 index 000000000000..d3f35198d4fb --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/data.js @@ -0,0 +1,232 @@ +export const codes = [ +`export default function BasicAppBar() { + return ( + + + + + + + News + + + + + ); +} +`, + +`const pages = ["Products", "Pricing", "Blog"]; +const settings = ["Profile", "Logout"]; + +export default function MenuAppBar() { + 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 ( + + + + + + + + + Add your Image in here + + + + {pages.map((page) => ( + + {page} + + ))} + + + + {pages.map((page) => ( + + ))} + + + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + + + + ); +} + +`, +`export default function SearchAppBar() { + const [isLargeScreen, setIsLargeScreen] = React.useState(false); + + React.useEffect(() => { + if (typeof window !== "undefined") { + setIsLargeScreen(window.innerWidth >= 600); + + const handleResize = () => setIsLargeScreen(window.innerWidth >= 600); + window.addEventListener("resize", handleResize); + + return () => window.removeEventListener("resize", handleResize); + } + }, []); + + return ( + + + + + + + News + + +
+
+ +
+ + +
+ + + + + ); +} +`, +`export default function BottomAppBar() { + return ( + + + + Welcome to the App + + + Add your content in here. + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +` +]; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/appbar/code.js b/src/sections/Projects/Sistent/components/appbar/code.js new file mode 100644 index 000000000000..7532c996b6d8 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/code.js @@ -0,0 +1,125 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider } from "@layer5/sistent"; +import { CodeBlock } from "../button/code-block.js"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { codes } from "./AppBars/data"; +import BasicAppBar from "./AppBars/BasicAppBar"; +import ResponsiveAppBar from "./AppBars/BasicAppBarResponsive"; +import SearchAppBar from "./AppBars/AppBarSearch"; +import BottomAppBar from "./AppBars/BottomAppbar"; + +export const AppBarCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

App Bar

+ +

+ An App Bar is an interactive element that provides a consistent navigation framework within an application. It triggers specific actions, directs users to key areas of the app, and indicates the next steps in the user journey. The App Bar enhances usability by offering quick access to essential features and ensuring a seamless experience as users navigate through different sections. +

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

+ An App Bar is an interactive element that provides a consistent navigation framework within an application. +

+ +

App Bars

+ +

The App Bars comes in various forms:

+

Basic App Bar

+

+ A Basic App Bar serves as a fundamental navigation tool in an application, offering users easy access to primary actions and features. It typically includes branding, navigation icons, and interactive elements to enhance the overall user experience. +

+ +
+
+ + + +
+ +
+

Basic App Bar with Menu

+

+ A Basic App Bar with Menu provide users with additional navigation options and functionalities. This design allows for a cleaner interface by consolidating multiple links into a single, accessible menu, ensuring a more organized and efficient user experience. +

+ +
+
+ + + +
+ +
+

Search App Bar

+

+ An App Bar with a search menu typically includes a top navigation bar that contains a search field for user input, along with icons or links for navigation. It allows users to quickly access a search feature while also providing key site navigation options. +

+
+
+ + + +
+ +
+

Bottom App Bar

+

+ An App Bar with a search menu typically includes a top navigation bar that contains a search field for user input, along with icons or links for navigation. It allows users to quickly access a search feature while also providing key site navigation options. +

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

App Bar

+ +

+ An app bar is a user interface component that serves as a primary navigation and action area in an application. Typically positioned at the top of the screen, it provides access to essential features such as navigation menus, search functions, and action buttons. +

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

+ For proper application, the App Bar can be used for different purposes to enable easier and consistent navigation when guiding users across digital experiences. +

+ +

Function

+ +

+ The function of the App Bar determines its usage and how well suited it is to provide a cohesive navigation experience in a given scenario. Functions or roles that can be assigned to elements in an App Bar include: +

+

Primary Navigation

+

+ The primary navigation items in the App Bar are used for the most important actions or destinations within the application. It should include key options that help the user navigate through the app effectively. This could apply in cases like when the user needs to access their profile, the home page, or significant features of the app. +

+ + + + + +
+

Secondary Navigation

+

+ Secondary navigation items in the App Bar support the primary navigation by providing additional options or related actions. For instance, if the primary navigation includes 'Settings', the secondary navigation may include 'Profile' or 'Account Management' options that enhance user experience without overshadowing the primary actions. +

+ + + + + +
+

Utility Actions

+

+ Utility actions in the App Bar are used for less prominent but still necessary features such as search, notifications, or help. These elements provide users with quick access to essential tools or information without cluttering the primary navigation. +

+ + + + + +
+ + +

Labeling

+ +

+ While the styling of an App Bar gives quick indicators as to how it is + to be used and what action it helps to complete, the key element + that helps to provide a complete scope of the purpose of the App Bar is + the labels it contains. As such, the content of the App Bar should be + concise and descriptive to inform users of their navigation options and actions. +

+

Case Style

+

+ Different case styles can be applied to labels in the App Bar to serve as readable + text that conveys information. However, a rule of thumb is that all + labels follow one specific case style to enhance consistency and + reduce distractions for the user. For all of our App Bar labels, title case + has been used as text labels. +

+

Font Weight

+

+ Font weight can be used effectively to provide proper emphasis to the + labels in the App Bar as they convey needed information. Chosen fonts should + be legible with clear and readable characters that do not distract + or cause difficulty while being read. Proper exploration should be + carried out with the intended typeface to ensure it meets standards + before proceeding to use it across all App Bar labels. +

+

Content

+

+ Characters in the App Bar should not be full sentences. Instead, words + or phrases that summarize the purpose of the labels could suffice. + Total text in an App Bar label is recommended to be an average of 20 + characters long. The language used in the App Bar should also be + consistent. For instance, if a label has a text of 'Home', this convention + should be maintained and not changed to something like 'Main Page' later on. +

+ +
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/appbar/index.js b/src/sections/Projects/Sistent/components/appbar/index.js new file mode 100644 index 000000000000..09ad8ae6306e --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/index.js @@ -0,0 +1,211 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Box } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import BasicAppBar from "./AppBars/BasicAppBar"; +import BasicAppBarMenu from "./AppBars/BasicAppBarMenu"; +import ResponsiveAppBar from "./AppBars/BasicAppBarResponsive"; +import SearchAppBar from "./AppBars/AppBarSearch"; +import BottomAppBar from "./AppBars/BottomAppbar"; + +const appBarProps = [ + { + name: "children", + type: "node", + defaultValue: "", + description: "Content to render inside the AppBar, usually a Toolbar.", + }, + { + name: "color", + type: "\"default\" | \"inherit\" | \"primary\" | \"secondary\" | \"transparent\"", + defaultValue: "\"primary\"", + description: "Color of the component. Options are related to theme.", + }, + { + name: "enableColorOnDark", + type: "boolean", + defaultValue: "false", + description: "Forces primary/secondary colors on dark background.", + }, + { + name: "position", + type: "\"fixed\" | \"absolute\" | \"sticky\" | \"static\" | \"relative\"", + defaultValue: "\"fixed\"", + description: "Positioning type of the AppBar.", + }, + { + name: "sx", + type: "object", + defaultValue: "", + description: "System prop to apply custom CSS styling.", + }, + { + name: "elevation", + type: "number", + defaultValue: "4", + description: "Shadow depth of the AppBar.", + }, + { + name: "classes", + type: "object", + defaultValue: "", + description: "Override/extend styles applied to the component.", + }, + { + name: "component", + type: "elementType", + defaultValue: "", + description: "Specify an HTML element/custom component for rendering.", + }, + { + name: "variant", + type: "\"elevated\" | \"outlined\"", + defaultValue: "\"elevated\"", + description: "Sets the style variant.", + }, +]; + +const SistentAppBar = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

App Bar

+ +

+ An AppBar is an interactive element that provides users with navigation options, helps them access important actions, and organizes key information at the top of the interface, guiding them through the app's flow. +

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

+ AppBars are crucial and integral elements in an interface. They are primarily used to organize navigation and key actions, guiding users through different sections of an application. AppBars work in tandem with other elements to structure designs and enhance the overall digital experience. +

+ +

Props

+ + +

+ The AppBar component comes with several customizable props that allow for flexibility in design and functionality. These props help in defining how the AppBar behaves and looks within an application, enabling developers to tailor it according to their specific needs. +

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

Types

+ +

+ The AppBar component can be configured in various ways to suit different design needs and enhance user experience. Below are some common types of AppBars, along with their features and implementations +

+

Basic App Bar

+

+ A simple AppBar typically used for branding or navigation purposes. +

+ +
+

App Bar with Menu

+

+ This AppBar includes a menu icon for additional navigation options. +

+ +
+

App Bar with Responsive Menu

+

+ A responsive AppBar that includes a drawer for mobile navigation. +

+ +
+

App Bar with search Menu

+

+ An App Bar with a search menu typically includes a top navigation bar that contains a search field for user input, along with icons or links for navigation. It allows users to quickly access a search feature while also providing key site navigation options. +

+ + +
+

Botton App Bar

+

+ An App Bar with a search menu typically includes a top navigation bar that contains a search field for user input, along with icons or links for navigation. It allows users to quickly access a search feature while also providing key site navigation options. +

+ + +
+ + +

Adding App Bars

+ +

+ 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 SistentAppBar; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 2c5e401325b8..36e2b8cfbdd5 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -79,6 +79,13 @@ const componentsData = [ "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", url: "/projects/sistent/components/box", }, + { + id: 11, + name: "App Bar", + description: + "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", + url: "/projects/sistent/components/appbar", + } ]; const SistentComponents = () => {