Added menu

Added Bulma CSS framework
Using PurgeCSS plugin to remove all unused CSS

WebApp/package.json

@@ -9,18 +9,18 @@
   },
   "author": "Youen Toupin",
   "license": "AGPL-3.0",
-  "dependencies": {
-  },
   "devDependencies": {
     "@types/mithril": "^2.0.9",
+    "bulma": "^0.9.3",
     "css-loader": "^6.7.1",
     "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "mithril": "^2.0.4",
+    "purgecss-webpack-plugin": "^4.1.3",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^4.9.2"
-    "bulma": "^0.9.3",
-    "mithril": "^2.0.4"
   }
 }

WebApp/src/layout.tsx

@@ -9,7 +9,7 @@ export default class Layout {
 		return [
 			<nav class="navbar" role="navigation" aria-label="main navigation">
 				<div class="navbar-brand">
-					<a class="navbar-item" href='#!/dashboard'>Tableau de bord</a>
+					<a class="navbar-item" href="#!/dashboard" onclick={() => { this.menuActive = false; return true; }}>Tableau de bord</a>
 					
 					<a role="button" class={'navbar-burger ' + (this.menuActive ? 'is-active' : '')} onclick={() => this.menuActive = !this.menuActive} aria-label="menu" aria-expanded="false" data-target="mainMenu">
 						<span aria-hidden="true"></span>

WebApp/webpack.config.js

@@ -1,6 +1,11 @@
 const path = require('path');
+const glob = require('glob');
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+
 module.exports = {
   entry: './src/app.ts',
   module: {
@@ -12,7 +17,7 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
     ],
   },
@@ -28,19 +33,12 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './src/index.html',
       hash: true
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+    new PurgecssPlugin({
+      paths: glob.sync('./src/**/*',  { nodir: true }),
     })
-  ],
+  ]
-  optimization: {
-	moduleIds: 'deterministic',
-    runtimeChunk: 'single',
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'all',
-        },
-      },
-    },
-  },
 };