1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/design_management_new/router/index.js b/app/assets/javascripts/design_management_new/router/index.js
new file mode 100644
index 00000000000..40e2d35bc40
--- /dev/null
+++ b/app/assets/javascripts/design_management_new/router/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
+import { DESIGN_ROUTE_NAME } from './constants';
+import { getPageLayoutElement } from '~/design_management_new/utils/design_management_utils';
+import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../constants';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+  const pageEl = getPageLayoutElement();
+
+  router.beforeEach(({ name }, _, next) => {
+    // apply a fullscreen layout style in Design View (a.k.a design detail)
+    if (pageEl) {
+      if (name === DESIGN_ROUTE_NAME) {
+        pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      } else {
+        pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      }
+    }
+
+    next();
+  });
+
+  return router;
+}