feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/routes/index.js

@@ -1,87 +1,54 @@
-import HomePage from "@/pages/HomePage";
 import Page404 from "@/pages/404Page";
-import SearchPage from "@/pages/SearchPage";
-import ViewRecipe from "@/pages/Recipe/ViewRecipe";
-import NewRecipe from "@/pages/Recipe/NewRecipe";
-import CustomPage from "@/pages/Recipes/CustomPage";
-import AllRecipes from "@/pages/Recipes/AllRecipes";
-import CategoryPage from "@/pages/Recipes/CategoryPage";
-import TagPage from "@/pages/Recipes/TagPage";
-import Planner from "@/pages/MealPlan/Planner";
-import Debug from "@/pages/Debug";
-import LoginPage from "@/pages/LoginPage";
-import SignUpPage from "@/pages/SignUpPage";
-import ThisWeek from "@/pages/MealPlan/ThisWeek";
-import { api } from "@/api";
-import Admin from "./admin";
+import { adminRoutes } from "./admin";
+import { authRoutes } from "./auth";
+import { recipeRoutes } from "./recipes";
+import { mealRoutes } from "./meal";
+import { generalRoutes } from "./general";
 import { store } from "../store";
-import i18n from '@/i18n.js';
+import VueRouter from "vue-router";
+import VueI18n from "@/i18n";
+import Vuetify from "@/plugins/vuetify";
+import Vue from "vue";
 
 export const routes = [
-  { path: "/", name: "home", component: HomePage },
-  {
-    path: "/logout",
-    beforeEnter: (_to, _from, next) => {
-      store.commit("setToken", "");
-      store.commit("setIsLoggedIn", false);
-      next("/");
-    },
-  },
-  { path: "/mealie", component: HomePage },
-  { path: "/login", component: LoginPage },
-  { path: "/sign-up", redirect: "/" },
-  { path: "/sign-up/:token", component: SignUpPage },
-  { path: "/debug", component: Debug },
-  { 
-    path: "/search", 
-    component: SearchPage,
-    meta: {
-      title: i18n.t('search.search'),
-    },
-  },
-  { path: "/recipes/all", component: AllRecipes },
-  { path: "/pages/:customPage", component: CustomPage },
-  { path: "/recipes/tag/:tag", component: TagPage },
-  { path: "/recipes/category/:category", component: CategoryPage },
-  { 
-    path: "/recipe/:recipe", 
-    component: ViewRecipe,
-    meta: {
-      title: async route => {
-        const recipe = await api.recipes.requestDetails(route.params.recipe);
-        return recipe.name;
-      },
-    } 
-  },
-  { path: "/new/", component: NewRecipe },
-  { 
-    path: "/meal-plan/planner",
-    component: Planner,
-    meta: {
-      title:  i18n.t('meal-plan.meal-planner'),
-    } 
-  },
-  { 
-    path: "/meal-plan/this-week", 
-    component: ThisWeek,
-    meta: {
-      title: i18n.t('meal-plan.dinner-this-week'),
-    } 
+  ...generalRoutes,
+  adminRoutes,
+  ...authRoutes,
+  ...mealRoutes,
+  ...recipeRoutes,
 
-  },
-  Admin,
-  {
-    path: "/meal-plan/today",
-    beforeEnter: async (_to, _from, next) => {
-      await todaysMealRoute().then(redirect => {
-        next(redirect);
-      });
-    },
-  },
   { path: "*", component: Page404 },
 ];
 
-async function todaysMealRoute() {
-  const response = await api.mealPlans.today();
-  return "/recipe/" + response.data;
+const router = new VueRouter({
+  routes,
+  mode: process.env.NODE_ENV === "production" ? "history" : "hash",
+});
+
+const DEFAULT_TITLE = "Mealie";
+const TITLE_SEPARATOR = "🍴";
+const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
+router.afterEach(to => {
+  Vue.nextTick(async () => {
+    if (typeof to.meta.title === "function") {
+      const title = await to.meta.title(to);
+      document.title = title + TITLE_SUFFIX;
+    } else {
+      document.title = to.meta.title
+        ? to.meta.title + TITLE_SUFFIX
+        : DEFAULT_TITLE;
+    }
+  });
+});
+
+function loadLocale() {
+  VueI18n.locale = store.getters.getActiveLang;
+  Vuetify.framework.lang.current = store.getters.getActiveLang;
 }
+
+router.beforeEach((__, _, next) => {
+  loadLocale();
+  next();
+});
+
+export { router };