From d134cfe29b9a482b623612f64cfddfb1f9711703 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 21:57:12 +0530 Subject: [PATCH 1/6] Adding the App Bar section Signed-off-by: NishantSinghhhhh --- .../sistent/components/appbar/code.js | 8 + .../sistent/components/appbar/guidance.js | 8 + .../sistent/components/appbar/index.js | 8 + src/reusecore/CodeBlock/codeBlock.js | 20 + .../components/appbar/AppBars/AppBarSearch.js | 93 ++++ .../components/appbar/AppBars/BasicAppBar.js | 35 ++ .../appbar/AppBars/BasicAppBarMenu.js | 94 ++++ .../appbar/AppBars/BasicAppBarResponsive.js | 115 +++++ .../components/appbar/AppBars/BottomAppbar.js | 75 ++++ .../Sistent/components/appbar/AppBars/data.js | 404 ++++++++++++++++++ .../Sistent/components/appbar/code.js | 127 ++++++ .../Sistent/components/appbar/guidance.js | 142 ++++++ .../Sistent/components/appbar/index.js | 211 +++++++++ .../Projects/Sistent/components/index.js | 7 + 14 files changed, 1347 insertions(+) create mode 100644 src/pages/projects/sistent/components/appbar/code.js create mode 100644 src/pages/projects/sistent/components/appbar/guidance.js create mode 100644 src/pages/projects/sistent/components/appbar/index.js create mode 100644 src/reusecore/CodeBlock/codeBlock.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBar.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarMenu.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js create mode 100644 src/sections/Projects/Sistent/components/appbar/AppBars/data.js create mode 100644 src/sections/Projects/Sistent/components/appbar/code.js create mode 100644 src/sections/Projects/Sistent/components/appbar/guidance.js create mode 100644 src/sections/Projects/Sistent/components/appbar/index.js 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/reusecore/CodeBlock/codeBlock.js b/src/reusecore/CodeBlock/codeBlock.js new file mode 100644 index 000000000000..8f9c94b1caf5 --- /dev/null +++ b/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 ( +
+ + + {showCode && ( + + )} +
+ ); +}; 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..e408163cbd91 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js @@ -0,0 +1,93 @@ +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(); + + return ( + + + + + + + + News + + +
= 600 && { + marginLeft: "8px", + width: "auto", + }), + }} + > + +
+ +
+ + + = 600 && { + width: "12ch", + "&:focus": { + width: "20ch", + }, + }), + }} + /> +
+ + + + + + + ); +} 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..5248546be0da --- /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"; + +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 ( + + + + + + + + + LOGO + + + {/* Mobile Menu */} + + {pages.map((page) => ( + + {page} + + ))} + + + {/* Desktop Menu */} + + {pages.map((page) => ( + + ))} + + + {/* User Settings */} + + + + + + + + {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..2fbe6b74c6b7 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js @@ -0,0 +1,75 @@ +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 ( + + + {/* Additional Content */} + + + 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. + + + + + {/* Bottom AppBar */} + + + + {/* */} + + + + + + + + + + + + + {/* */} + + + + + + + + ); +} 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..f00a762f6508 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/data.js @@ -0,0 +1,404 @@ +export const codes = [ + `import * as React from "react"; +import { + SistentThemeProvider, + Button, + AppBar, + Toolbar, + Typography, + IconButton, +} from "@layer5/sistent"; +import MenuIcon from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +export default function BasicAppBar() { + const { isDark } = useStyledDarkMode(); + return ( + + + + + {/* Use MUI MenuIcon here */} + + + News + + + + + + ); +} +`, +`import * as React from "react"; +import { + SistentThemeProvider, + AppBar, + Toolbar, + Typography, + IconButton, + Button, + Menu, + MenuItem, + Box, + Container, + Tooltip, + Avatar, +} from "@layer5/sistent"; +import MenuIcon from "@layer5/sistent"; // Import MenuIcon from MUI +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +const pages = ["Products", "Pricing", "Blog"]; +const settings = ["Profile", "Account", "Dashboard", "Logout"]; + +export default function MenuAppBar() { + 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 ( + + + + + + + + + LOGO + + + {/* Mobile Menu */} + + {pages.map((page) => ( + + {page} + + ))} + + + {/* Desktop Menu */} + + {pages.map((page) => ( + + ))} + + + {/* User Settings */} + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + + + + + ); +} + `, +`import * as React from "react"; +import { + SistentThemeProvider, + AppBar, + Toolbar, + Typography, + IconButton, + Button, + +} from "@layer5/sistent"; +import {MenuIcon} from "@layer5/sistent"; +import {SearchIcon} from "@layer5/sistent"; +import {InputBase} from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; + +export default function SearchAppBar() { + const { isDark } = useStyledDarkMode(); + + return ( + + + + + + + + News + + +
= 600 && { + marginLeft: "8px", + width: "auto", + }), + }} + > + +
+ +
+ + + = 600 && { + width: "12ch", + "&:focus": { + width: "20ch", + }, + }), + }} + /> +
+ + + + + + + ); +} + +`, +`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 ( + + + {/* Additional Content */} + + + 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. + + + + + {/* Bottom AppBar */} + + + + {/* */} + + + + + + + + + + + + + {/* */} + + + + + + + + ); +} + +`, +`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 ( + + + {/* Additional Content */} + + + 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. + + + + + {/* Bottom AppBar */} + + + + {/* */} + + + + + + + + + + + + + {/* */} + + + + + + + + ); +} +` + +]; \ 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..6c5d1b1430c1 --- /dev/null +++ b/src/sections/Projects/Sistent/components/appbar/code.js @@ -0,0 +1,127 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider } from "@layer5/sistent"; +import { CodeBlock } from "../../../../../reusecore/CodeBlock/codeBlock.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 fa716d565a50..dc438afaaff9 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -50,6 +50,13 @@ const componentsData = [ description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", url: "/projects/sistent/components/text-field", + }, + { + id: 7, + 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", } ]; From 86f1a0ffa06818d8553337e0950221c6df0e82e6 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 22:19:53 +0530 Subject: [PATCH 2/6] Addeing use state hook in app search bar for a little bit of responsiveness Signed-off-by: NishantSinghhhhh --- .../components/appbar/AppBars/AppBarSearch.js | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js index e408163cbd91..29042cb65b17 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js @@ -6,7 +6,6 @@ import { Typography, IconButton, Button, - } from "@layer5/sistent"; import MenuIcon from "@mui/icons-material/Menu"; import SearchIcon from "@mui/icons-material/Search"; @@ -16,6 +15,22 @@ 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 ( @@ -38,17 +53,12 @@ export default function SearchAppBar() { position: "relative", borderRadius: "4px", backgroundColor: "rgba(255, 255, 255, 0.15)", - marginLeft: 0, - width: "100%", + marginLeft: isLargeScreen ? "8px" : 0, + width: isLargeScreen ? "auto" : "100%", display: "flex", alignItems: "center", - ...(window.innerWidth >= 600 && { - marginLeft: "8px", - width: "auto", - }), }} > -
- = 600 && { + ...(isLargeScreen && { width: "12ch", "&:focus": { width: "20ch", @@ -82,7 +91,6 @@ export default function SearchAppBar() { /> - From 03c20dcbfdd5615f229dc3bb23111c690116e639 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Wed, 30 Oct 2024 10:04:34 +0530 Subject: [PATCH 3/6] Removing merge conflicts Signed-off-by: NishantSinghhhhh --- .../Projects/Sistent/components/appbar/AppBars/AppBarSearch.js | 2 ++ src/sections/Projects/Sistent/components/index.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js index 29042cb65b17..e81e800c7ce2 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js @@ -12,6 +12,8 @@ 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(); diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 6ca4e33cde5d..8be275dde997 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -64,7 +64,6 @@ const componentsData = [ description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", url: "/projects/sistent/components/appbar", - } }, ]; From 4c3204407bfbe2bcdb886fa60f38b306d1d52fdf Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Wed, 30 Oct 2024 18:53:25 +0530 Subject: [PATCH 4/6] Removed extra made code-block.js Signed-off-by: NishantSinghhhhh --- src/reusecore/CodeBlock/codeBlock.js | 20 ------------------- .../Sistent/components/appbar/code.js | 2 +- 2 files changed, 1 insertion(+), 21 deletions(-) delete mode 100644 src/reusecore/CodeBlock/codeBlock.js diff --git a/src/reusecore/CodeBlock/codeBlock.js b/src/reusecore/CodeBlock/codeBlock.js deleted file mode 100644 index 8f9c94b1caf5..000000000000 --- a/src/reusecore/CodeBlock/codeBlock.js +++ /dev/null @@ -1,20 +0,0 @@ -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 ( -
- - - {showCode && ( - - )} -
- ); -}; diff --git a/src/sections/Projects/Sistent/components/appbar/code.js b/src/sections/Projects/Sistent/components/appbar/code.js index 6c5d1b1430c1..3c5eebe7f8e1 100644 --- a/src/sections/Projects/Sistent/components/appbar/code.js +++ b/src/sections/Projects/Sistent/components/appbar/code.js @@ -3,7 +3,7 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider } from "@layer5/sistent"; -import { CodeBlock } from "../../../../../reusecore/CodeBlock/codeBlock.js"; +import {CodeBlock} from '../button/code-block.js'; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; From 0960ec0444691a9e5801f0662338ecb77470f09e Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Wed, 30 Oct 2024 19:28:42 +0530 Subject: [PATCH 5/6] Removed extra made code-block.js Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/appbar/code.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/sections/Projects/Sistent/components/appbar/code.js b/src/sections/Projects/Sistent/components/appbar/code.js index 3c5eebe7f8e1..7532c996b6d8 100644 --- a/src/sections/Projects/Sistent/components/appbar/code.js +++ b/src/sections/Projects/Sistent/components/appbar/code.js @@ -3,9 +3,8 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider } from "@layer5/sistent"; -import {CodeBlock} from '../button/code-block.js'; +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"; @@ -14,7 +13,6 @@ import ResponsiveAppBar from "./AppBars/BasicAppBarResponsive"; import SearchAppBar from "./AppBars/AppBarSearch"; import BottomAppBar from "./AppBars/BottomAppbar"; - export const AppBarCode = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); From 3115ff2affd249753614c8fd71e67c6af497cef0 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sat, 9 Nov 2024 17:00:17 +0530 Subject: [PATCH 6/6] Did the Requested changes Signed-off-by: NishantSinghhhhh --- .../components/appbar/AppBars/AppBarSearch.js | 1 - .../appbar/AppBars/BasicAppBarResponsive.js | 4 +- .../components/appbar/AppBars/BottomAppbar.js | 11 +- .../Sistent/components/appbar/AppBars/data.js | 328 +++++------------- 4 files changed, 83 insertions(+), 261 deletions(-) diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js index e81e800c7ce2..a5abdeaceda9 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/AppBarSearch.js @@ -54,7 +54,6 @@ export default function SearchAppBar() { style={{ position: "relative", borderRadius: "4px", - backgroundColor: "rgba(255, 255, 255, 0.15)", marginLeft: isLargeScreen ? "8px" : 0, width: isLargeScreen ? "auto" : "100%", display: "flex", diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js index 5248546be0da..0bc560b146b4 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/BasicAppBarResponsive.js @@ -15,6 +15,7 @@ import { } 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"]; @@ -55,7 +56,7 @@ export default function ResponsiveAppBar() { - LOGO + {/* Mobile Menu */} @@ -84,7 +85,6 @@ export default function ResponsiveAppBar() { ))} - {/* User Settings */} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js b/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js index 2fbe6b74c6b7..518a7e67ccfd 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/BottomAppbar.js @@ -15,20 +15,18 @@ export default function BottomAppBar() { - {/* Additional Content */} Welcome to the App @@ -39,7 +37,6 @@ export default function BottomAppBar() { - {/* Bottom AppBar */} - {/* */} @@ -63,7 +59,6 @@ export default function BottomAppBar() { - {/* */} diff --git a/src/sections/Projects/Sistent/components/appbar/AppBars/data.js b/src/sections/Projects/Sistent/components/appbar/AppBars/data.js index f00a762f6508..d3f35198d4fb 100644 --- a/src/sections/Projects/Sistent/components/appbar/AppBars/data.js +++ b/src/sections/Projects/Sistent/components/appbar/AppBars/data.js @@ -1,20 +1,6 @@ export const codes = [ - `import * as React from "react"; -import { - SistentThemeProvider, - Button, - AppBar, - Toolbar, - Typography, - IconButton, -} from "@layer5/sistent"; -import MenuIcon from "@layer5/sistent"; -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; - -export default function BasicAppBar() { - const { isDark } = useStyledDarkMode(); +`export default function BasicAppBar() { return ( - - {/* Use MUI MenuIcon here */} + News @@ -31,146 +17,96 @@ export default function BasicAppBar() { - ); } `, -`import * as React from "react"; -import { - SistentThemeProvider, - AppBar, - Toolbar, - Typography, - IconButton, - Button, - Menu, - MenuItem, - Box, - Container, - Tooltip, - Avatar, -} from "@layer5/sistent"; -import MenuIcon from "@layer5/sistent"; // Import MenuIcon from MUI -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; -const pages = ["Products", "Pricing", "Blog"]; -const settings = ["Profile", "Account", "Dashboard", "Logout"]; +`const pages = ["Products", "Pricing", "Blog"]; +const settings = ["Profile", "Logout"]; export default function MenuAppBar() { - 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); - }; + const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget); + const handleCloseNavMenu = () => setAnchorElNav(null); + const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget); + const handleCloseUserMenu = () => setAnchorElUser(null); return ( - - - - - - - - - LOGO - + + + + + + + + + Add your Image in here + - {/* Mobile Menu */} + + {pages.map((page) => ( + + {page} + + ))} + + + + {pages.map((page) => ( + + ))} + + + + + + + + - {pages.map((page) => ( - - {page} + {settings.map((setting) => ( + + {setting} ))} - - {/* Desktop Menu */} - - {pages.map((page) => ( - - ))} - - - {/* User Settings */} - - - - - - - - {settings.map((setting) => ( - - {setting} - - ))} - - - - - - + + + + ); } - `, -`import * as React from "react"; -import { - SistentThemeProvider, - AppBar, - Toolbar, - Typography, - IconButton, - Button, -} from "@layer5/sistent"; -import {MenuIcon} from "@layer5/sistent"; -import {SearchIcon} from "@layer5/sistent"; -import {InputBase} from "@layer5/sistent"; -import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; +`, +`export default function SearchAppBar() { + const [isLargeScreen, setIsLargeScreen] = React.useState(false); + + React.useEffect(() => { + if (typeof window !== "undefined") { + setIsLargeScreen(window.innerWidth >= 600); -export default function SearchAppBar() { - const { isDark } = useStyledDarkMode(); + const handleResize = () => setIsLargeScreen(window.innerWidth >= 600); + window.addEventListener("resize", handleResize); + + return () => window.removeEventListener("resize", handleResize); + } + }, []); return ( - = 600 && { - marginLeft: "8px", - width: "auto", - }), }} > -
+ >
- = 600 && { + ...(isLargeScreen && { width: "12ch", "&:focus": { width: "20ch", @@ -236,59 +164,40 @@ export default function SearchAppBar() { /> - - ); } - `, -`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(); +`export default function BottomAppBar() { return ( - - {/* Additional Content */} 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. + Add your content in here. - {/* Bottom AppBar */} - {/* */} @@ -312,93 +220,13 @@ export default function BottomAppBar() { - {/* */} - - ); -} - -`, -`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 ( - - - {/* Additional Content */} - - - 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. - - - - - {/* Bottom AppBar */} - - - - {/* */} - - - - - - - - - - - - - {/* */} - - - - - - - ); } ` - ]; \ No newline at end of file