Skip to content

Commit

Permalink
Updated: Sidebar component updated.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arifulislam5577
Arifulislam5577 committed Feb 27, 2024
1 parent ac4bd0c commit 7efdcc8
Show file tree
Hide file tree
Showing 33 changed files with 641 additions and 1,416 deletions.
43 changes: 12 additions & 31 deletions app/docs/components/sidebar/Sidebar.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,32 @@
import { DefaultSidebar, DefaultSidebarCode } from './variant/DefaultSidebar'
import { SidebarWithContentSeparator, SidebarWithContentSeparatorCode } from './variant/SidebarWithContentSeparator'
import { SidebarWithBranding, SidebarWithBrandingCode } from './variant/SidebarWithBranding'
import { SidebarWithCTA, SidebarWithCTACode } from './variant/SidebarWithCTA'
import { SidebarWithDropdown, SidebarWithDropdownCode } from './variant/SidebarWithDropdown'

import { SidebarWithIcon, SidebarWithIconCode } from './variant/SidebarWithIcon'
import { SidebarWithCart, SidebarWithCartCode } from './variant/SidebarWithCart'
import CodePreview from '../../../components/CodePreview'

## Table of Contents

A Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information. The sidebar is often used to help users navigate between different sections of the application, access important features, or view contextual details.
The Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information.

## Default Sidebar

The Default Sidebar component offers a versatile multi-level navigation menu enriched with icons and labels, catering to a seamless navigation experience. It requires icons sourced from an icon library package and easy setup within the `<Sidebar.Items>` component with appropriate props.
A default sidebar with sidebar items and item icons.

<CodePreview github="Sidebar" code={DefaultSidebarCode}>
<DefaultSidebar />
</CodePreview>

## Sidebar With Dropdown

Craft dropdown menus within the sidebar using the `<Sidebar.Collapse>` component. This empowers you to provide sub-level navigation options for an organized user experience.

<CodePreview github="Sidebar" code={SidebarWithDropdownCode}>
<SidebarWithDropdown />
</CodePreview>

## Sidebar With Logo Branding

Infuse your brand identity by incorporating a brand logo into the sidebar using the `<Sidebar.Logo>` component. Customize the code snippet with your brand logo's URL.

<CodePreview github="Sidebar" code={SidebarWithBrandingCode}>
<SidebarWithBranding />
</CodePreview>

## Sidebar With Content Separator
## Sidebar With Icon

Enhance content separation in the sidebar by employing separators. Divide your sidebar items into distinct groups using `<Sidebar.Group>` components.
Display sidebar items with icons only.

<CodePreview github="Sidebar" code={SidebarWithContentSeparatorCode}>
<SidebarWithContentSeparator />
<CodePreview github="Sidebar" code={SidebarWithIconCode}>
<SidebarWithIcon />
</CodePreview>

## Sidebar With Call to Action
## Sidebar With Cart

Integrate compelling calls to action within the sidebar to engage users effectively. Utilize the `<Sidebar.CTA>` component for seamless incorporation.
Utilize the sidebar as a product cart in an e-commerce website.

<CodePreview github="Sidebar" code={SidebarWithCTACode}>
<SidebarWithCTA />
<CodePreview github="Sidebar" code={SidebarWithCartCode}>
<SidebarWithCart />
</CodePreview>
4 changes: 2 additions & 2 deletions app/docs/components/sidebar/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { Metadata, NextPage } from 'next'
import { DocsContentLayout } from '../../../components/DocsContentLayout'
import SidebarDocs from '.'
import { DocsContentLayout } from '../../../components/DocsContentLayout'

export const metadata: Metadata = {
description:
'Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information. The sidebar is often used to help users navigate between different sections of the application, access important features, or view contextual details.',
'Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information.',
title: 'Sidebar - Keep React',
}

Expand Down
216 changes: 149 additions & 67 deletions app/docs/components/sidebar/variant/DefaultSidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,170 @@
'use client'
import { Sidebar } from '../../../../src'
import { Chat, LockSimple, ShoppingBagOpen, ShoppingCart, SignIn, SquaresFour, UserPlus, Users } from 'phosphor-react'
import {
ArchiveTray,
Chat,
Gear,
List,
MagnifyingGlass,
ShoppingCart,
SignIn,
SquaresFour,
Users,
} from 'phosphor-react'
import { Avatar, Button, Divider, Icon, Input, Sidebar, Typography } from '../../../../src'

const DefaultSidebar = () => {
return (
<Sidebar aria-label="Sidebar with multi-level dropdown example" className="max-w-xs">
<Sidebar.ItemGroup>
<Sidebar.Item href="#" icon={<SquaresFour size={24} />}>
Dashboard
</Sidebar.Item>
<Sidebar.Item icon={<ShoppingCart size={24} />}>E-commerce</Sidebar.Item>
<Sidebar.Item href="#" icon={<LockSimple size={24} />} label="pro" labelColor="gray">
Components
</Sidebar.Item>
<Sidebar.Item href="#" icon={<Chat size={24} />} label="3">
Inbox
</Sidebar.Item>
<Sidebar.Item href="#" icon={<Users size={24} />}>
Users
</Sidebar.Item>
<Sidebar.Item href="#" icon={<ShoppingBagOpen size={24} />}>
Products
</Sidebar.Item>
<Sidebar.Item href="#" icon={<SignIn size={24} />}>
Sign In
</Sidebar.Item>
<Sidebar.Item href="#" icon={<UserPlus size={24} />}>
Sign Up
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar>
<div className="p-2">
<Sidebar className="max-w-max">
<Sidebar.Header className="space-y-2.5">
<div className="flex items-center justify-between">
<Typography variant="heading-5" className="font-bold text-primary-500">
Keep
</Typography>
<Button variant="outline" shape="icon" color="primary" className="border-none">
<List size={24} />
</Button>
</div>
<div>
<fieldset className="relative max-w-md">
<Input placeholder="Search here" className="ps-11" />
<Icon>
<MagnifyingGlass size={18} color="#AFBACA" />
</Icon>
</fieldset>
</div>
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Item>
<SquaresFour size={24} />
Profile
</Sidebar.Item>
<Sidebar.Item>
<ShoppingCart size={24} />
Products
</Sidebar.Item>
<Sidebar.Item>
<ArchiveTray size={24} />
Download
</Sidebar.Item>
<Sidebar.Item>
<Chat size={24} />
Message
</Sidebar.Item>
<Sidebar.Item>
<Gear size={24} />
Settings
</Sidebar.Item>
<Sidebar.Item>
<Users size={24} />
Users
</Sidebar.Item>
<Sidebar.Item>
<SignIn size={24} />
Log Out
</Sidebar.Item>
</Sidebar.Body>
<Divider className="my-3" />
<Sidebar.Footer className="flex items-center gap-2">
<div>
<Avatar shape="circle" img="/images/avatar/avatar-3.png" />
</div>
<div>
<Typography variant="p" className="mb-0 text-body-3 font-medium text-metal-600">
Md Ariful Islam
</Typography>
<Typography variant="p" className="text-body-4 font-normal text-metal-400">
Web Developer
</Typography>
</div>
</Sidebar.Footer>
</Sidebar>
</div>
)
}

const DefaultSidebarCode = `
"use client";
import { Sidebar } from "keep-react";
'use client'
import {
ArchiveTray,
Chat,
LockSimple,
ShoppingBagOpen,
Gear,
List,
MagnifyingGlass,
ShoppingCart,
SignIn,
SquaresFour,
UserPlus,
Users,
} from "phosphor-react";
} from 'phosphor-react'
import { Avatar, Button, Divider, Icon, Input, Sidebar, Typography } from 'keep-react'
export const SidebarComponent = () => {
return (
<Sidebar aria-label="Sidebar with multi-level dropdown example">
<Sidebar.ItemGroup>
<Sidebar.Item href="#" icon={<SquaresFour size={24} />}>
Dashboard
</Sidebar.Item>
<Sidebar.Item icon={<ShoppingCart size={24} />}>
E-commerce
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={<LockSimple size={24} />}
label="pro"
labelColor="gray"
>
Components
</Sidebar.Item>
<Sidebar.Item href="#" icon={<Chat size={24} />} label="3">
Inbox
</Sidebar.Item>
<Sidebar.Item href="#" icon={<Users size={24} />}>
Users
</Sidebar.Item>
<Sidebar.Item href="#" icon={<ShoppingBagOpen size={24} />}>
Products
</Sidebar.Item>
<Sidebar.Item href="#" icon={<SignIn size={24} />}>
Sign In
</Sidebar.Item>
<Sidebar.Item href="#" icon={<UserPlus size={24} />}>
Sign Up
</Sidebar.Item>
</Sidebar.ItemGroup>
<Sidebar>
<Sidebar.Header className="space-y-2.5">
<div className="flex items-center justify-between">
<Typography variant="heading-5" className="font-bold text-primary-500">
Keep
</Typography>
<Button variant="outline" shape="icon" color="primary" className="border-none">
<List size={24} />
</Button>
</div>
<div>
<fieldset className="relative max-w-md">
<Input placeholder="Search here" className="ps-11" />
<Icon>
<MagnifyingGlass size={18} color="#AFBACA" />
</Icon>
</fieldset>
</div>
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Item>
<SquaresFour size={24} />
Profile
</Sidebar.Item>
<Sidebar.Item>
<ShoppingCart size={24} />
Products
</Sidebar.Item>
<Sidebar.Item>
<ArchiveTray size={24} />
Download
</Sidebar.Item>
<Sidebar.Item>
<Chat size={24} />
Message
</Sidebar.Item>
<Sidebar.Item>
<Gear size={24} />
Settings
</Sidebar.Item>
<Sidebar.Item>
<Users size={24} />
Users
</Sidebar.Item>
<Sidebar.Item>
<SignIn size={24} />
Log Out
</Sidebar.Item>
</Sidebar.Body>
<Divider className="my-3" />
<Sidebar.Footer className="flex items-center gap-2">
<div>
<Avatar shape="circle" img="/images/avatar/avatar-3.png" />
</div>
<div>
<Typography variant="p" className="mb-0 text-body-3 font-medium text-metal-600">
Md Ariful Islam
</Typography>
<Typography variant="p" className="text-body-4 font-normal text-metal-400">
Web Developer
</Typography>
</div>
</Sidebar.Footer>
</Sidebar>
);
)
}
`

Expand Down
Loading

0 comments on commit 7efdcc8

Please sign in to comment.