Centered the div.

snw_ui/public/css/snw_ui.css

@@ -1,3 +1,25 @@
+#sidebar {
+	display: flex;
+	flex-direction: column;
+	width: 100px;
+	align-self: flex-start;
+}
+
 .sidebar-button {
 	border-radius: 30px;
+	border: none;
+}
+
+#snw-ui {
+	display: flex;
+	flex-direction: row;
+	width: 100vw;
+}
+
+#display-content {
+	display: flex;
+	width: 25%;
+	border: 1px;
+	flex-grow: 4;
+	justify-content: center;
 }

snw_ui/snw_ui/page/install/install.html

@@ -1,5 +1,6 @@
-<div id="sidebar">
-</div>
-<div id="page">
-<H2>Hello, World!</H2>
+<div id="snw-ui">
+	<div id="sidebar" class="sidebar"></div>
+	<div id="display-content">
+		<H2>Hello, World!</H2>
+	</div>
 </div>

snw_ui/snw_ui/page/install/install.js

@@ -5,15 +5,9 @@ frappe.pages['install'].on_page_load = function(wrapper) {
 		parent: wrapper,
 		title: 'Sprinklers Northwest Install',
 		single_column: true
-		//const page = $(wrapper)
-		//const sidebar = page.find('.sidebar')
-		//install_page = new InstallPage(wrapper);
-		//new Controller(new Model(), new View(install_page.page));
 	});
 	$(frappe.render_template("install", page)).appendTo(page.main);
 
-	console.log(page);
-	console.log(page.parent);
 	new Controller(new Model(), new View(page.parent));
 }
 
@@ -29,25 +23,15 @@ class Model {
 
 class View {
 	constructor(page) {
-		console.log(page)
 		this.$sidebar = $("#sidebar", page);
-		console.log(this.$sidebar)
-		//this.sidebar = page.find('#sidebar')
-
-		//this.$page = $("#page");
 	}
 
 	set_sidebar_categories(categories) {
-		console.log("Set Categories:");
-		console.log(this.$sidebar);
 		$.each(categories, (index) => {
 			const $button = $(`<button>${categories[index]}</button>`);
-			console.log($button);
 			$button.addClass("sidebar-button");
 			this.$sidebar.append($button);
 		})
-
-		console.log(this.$sidebar);
 	}
 }