implement menus

extension/popup.tsx

@@ -4,6 +4,7 @@ import { Router, Route, Switch } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router';
 import { Provider } from 'mobx-react';
 import { configure } from 'mobx';
+import { ListMenu } from 'Component';
 import { dispatcher, C, UtilCommon } from 'Lib'; 
 import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, popupStore } from 'Store';
 
@@ -48,7 +49,13 @@ class RoutePage extends React.Component<RouteComponentProps> {
 		const page = params.page || 'index';
 		const Component = Components[page];
 
-		return Component ? <Component /> : null;
+		return (
+			<React.Fragment>
+				<ListMenu key="listMenu" {...this.props} />
+
+				{Component ? <Component /> : null}
+			</React.Fragment>
+		);
 	};
 };
 

extension/popup/create.tsx

@@ -16,6 +16,18 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 	};
 
 	render () {
+		const spaceOptions = [
+			{ id: '1', name: '1' },
+			{ id: '2', name: '2' },
+			{ id: '3', name: '3' },
+		];
+
+		const typeOptions = [
+			{ id: '1', name: '1' },
+			{ id: '2', name: '2' },
+			{ id: '3', name: '3' },
+		];
+
 		return (
 			<div className="page pageCreate">
 				<form onSubmit={this.onSubmit}>
@@ -27,12 +39,28 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 
 						<div className="row">
 							<Label text="Space" />
-							<Select id="select-space" value="" options={[]} />
+							<Select 
+								id="select-space" 
+								value="1" 
+								options={spaceOptions} 
+								menuParam={{
+									horizontal: I.MenuDirection.Center,
+									vertical: I.MenuDirection.Center,
+								}}
+							/>
 						</div>
 
 						<div className="row">
 							<Label text="Save as" />
-							<Select id="select-type" value="" options={[]} />
+							<Select 
+								id="select-type" 
+								value="1" 
+								options={typeOptions} 
+								menuParam={{
+									horizontal: I.MenuDirection.Center,
+									vertical: I.MenuDirection.Center,
+								}}
+							/>
 						</div>
 					</div>
 

extension/scss/popup.scss

@@ -4,6 +4,23 @@ html.anytypeWebclipper-popup { width: 268px; background: #fff; }
 	@import "~scss/form/button.scss";
 	@import "~scss/component/icon.scss";
 	@import "~scss/component/frame.scss";
+	@import "~scss/menu/common.scss";
+	@import "~scss/menu/select.scss";
+
+	.input, .select { @include text-small; height: 32px; padding: 0px 10px; border: 1px solid $colorBorderDark; width: 100%; }
+	.select { display: flex; align-items: center; }
+
+	.menus {
+		.menu.vertical { 
+			width: calc(100% - 32px); height: calc(100% - 32px); left: 16px !important; top: 16px !important; position: fixed;
+		}
+		.dimmer { background: rgba(0,0,0,0.5); }
+
+		.menu.menuSelect {
+			.content { height: 100% !important; }
+			.items { height: 100%; }
+		}
+	}
 
 	.page.pageIndex { height: 232px; }
 	.page.pageIndex {
@@ -16,8 +33,7 @@ html.anytypeWebclipper-popup { width: 268px; background: #fff; }
 		.row { margin: 0px 0px 10px 0px; }
 		.row:last-child { margin: 0px; }
 
-		.label { @include text-small; color: $colorDarkGrey; }
-		.input, .select { height: 32px; padding: 0px 10px; border: 1px solid $colorBorderDark; width: 100%; }
+		.label { @include text-small; color: $colorDarkGrey; margin: 0px 0px 4px 0px; }
 		.buttons { display: flex; flex-direction: column; justify-content: center; }
 
 		.item.add {