App Shells are the foundational structure of a web or mobile application. They provide the basic layout and structure for the application's content and user interface components.
import React, { useState } from "react";
import { Avatar, Button, Drawer, Dropdown, Grid, Layout, Menu, Space, theme, Typography } from "antd";
import { AppstoreAddOutlined, ClockCircleOutlined, FolderOpenOutlined, HomeOutlined, LogoutOutlined, MenuOutlined, MoreOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { Sider, Content } = Layout;
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
token.colorFillAlter = "transparent";
const shouldDisplayOnMobile = screens.lg || screens.xs;
const styles = {
container: {
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
},
content: {
padding: screens.sm ? `${token.padding}px ${token.padding}px ${token.padding}px 0` : "0",
},
divider: {
margin: 0,
},
header: {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: screens.lg ? `${token.paddingLG}px 0px` : `${token.padding}px 0px`,
},
headerTitleWrapper: {
alignContent: "end",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
},
hideTabletDisplayMobile: {
display: shouldDisplayOnMobile ? "block" : "none",
},
layout: {
height: "720px",
},
logoWrapper: {
padding: `${token.paddingLG}px 28px ${token.padding}px 28px`,
},
main: {
backgroundColor: token.colorBgContainer,
height: "100%",
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowTertiary
},
navbarContainer: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
padding: `${token.paddingXS}px ${token.padding}px`,
},
navbarMobile: {
display: screens.sm ? "none" : "block",
},
navMenu: {
backgroundColor: "transparent",
border: 0,
flexGrow: 1,
},
paragraph: {
color: token.colorTextSecondary,
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
height: "100%",
padding: token.paddingLG,
textAlign: "center",
},
profileAvatar: {
marginLeft: shouldDisplayOnMobile ? "0" : "4px",
right: shouldDisplayOnMobile ? "0px" : "8px",
},
profileMenu: {
backgroundColor: "transparent",
border: 0,
},
section: {
height: "100%",
padding: `${token.sizeLG}px 0px`,
},
sider: {
backgroundColor: "transparent",
display: "flex",
display: screens.sm ? "block" : "none",
flexDirection: "column",
},
siderContent: {
display: "flex",
flexDirection: "column",
height: "100%",
},
title: {
fontSize: screens.lg ? token.fontSizeHeading3 : token.fontSizeHeading4,
margin: 0,
},
};
const items = [
{
key: "home",
icon: <HomeOutlined />,
label: "Home",
},
{
key: "my-library",
icon: <FolderOpenOutlined />,
label: "My Library",
children: [
{
key: "projects",
label: "Projects",
},
{
key: "drafts",
label: "Drafts",
},
{
key: "templates",
label: "Templates",
},
],
},
{
key: "history",
icon: <ClockCircleOutlined />,
label: "History",
},
{
key: "apps",
icon: <AppstoreAddOutlined />,
label: "Apps",
children: [
{
key: "browse",
label: "Browse",
},
{
key: "your-apps",
label: "Your Apps",
},
],
},
{
key: "settings",
icon: <SettingOutlined />,
label: "Settings",
},
];
const profileMenuItems = [
{
key: "profile",
label: (
<Space>
<Avatar
style={styles.profileAvatar}
size="small"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80"
/>
<Text strong style={styles.hideTabletDisplayMobile}>
Natalie Wilson
</Text>
</Space>
),
children: [
{
label: "Profile",
icon: <UserOutlined />,
key: "0",
},
{
label: "Settings",
icon: <SettingOutlined />,
key: "1",
},
{
label: "Billing",
icon: <WalletOutlined />,
key: "2",
},
{
type: "divider",
},
{
label: "Logout",
icon: <LogoutOutlined />,
key: "3",
},
],
},
];
const actions = [
{
label: "New project",
key: "1",
type: "primary",
},
{
label: "New template",
key: "2",
type: "default",
},
];
const menus = (
<>
<Menu
theme="light"
mode="inline"
style={styles.navMenu}
defaultSelectedKeys={["drafts"]}
defaultOpenKeys={["my-library"]}
items={items}
/>
<Menu
mode={screens.sm ? "vertical" : "inline"}
items={profileMenuItems}
style={styles.profileMenu}
/>
</>
);
return (
<Layout style={styles.layout}>
<Sider
style={styles.sider}
width={256}
theme="light"
trigger={null}
breakpoint="lg"
>
<div style={styles.siderContent}>
<div style={styles.logoWrapper}><Logo showText={shouldDisplayOnMobile}/></div>
{menus}
</div>
</Sider>
<Layout>
<div style={styles.navbarMobile}>
<div style={styles.navbarContainer}>
<Logo showText={shouldDisplayOnMobile} />
<Button type="text" icon={<MenuOutlined />} onClick={showDrawer} />
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{menus}
</Drawer>
</div>
</div>
<Content style={styles.content}>
<div style={styles.main}>
<div style={styles.header}>
<div style={styles.container}>
<Space
size="middle"
direction="horizontal"
style={styles.headerTitleWrapper}
>
<Space direction="vertical">
<Title style={styles.title}>Drafts</Title>
</Space>
{screens.lg ? (
<Space>
{actions
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown
menu={{ items: actions }}
placement="bottomRight"
arrow
>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</div>
</Content>
</Layout>
</Layout>
);
}
import React, { useState } from "react";
import { Avatar, Breadcrumb, Button, Divider, Drawer, Dropdown, Grid, Layout, Menu, Space, theme, Typography } from "antd";
import { AppstoreAddOutlined, ClockCircleOutlined, FolderOpenOutlined, HomeOutlined, LogoutOutlined, MenuOutlined, MoreOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo";
const { Sider, Content } = Layout;
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
const shouldDisplayOnMobile = screens.lg || screens.xs;
const styles = {
container: {
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.paddingLG}px 0px`
},
headerTitleWrapper: {
alignContent: "end",
alignItems: "flex-end",
justifyContent: "space-between",
width: "100%"
},
hideTabletDisplayMobile: {
display: shouldDisplayOnMobile ? "block" : "none"
},
layout: {
height: "720px"
},
logoWrapper: {
padding: `${token.paddingLG}px 28px ${token.padding}px 28px`
},
navbarContainer: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
padding: `${token.paddingXS}px ${token.padding}px`
},
navbarMobile: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
display: screens.sm ? "none" : "block"
},
navMenu: {
backgroundColor: "transparent",
border: 0,
flexGrow: 1
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
height: "100%",
padding: token.paddingLG,
textAlign: "center"
},
profileAvatar: {
marginLeft: shouldDisplayOnMobile ? "0" : "4px",
right: shouldDisplayOnMobile ? "0px" : "8px"
},
profileMenu: {
border: 0
},
section: {
backgroundColor: token.colorBgContainer,
height: "100%",
padding: `${token.sizeLG}px 0px`
},
sider: {
borderRight: `${token.lineWidth}px solid ${token.colorSplit}`,
display: "flex",
display: screens.sm ? "block" : "none",
flexDirection: "column"
},
siderContent: {
display: "flex",
flexDirection: "column",
height: "100%"
},
title: {
fontSize: screens.lg ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: 0
}
};
const items = [
{
key: "home",
icon: <HomeOutlined />,
label: "Home",
},
{
key: "my-library",
icon: <FolderOpenOutlined />,
label: "My Library",
children: [
{
key: "projects",
label: "Projects",
},
{
key: "drafts",
label: "Drafts",
},
{
key: "templates",
label: "Templates",
},
],
},
{
key: "history",
icon: <ClockCircleOutlined />,
label: "History",
},
{
key: "apps",
icon: <AppstoreAddOutlined />,
label: "Apps",
children: [
{
key: "browse",
label: "Browse",
},
{
key: "your-apps",
label: "Your Apps",
},
],
},
{
key: "settings",
icon: <SettingOutlined />,
label: "Settings",
},
];
const profileMenuItems = [
{
key: "profile",
label: (
<Space>
<Avatar
style={styles.profileAvatar}
size="small"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80"
/>
<Text strong style={styles.hideTabletDisplayMobile}>
Natalie Wilson
</Text>
</Space>
),
children: [
{
label: "Profile",
icon: <UserOutlined />,
key: "0",
},
{
label: "Settings",
icon: <SettingOutlined />,
key: "1",
},
{
label: "Billing",
icon: <WalletOutlined />,
key: "2",
},
{
type: "divider",
},
{
label: "Logout",
icon: <LogoutOutlined />,
key: "3",
},
],
},
];
const actions = [
{
label: "New project",
key: "1",
type: "primary",
},
{
label: "New template",
key: "2",
type: "default",
},
];
const menus = (
<>
<Menu
theme="light"
mode="inline"
style={styles.navMenu}
defaultSelectedKeys={["drafts"]}
defaultOpenKeys={["my-library"]}
items={items}
/>
<Divider style={styles.divider} />
<Menu
mode={screens.sm ? "vertical" : "inline"}
items={profileMenuItems}
style={styles.profileMenu}
/>
</>
);
return (
<Layout style={styles.layout}>
<Sider
style={styles.sider}
width={256}
theme="light"
trigger={null}
breakpoint="lg"
>
<div style={styles.siderContent}>
<div style={styles.logoWrapper}><Logo showText={shouldDisplayOnMobile} /></div>
{menus}
</div>
</Sider>
<Layout>
<div style={styles.navbarMobile}>
<div style={styles.navbarContainer}>
<Logo showText={shouldDisplayOnMobile} />
<Button type="text" icon={<MenuOutlined />} onClick={showDrawer} />
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{menus}
</Drawer>
</div>
</div>
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "My Library",
},
{
title: "Drafts",
},
]}
/>
<Space
size="middle"
direction="horizontal"
style={styles.headerTitleWrapper}
>
<Space direction="vertical">
<Title style={styles.title}>Drafts</Title>
</Space>
{screens.lg ? (
<Space>
{actions
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown
menu={{ items: actions }}
placement="bottomRight"
arrow
>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<Content>
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</Content>
</Layout>
</Layout>
);
}
import React, { useState } from "react";
import { Avatar, Breadcrumb, Button, ConfigProvider, Divider, Drawer, Dropdown, Grid, Layout, Menu, Space, theme, Typography } from "antd";
import { AppstoreAddOutlined, ClockCircleOutlined, FolderOpenOutlined, HomeOutlined, LogoutOutlined, MenuOutlined, MoreOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { Sider, Content } = Layout;
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
const shouldDisplayOnMobile = screens.lg || screens.xs;
const styles = {
avatarText: {
color: screens.sm ? token.colorTextLightSolid : token.colorText,
display: shouldDisplayOnMobile ? "block" : "none"
},
container: {
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.paddingLG}px 0px`
},
headerTitleWrapper: {
alignContent: "end",
alignItems: "flex-end",
justifyContent: "space-between",
width: "100%"
},
hideTabletDisplayMobile: {
display: shouldDisplayOnMobile ? "block" : "none"
},
layout: {
height: "720px"
},
logoWrapper: {
padding: `${token.paddingLG}px 28px ${token.padding}px 28px`
},
navbarContainer: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
padding: `${token.paddingXS}px ${token.padding}px`
},
navbarMobile: {
backgroundColor: "#141414",
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
display: screens.sm ? "none" : "block"
},
navMenu: {
backgroundColor: "transparent",
border: 0,
flexGrow: 1
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
height: "100%",
padding: token.paddingLG,
textAlign: "center"
},
profileAvatar: {
marginLeft: shouldDisplayOnMobile ? "0px" : "4px",
right: shouldDisplayOnMobile ? "0px" : "8px"
},
profileMenu: {
border: 0
},
section: {
backgroundColor: token.colorBgContainer,
height: "100%",
padding: `${token.sizeLG}px 0px`
},
sider: {
backgroundColor: "#141414",
borderRight: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
display: "flex",
display: screens.sm ? "block" : "none",
flexDirection: "column"
},
siderContent: {
display: "flex",
flexDirection: "column",
height: "100%"
},
title: {
fontSize: screens.lg ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: 0
}
};
const items = [
{
key: "home",
icon: <HomeOutlined />,
label: "Home",
},
{
key: "my-library",
icon: <FolderOpenOutlined />,
label: "My Library",
children: [
{
key: "projects",
label: "Projects",
},
{
key: "drafts",
label: "Drafts",
},
{
key: "templates",
label: "Templates",
},
],
},
{
key: "history",
icon: <ClockCircleOutlined />,
label: "History",
},
{
key: "apps",
icon: <AppstoreAddOutlined />,
label: "Apps",
children: [
{
key: "browse",
label: "Browse",
},
{
key: "your-apps",
label: "Your Apps",
},
],
},
{
key: "settings",
icon: <SettingOutlined />,
label: "Settings",
},
];
const profileMenuItems = [
{
key: "profile",
label: (
<Space>
<Avatar
style={styles.profileAvatar}
size="small"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80"
/>
<Text strong style={styles.avatarText}>
Natalie Wilson
</Text>
</Space>
),
children: [
{
label: "Profile",
icon: <UserOutlined />,
key: "0",
},
{
label: "Settings",
icon: <SettingOutlined />,
key: "1",
},
{
label: "Billing",
icon: <WalletOutlined />,
key: "2",
},
{
type: "divider",
},
{
label: "Logout",
icon: <LogoutOutlined />,
key: "3",
},
],
},
];
const actions = [
{
label: "New project",
key: "1",
type: "primary",
},
{
label: "New template",
key: "2",
type: "default",
},
];
const menus = (
<>
<Menu
theme={screens.sm ? "dark" : "light"}
mode="inline"
style={styles.navMenu}
defaultSelectedKeys={["drafts"]}
defaultOpenKeys={["my-library"]}
items={items}
/>
<Divider style={styles.divider} />
<Menu
theme={screens.sm ? "dark" : "light"}
mode={screens.sm ? "vertical" : "inline"}
items={profileMenuItems}
style={styles.profileMenu}
/>
</>
);
return (
<ConfigProvider
theme={{
components: {
Menu: {
darkSubMenuItemBg: "rgba(255, 255, 255, 0.02)",
darkItemBg: "transparent",
},
},
}}
>
<Layout style={styles.layout}>
<Sider
style={styles.sider}
width={256}
theme="dark"
trigger={null}
breakpoint="lg"
>
<div style={styles.siderContent}>
<div style={styles.logoWrapper}><Logo showText={shouldDisplayOnMobile} whiteText={true} /></div>
{menus}
</div>
</Sider>
<Layout>
<div style={styles.navbarMobile}>
<div style={styles.navbarContainer}>
<Logo showText={shouldDisplayOnMobile} whiteText={true} />
<Button
type="text"
icon={
<MenuOutlined style={{ color: token.colorTextLightSolid }} />
}
onClick={showDrawer}
/>
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{menus}
</Drawer>
</div>
</div>
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "My Library",
},
{
title: "Drafts",
},
]}
/>
<Space
size="middle"
direction="horizontal"
style={styles.headerTitleWrapper}
>
<Space direction="vertical">
<Title style={styles.title}>Drafts</Title>
</Space>
{screens.lg ? (
<Space>
{actions
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown
menu={{ items: actions }}
placement="bottomRight"
arrow
>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<Content>
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</Content>
</Layout>
</Layout>
</ConfigProvider>
);
}
import React, { useState } from "react";
import { Avatar, Button, Drawer, Dropdown, Grid, Input, Layout, Menu, theme, Typography } from "antd";
import { AppstoreAddOutlined, ClockCircleOutlined, FolderOpenOutlined, HomeOutlined, LogoutOutlined, MenuOutlined, SearchOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo";
const { Sider, Content } = Layout;
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
const onSearch = (value) => console.log(value);
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
const shouldDisplayOnMobile = screens.lg || screens.xs;
const styles = {
container: {
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.lg ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.paddingLG}px 0px`
},
headerTitleWrapper: {
alignContent: "end",
alignItems: "flex-end",
justifyContent: "space-between",
width: "100%"
},
hideTabletDisplayMobile: {
display: shouldDisplayOnMobile ? "block" : "none"
},
layout: {
height: "720px"
},
logo: {
flexShrink: 0
},
logoMobile: {
display: "flex",
left: "50%",
position: "absolute",
transform: "translate(-50%, 0%)"
},
logoWrapper: {
padding: `${token.padding}px 28px ${token.padding}px 28px`
},
navbarContainer: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
padding: `${token.paddingXS}px ${token.padding}px`
},
navbarMobile: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
display: screens.sm ? "none" : "block"
},
navMenu: {
backgroundColor: "transparent",
border: 0,
flexGrow: 1
},
panel: {
backgroundColor: token.colorBgContainer,
borderRadius: token.borderRadiusLG,
padding: screens.lg ? token.paddingLG : token.padding
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
height: "100%",
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgLayout,
padding: screens.lg ? `${token.paddingLG}px 0px` : `${token.padding}px 0px`
},
sider: {
borderRight: `${token.lineWidth}px solid ${token.colorSplit}`,
display: "flex",
display: screens.sm ? "block" : "none",
flexDirection: "column"
},
siderContent: {
display: "flex",
flexDirection: "column",
height: "100%"
},
title: {
fontSize: screens.lg ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: 0
},
topBar: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: screens.sm ? `${token.padding}px 0px` : `${token.paddingXS}px 0px`,
position: "relative"
},
topBarContainer: {
display: "flex",
gap: token.marginXS,
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
}
};
const items = [
{
key: "home",
icon: <HomeOutlined />,
label: "Home",
},
{
key: "my-library",
icon: <FolderOpenOutlined />,
label: "My Library",
children: [
{
key: "projects",
label: "Projects",
},
{
key: "drafts",
label: "Drafts",
},
{
key: "templates",
label: "Templates",
},
],
},
{
key: "history",
icon: <ClockCircleOutlined />,
label: "History",
},
{
key: "apps",
icon: <AppstoreAddOutlined />,
label: "Apps",
children: [
{
key: "browse",
label: "Browse",
},
{
key: "your-apps",
label: "Your Apps",
},
],
},
{
key: "settings",
icon: <SettingOutlined />,
label: "Settings",
},
];
const profileMenuItems = [
{
label: "Profile",
icon: <UserOutlined />,
key: "0",
},
{
label: "Settings",
icon: <SettingOutlined />,
key: "1",
},
{
label: "Billing",
icon: <WalletOutlined />,
key: "2",
},
{
type: "divider",
},
{
label: "Logout",
icon: <LogoutOutlined />,
key: "3",
},
];
const menus = (
<Menu
theme="light"
mode="inline"
style={styles.navMenu}
defaultSelectedKeys={["drafts"]}
defaultOpenKeys={["my-library"]}
items={items}
/>
);
const profileMenuDropdown = (
<Dropdown menu={{ items: profileMenuItems }} placement="bottomRight">
<Avatar src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80" />
</Dropdown>
);
return (
<Layout style={styles.layout}>
<Sider
style={styles.sider}
width={256}
theme="light"
trigger={null}
breakpoint="lg"
>
<div style={styles.siderContent}>
<div style={styles.logoWrapper}><Logo showText={shouldDisplayOnMobile} /></div>
{menus}
</div>
</Sider>
<Layout>
<div style={styles.navbarMobile}>
<div style={styles.navbarContainer}>
<div style={styles.logoMobile}><Logo showText={shouldDisplayOnMobile} /></div>
<Button type="text" icon={<MenuOutlined />} onClick={showDrawer} />
{screens.sm ? "" : profileMenuDropdown}
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{menus}
</Drawer>
</div>
</div>
<Content>
<div style={styles.topBar}>
<div style={styles.topBarContainer}>
<Input
placeholder="Search..."
onSearch={onSearch}
prefix={<SearchOutlined />}
bordered={screens.sm ? true : false}
style={{
width: screens.sm ? 240 : "100%",
}}
/>
{screens.sm ? profileMenuDropdown : ""}
</div>
</div>
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.panel}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</div>
</Content>
</Layout>
</Layout>
);
}
import React, { useState } from "react";
import { Breadcrumb, Button, Divider, Drawer, Grid, Menu, Space, theme, Typography } from "antd";
import { AppstoreOutlined, MenuOutlined, SettingOutlined, ShoppingOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const menuItems = [
getItem("Dashboard", "dashboard", <AppstoreOutlined />, [
getItem("Overview", "overview"),
getItem("Statistics", "statistics"),
getItem("Reports", "reports"),
getItem("Analytics", "analytics"),
]),
getItem("Products", "products", <ShoppingOutlined />, [
getItem("All Products", "all-products"),
getItem("Add Product", "add-product"),
getItem("Categories", "categories", null, [
getItem("Electronics", "electronics"),
getItem("Clothing", "clothing"),
]),
]),
getItem("Settings", "settings", <SettingOutlined />, [
getItem("General", "general"),
getItem("Security", "security"),
getItem("Notifications", "notifications"),
getItem("Privacy", "privacy"),
]),
];
const styles = {
container: {
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
containerNavbar: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
logo: {
display: "block",
height: token.sizeLG,
left: "50%",
position: screens.md ? "static" : "absolute",
top: "50%",
transform: screens.md ? " " : "translate(-50%, -50%)"
},
menu: {
backgroundColor: "transparent",
border: "none",
lineHeight: "4rem"
},
menuContainer: {
alignItems: "center",
display: "flex",
gap: token.size,
height: screens.md ? "4rem" : "3.5rem",
width: "100%"
},
navbar: {
backgroundColor: token.colorBgContainer,
position: "relative"
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
textWrapper: {
maxWidth: screens.md ? "70%" : "100%"
},
title: {
fontSize: token.fontSizeHeading2,
marginBottom: token.marginXS
},
wrapper: {
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
}
};
const navbarMenu = (
<Menu
style={styles.menu}
mode={screens.md ? "horizontal" : "inline"}
items={menuItems}
/>
);
const menuDrawer = (
<>
<Button type="text" icon={<MenuOutlined />} onClick={showDrawer} />
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{navbarMenu}
</Drawer>
</>
);
return (
<>
<nav style={styles.navbar}>
<div style={styles.containerNavbar}>
<div style={styles.menuContainer}>
<a style={styles.logo} href="#">
<Logo showText={true} />
</a>
{screens.md ? navbarMenu : menuDrawer}
</div>
<Space>
{screens.md ? <Button type="text">Log in</Button> : ""}
<Button type="primary">Sign up</Button>
</Space>
</div>
</nav>
<Divider style={styles.divider} />
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "Category",
},
{
title: "Current page",
},
]}
/>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.wrapper}
>
<Space style={styles.textWrapper} direction="vertical">
<Title style={styles.title}>Page title</Title>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
hendrerit ex vitae sodales.
</Text>
</Space>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
