feat: add dropdown to pages, rename visible to open

src/component/app.tsx

@@ -10,6 +10,7 @@ import { createMenu } from '../electron/menu';
 import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
 import { Page } from '../store/page';
+import { PageList } from './container/page_list';
 import { PatternListContainer } from './container/pattern_list';
 import PatternsPane from '../lsg/patterns/panes/patterns-pane';
 import PreviewPane from '../lsg/patterns/panes/preview-pane';
@@ -75,11 +76,12 @@ class App extends React.Component<AppProps> {
 					handleClick={this.handleChromeToggle}
 					open={this.projectListVisible}
 				>
-					<ProjectList store={this.props.store} visible={this.projectListVisible} />
+					<ProjectList store={this.props.store} open={this.projectListVisible} />
 				</Chrome>
 				<MainArea>
 					<SideBar directionVertical hasPaddings>
 						<ElementPane>
+							<PageList store={this.props.store} />
 							<ElementList store={this.props.store} />
 						</ElementPane>
 						<PatternsPane>

src/component/container/page_list.tsx

@@ -0,0 +1,77 @@
+import Dropdown from '../../lsg/patterns/dropdown';
+import DropdownItem, {
+	DropdownItemLinkAttribute,
+	DropdownItemLinkAttributeItem
+} from '../../lsg/patterns/dropdown-item';
+import { IconName } from '../../lsg/patterns/icons';
+import * as MobX from 'mobx';
+import { observer } from 'mobx-react';
+import { PageRef } from '../../store/project/page_ref';
+import { Project } from '../../store/project';
+import * as React from 'react';
+import { Store } from '../../store';
+
+export interface PageListProps {
+	store: Store;
+}
+
+@observer
+export class PageList extends React.Component<PageListProps> {
+	@MobX.observable protected pageListVisible: boolean = false;
+	public constructor(props: PageListProps) {
+		super(props);
+
+		this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+		this.handlePageClick = this.handlePageClick.bind(this);
+	}
+
+	public render(): JSX.Element {
+		const currentPage = this.props.store.getCurrentPage();
+		let currentPageName = '';
+		if (currentPage) {
+			currentPageName = currentPage.getName();
+		}
+		return (
+			<Dropdown
+				label={currentPageName}
+				handleClick={this.handleDropdownToggle}
+				open={this.pageListVisible}
+			>
+				{this.getProjectPages().map((page: PageRef, index) => (
+					<DropdownItem
+						name={page.getName()}
+						key={index}
+						handleClick={(e: React.MouseEvent<HTMLElement>) => {
+							e.preventDefault();
+							this.handlePageClick(page.getId());
+						}}
+					>
+						<DropdownItemLinkAttribute>
+							<DropdownItemLinkAttributeItem>Edit</DropdownItemLinkAttributeItem>
+							<DropdownItemLinkAttributeItem>Delete</DropdownItemLinkAttributeItem>
+						</DropdownItemLinkAttribute>
+					</DropdownItem>
+				))}
+				<DropdownItem name="New page" icon={IconName.Robo} />
+			</Dropdown>
+		);
+	}
+
+	public getProjectPages(): PageRef[] {
+		const project: Project | undefined = this.props.store.getCurrentProject();
+		let projectPages: PageRef[] = [];
+		if (project) {
+			projectPages = project.getPages();
+		}
+		return projectPages;
+	}
+
+	@MobX.action
+	protected handleDropdownToggle(): void {
+		this.pageListVisible = !this.pageListVisible;
+	}
+
+	protected handlePageClick(id: string): void {
+		this.props.store.openPage(id);
+	}
+}

src/component/container/project_list.tsx

@@ -11,7 +11,7 @@ import { Store } from '../../store';
 
 export interface ProjectListProps {
 	store: Store;
-	visible?: boolean;
+	open?: boolean;
 }
 
 @observer
@@ -24,7 +24,7 @@ export class ProjectList extends React.Component<ProjectListProps> {
 
 	public render(): JSX.Element {
 		return (
-			<Dropdown chrome visible={this.props.visible}>
+			<Dropdown chrome open={this.props.open}>
 				{this.props.store.getProjects().map((project: Project, index) => (
 					<DropdownItem
 						name={project.getName()}

src/lsg/patterns/dropdown/index.tsx

@@ -1,42 +1,91 @@
 import { colors } from '../colors';
+import { Icon, IconName, Size as IconSize } from '../icons';
 import * as React from 'react';
 import { getSpace, Size as SpaceSize } from '../space';
 import styled from 'styled-components';
 
 export interface DropdownProps {
 	chrome?: boolean;
 	visible?: boolean;
-}
+	label?: string;
+	open?: boolean;
 
+	handleClick?: React.MouseEventHandler<HTMLElement>;
+}
+export interface StyledChromeDropdownProps {
+	open?: boolean;
+}
 export interface StyledDropdownProps {
-	visible?: boolean;
+	open?: boolean;
+}
+
+export interface StyledLabelProps {
+	open?: boolean;
+	handleClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export interface StyledIconProps {
+	open?: boolean;
+}
+
+export interface StyledFlyoutProps {
+	open?: boolean;
 }
 
 const StyledDropdown = styled.div`
-	${(props: StyledDropdownProps) => (props.visible ? 'display: block' : 'display: none')};
-	padding: ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.L)}px;
 	border: 1px solid ${colors.grey90.toString()};
 	background: ${colors.white.toString()};
 	border-radius: 3px;
 `;
 
+const StyledLabel = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: ${getSpace(SpaceSize.S)}px;
+	cursor: pointer;
+`;
+
+const StyledIcon = styled(Icon)`
+	margin-left: ${getSpace(SpaceSize.XS)}px;
+	fill: ${colors.grey36.toString()};
+	transition: transform 0.2s;
+
+	${(props: StyledIconProps) => (props.open ? 'transform: rotate(90deg)' : '')};
+`;
+
+const StyledFlyout = styled.div`
+	${(props: StyledFlyoutProps) => (props.open ? 'display: block' : 'display: none')};
+	padding: 0 ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.L)}px;
+`;
+
 const StyledChromeDropdown = styled(StyledDropdown)`
+	${(props: StyledChromeDropdownProps) => (props.open ? 'display: block' : 'display: none')};
 	position: absolute;
 	top: 45px;
 	left: 50%;
 	min-width: 200px;
+	padding: ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.L)}px;
 	transform: translateX(-50%);
 `;
 
 export default class Dropdown extends React.Component<DropdownProps> {
 	public render(): JSX.Element {
 		if (this.props.chrome) {
 			return (
-				<StyledChromeDropdown visible={this.props.visible}>
+				<StyledChromeDropdown open={this.props.open}>
 					{this.props.children}
 				</StyledChromeDropdown>
 			);
 		}
-		return <StyledDropdown visible={this.props.visible}>{this.props.children}</StyledDropdown>;
+		return (
+			<StyledDropdown>
+				<StyledLabel onClick={this.props.handleClick}>
+					{this.props.label}
+					<StyledIcon name={IconName.Arrow} size={IconSize.XXS} open={this.props.open} />
+				</StyledLabel>
+				<StyledFlyout open={this.props.open}>{this.props.children}</StyledFlyout>
+			</StyledDropdown>
+		);
 	}
 }