Simplified viewjs / active page handling

controllers/BaseController.php

@@ -114,7 +114,7 @@ class BaseController
 		return UsersService::getInstance();
 	}
 
-	protected function render($response, $page, $data = [])
+	protected function render($response, $viewName, $data = [])
 	{
 		$container = $this->AppContainer;
 
@@ -159,8 +159,8 @@ class BaseController
 				unset($constants[$constant]);
 			}
 		}
-
 		$this->View->set('featureFlags', $constants);
+
 		if (GROCY_AUTHENTICATED)
 		{
 			$this->View->set('permissions', User::PermissionList());
@@ -177,10 +177,12 @@ class BaseController
 			$this->View->set('DEFAULT_MIN_AMOUNT', $defaultMinAmount);
 		}
 
-		return $this->View->render($response, $page, $data);
+		$this->View->set('viewName', $viewName);
+
+		return $this->View->render($response, $viewName, $data);
 	}
 
-	protected function renderPage($response, $page, $data = [])
+	protected function renderPage($response, $viewName, $data = [])
 	{
 		$this->View->set('userentitiesForSidebar', $this->getDatabase()->userentities()->where('show_in_sidebar_menu = 1')->orderBy('name'));
 		try
@@ -200,7 +202,7 @@ class BaseController
 			// Happens when database is not initialised or migrated...
 		}
 
-		return $this->render($response, $page, $data);
+		return $this->render($response, $viewName, $data);
 	}
 
 	private static $htmlPurifierInstance = null;

public/js/grocy_menu_layout.js

@@ -33,33 +33,12 @@ if (window.localStorage.getItem("sidebar_state") === "collapsed")
 	$("#sidenavToggler").click();
 }
 
-if (Grocy.ActiveNav)
+// Make sure the current active menu item is visible
+var activeMenuItem = $("li.active-page");
+if (activeMenuItem.length > 0)
 {
-	var menuItem = $('#sidebarResponsive').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
-	if (menuItem)
+	if (!activeMenuItem.isVisibleInViewport(75))
 	{
-		menuItem.addClass('active-page');
-
-		var parentMenuSelector = menuItem.data("sub-menu-of");
-		if (parentMenuSelector)
-		{
-			$(parentMenuSelector).collapse("show");
-			$(parentMenuSelector).prev(".nav-link-collapse").addClass("active-page");
-
-			$(parentMenuSelector).on("shown.bs.collapse", function(e)
-			{
-				if (!menuItem.isVisibleInViewport(75))
-				{
-					menuItem[0].scrollIntoView();
-				}
-			})
-		}
-		else
-		{
-			if (!menuItem.isVisibleInViewport(75))
-			{
-				menuItem[0].scrollIntoView();
-			}
-		}
+		activeMenuItem[0].scrollIntoView();
 	}
 }

views/about.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('About Grocy'))
-@section('viewJsName', 'about')
 
 @section('content')
 <div class="row">

views/barcodescannertesting.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Barcode scanner testing'))
 
-@section('viewJsName', 'barcodescannertesting')
-
 @push('pageScripts')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"
 	rel="stylesheet">

views/batteries.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Batteries'))
-@section('activeNav', 'batteries')
-@section('viewJsName', 'batteries')
 
 @section('content')
 <div class="row">

views/batteriesjournal.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Batteries journal'))
-@section('activeNav', 'batteriesjournal')
-@section('viewJsName', 'batteriesjournal')
 
 @section('content')
 <div class="row">

views/batteriesoverview.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Batteries overview'))
-@section('activeNav', 'batteriesoverview')
-@section('viewJsName', 'batteriesoverview')
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"

views/batteriessettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Batteries settings'))
 
-@section('viewJsName', 'batteriessettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/batteryform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create battery'))
 @endif
 
-@section('viewJsName', 'batteryform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/batterytracking.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Battery tracking'))
-@section('activeNav', 'batterytracking')
-@section('viewJsName', 'batterytracking')
 
 @section('content')
 <div class="row">

views/calendar.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Calendar'))
-@section('activeNav', 'calendar')
-@section('viewJsName', 'calendar')
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/fullcalendar/dist/fullcalendar.min.js?v=', true) }}{{ $version }}"></script>

views/choreform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create chore'))
 @endif
 
-@section('viewJsName', 'choreform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/chores.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Chores'))
-@section('activeNav', 'chores')
-@section('viewJsName', 'chores')
 
 @section('content')
 <div class="row">

views/choresjournal.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Chores journal'))
-@section('activeNav', 'choresjournal')
-@section('viewJsName', 'choresjournal')
 
 @section('content')
 <div class="row">

views/choresoverview.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Chores overview'))
-@section('activeNav', 'choresoverview')
-@section('viewJsName', 'choresoverview')
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"

views/choressettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Chores settings'))
 
-@section('viewJsName', 'choressettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/choretracking.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Chore tracking'))
-@section('activeNav', 'choretracking')
-@section('viewJsName', 'choretracking')
 
 @section('content')
 <div class="row">

views/consume.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Consume'))
-@section('activeNav', 'consume')
-@section('viewJsName', 'consume')
 
 @push('pageScripts')
 <script src="{{ $U('/js/grocy_uisound.js?v=', true) }}{{ $version }}"></script>

views/equipment.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Equipment'))
-@section('activeNav', 'equipment')
-@section('viewJsName', 'equipment')
 
 @section('content')
 <div class="row">

views/equipmentform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create equipment'))
 @endif
 
-@section('viewJsName', 'equipmentform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/inventory.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Inventory'))
-@section('activeNav', 'inventory')
-@section('viewJsName', 'inventory')
 
 @section('content')
 <script>

views/layout/default.blade.php

@@ -65,7 +65,7 @@
 		Grocy.Mode = '{{ GROCY_MODE }}';
 		Grocy.BaseUrl = '{{ $U('/') }}';
 		Grocy.CurrentUrlRelative = "/" + window.location.href.split('?')[0].replace(Grocy.BaseUrl, "");
-		Grocy.ActiveNav = '@yield('activeNav', '')';
+		Grocy.View = '{{ $viewName }}';
 		Grocy.Currency = '{{ GROCY_CURRENCY }}';
 		Grocy.EnergyUnit = '{{ GROCY_ENERGY_UNIT }}';
 		Grocy.CalendarFirstDayOfWeek = '{{ GROCY_CALENDAR_FIRST_DAY_OF_WEEK }}';
@@ -126,11 +126,10 @@
 			<ul class="navbar-nav navbar-sidenav">
 
 				@if(GROCY_FEATURE_FLAG_STOCK)
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'stockoverview') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Stock overview') }}"
-					data-nav-for-page="stockoverview">
+					title="{{ $__t('Stock overview') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/stockoverview') }}">
 						<i class="fa-solid fa-box"></i>
@@ -139,11 +138,10 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_SHOPPINGLIST)
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'shoppinglist') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Shopping list') }}"
-					data-nav-for-page="shoppinglist">
+					title="{{ $__t('Shopping list') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/shoppinglist') }}">
 						<i class="fa-solid fa-shopping-cart"></i>
@@ -153,11 +151,10 @@
 				@endif
 				@if(GROCY_FEATURE_FLAG_RECIPES)
 				<div class="nav-item-divider"></div>
-				<li class="nav-item nav-item-sidebar permission-RECIPES"
+				<li class="nav-item nav-item-sidebar permission-RECIPES @if($viewName == 'recipes') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Recipes') }}"
-					data-nav-for-page="recipes">
+					title="{{ $__t('Recipes') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/recipes') }}">
 						<i class="fa-solid fa-pizza-slice"></i>
@@ -165,11 +162,10 @@
 					</a>
 				</li>
 				@if(GROCY_FEATURE_FLAG_RECIPES_MEALPLAN)
-				<li class="nav-item nav-item-sidebar permission-RECIPES_MEALPLAN"
+				<li class="nav-item nav-item-sidebar permission-RECIPES_MEALPLAN @if($viewName == 'mealplan') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Meal plan') }}"
-					data-nav-for-page="mealplan">
+					title="{{ $__t('Meal plan') }}">
 					<a id="meal-plan-nav-link"
 						class="nav-link discrete-link"
 						href="{{ $U('/mealplan') }}">
@@ -181,11 +177,10 @@
 				@endif
 				@if(GROCY_FEATURE_FLAG_CHORES)
 				<div class="nav-item-divider"></div>
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'choresoverview') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Chores overview') }}"
-					data-nav-for-page="choresoverview">
+					title="{{ $__t('Chores overview') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/choresoverview') }}">
 						<i class="fa-solid fa-home"></i>
@@ -194,11 +189,10 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_TASKS)
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'tasks') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Tasks') }}"
-					data-nav-for-page="tasks">
+					title="{{ $__t('Tasks') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/tasks') }}">
 						<i class="fa-solid fa-tasks"></i>
@@ -207,11 +201,10 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_BATTERIES)
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'batteriesoverview') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Batteries overview') }}"
-					data-nav-for-page="batteriesoverview">
+					title="{{ $__t('Batteries overview') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/batteriesoverview') }}">
 						<i class="fa-solid fa-battery-half"></i>
@@ -220,12 +213,13 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_EQUIPMENT)
-				<li class="nav-item nav-item-sidebar permission-EQUIPMENT"
+				<li class="nav-item nav-item-sidebar permission-EQUIPMENT @if($viewName == 'equipment') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Equipment') }}"
-					data-nav-for-page="equipment">
-					<a class="nav-link discrete-link"
+					title="{{ $__t('Equipment') }}"">
+					<a class="
+					nav-link
+					discrete-link"
 					href="{{ $U('/equipment') }}">
 					<i class="fa-solid fa-toolbox"></i>
 					<span class="nav-link-text">{{ $__t('Equipment') }}</span>
@@ -234,11 +228,10 @@
 				@endif
 				@if(GROCY_FEATURE_FLAG_CALENDAR)
 				<div class="nav-item-divider"></div>
-				<li class="nav-item nav-item-sidebar permission-CALENDAR"
+				<li class="nav-item nav-item-sidebar permission-CALENDAR @if($viewName == 'calendar') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Calendar') }}"
-					data-nav-for-page="calendar">
+					title="{{ $__t('Calendar') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/calendar') }}">
 						<i class="fa-solid fa-calendar-days"></i>
@@ -249,22 +242,20 @@
 
 				@if(GROCY_FEATURE_FLAG_STOCK)
 				<div class="nav-item-divider"></div>
-				<li class="nav-item nav-item-sidebar permission-STOCK_PURCHASE"
+				<li class="nav-item nav-item-sidebar permission-STOCK_PURCHASE @if($viewName == 'purchase') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Purchase') }}"
-					data-nav-for-page="purchase">
+					title="{{ $__t('Purchase') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/purchase') }}">
 						<i class="fa-solid fa-cart-plus"></i>
 						<span class="nav-link-text">{{ $__t('Purchase') }}</span>
 					</a>
 				</li>
-				<li class="nav-item nav-item-sidebar permission-STOCK_CONSUME"
+				<li class="nav-item nav-item-sidebar permission-STOCK_CONSUME @if($viewName == 'consume') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Consume') }}"
-					data-nav-for-page="consume">
+					title="{{ $__t('Consume') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/consume') }}">
 						<i class="fa-solid fa-utensils"></i>
@@ -272,11 +263,10 @@
 					</a>
 				</li>
 				@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
-				<li class="nav-item nav-item-sidebar permission-STOCK_TRANSFER"
+				<li class="nav-item nav-item-sidebar permission-STOCK_TRANSFER @if($viewName == 'transfer') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Transfer') }}"
-					data-nav-for-page="transfer">
+					title="{{ $__t('Transfer') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/transfer') }}">
 						<i class="fa-solid fa-exchange-alt"></i>
@@ -284,11 +274,10 @@
 					</a>
 				</li>
 				@endif
-				<li class="nav-item nav-item-sidebar permission-STOCK_INVENTORY"
+				<li class="nav-item nav-item-sidebar permission-STOCK_INVENTORY @if($viewName == 'inventory') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Inventory') }}"
-					data-nav-for-page="inventory">
+					title="{{ $__t('Inventory') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/inventory') }}">
 						<i class="fa-solid fa-list"></i>
@@ -297,11 +286,10 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_CHORES)
-				<li class="nav-item nav-item-sidebar permission-CHORE_TRACK_EXECUTION"
+				<li class="nav-item nav-item-sidebar permission-CHORE_TRACK_EXECUTION @if($viewName == 'choretracking') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Chore tracking') }}"
-					data-nav-for-page="choretracking">
+					title="{{ $__t('Chore tracking') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/choretracking') }}">
 						<i class="fa-solid fa-play"></i>
@@ -310,11 +298,10 @@
 				</li>
 				@endif
 				@if(GROCY_FEATURE_FLAG_BATTERIES)
-				<li class="nav-item nav-item-sidebar permission-BATTERIES_TRACK_CHARGE_CYCLE"
+				<li class="nav-item nav-item-sidebar permission-BATTERIES_TRACK_CHARGE_CYCLE @if($viewName == 'batterytracking') active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $__t('Battery tracking') }}"
-					data-nav-for-page="batterytracking">
+					title="{{ $__t('Battery tracking') }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/batterytracking') }}">
 						<i class="fa-solid fa-car-battery"></i>
@@ -327,36 +314,41 @@
 				@foreach($userentitiesForSidebar as $userentity)
 				@if($firstUserentity)
 				<div class="nav-item-divider"></div>
+				@php $firstUserentity = false; @endphp
 				@endif
-				<li class="nav-item nav-item-sidebar"
+				<li class="nav-item nav-item-sidebar @if($viewName == 'userobjects' && $__env->yieldContent('title') == $userentity->caption) active-page @endif"
 					data-toggle="tooltip"
 					data-placement="right"
-					title="{{ $userentity->caption }}"
-					data-nav-for-page="userentity-{{ $userentity->name }}">
+					title="{{ $userentity->caption }}">
 					<a class="nav-link discrete-link"
 						href="{{ $U('/userobjects/' . $userentity->name) }}">
 						<i class="{{ $userentity->icon_css_class }}"></i>
 						<span class="nav-link-text">{{ $userentity->caption }}</span>
 					</a>
 				</li>
-				@php if ($firstUserentity) { $firstUserentity = false; } @endphp
 				@endforeach
 
+				@php
+				$masterDataViews = [
+				'products', 'locations', 'shoppinglocations', 'quantityunits',
+				'productgroups', 'chores', 'batteries', 'taskcategories',
+				'userfields', 'userentities'
+				]
+				@endphp
 				<div class="nav-item-divider"></div>
 				<li class="nav-item nav-item-sidebar"
 					data-toggle="tooltip"
 					data-placement="right"
 					title="{{ $__t('Manage master data') }}">
-					<a class="nav-link nav-link-collapse collapsed discrete-link"
+					<a class="nav-link nav-link-collapse discrete-link @if(!in_array($viewName, $masterDataViews)) collapsed @else active-page @endif"
 						data-toggle="collapse"
-						href="#top-nav-manager-master-data">
+						href="#sub-nav-manage-master-data">
 						<i class="fa-solid fa-table"></i>
 						<span class="nav-link-text">{{ $__t('Manage master data') }}</span>
 					</a>
-					<ul id="top-nav-manager-master-data"
-						class="sidenav-second-level collapse">
-						<li data-nav-for-page="products"
-							data-sub-menu-of="#top-nav-manager-master-data">
+					<ul id="sub-nav-manage-master-data"
+						class="sidenav-second-level collapse @if(in_array($viewName, $masterDataViews)) show @endif">
+						<li class="@if($viewName == 'products') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/products') }}">
 								<span class="nav-link-text">{{ $__t('Products') }}</span>
@@ -364,8 +356,7 @@
 						</li>
 						@if(GROCY_FEATURE_FLAG_STOCK)
 						@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
-						<li data-nav-for-page="locations"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'locations') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/locations') }}">
 								<span class="nav-link-text">{{ $__t('Locations') }}</span>
@@ -373,8 +364,7 @@
 						</li>
 						@endif
 						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
-						<li data-nav-for-page="shoppinglocations"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'shoppinglocations') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/shoppinglocations') }}">
 								<span class="nav-link-text">{{ $__t('Stores') }}</span>
@@ -382,23 +372,20 @@
 						</li>
 						@endif
 						@endif
-						<li data-nav-for-page="quantityunits"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'quantityunits') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/quantityunits') }}">
 								<span class="nav-link-text">{{ $__t('Quantity units') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="productgroups"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'productgroups') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/productgroups') }}">
 								<span class="nav-link-text">{{ $__t('Product groups') }}</span>
 							</a>
 						</li>
 						@if(GROCY_FEATURE_FLAG_CHORES)
-						<li data-nav-for-page="chores"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'chores') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/chores') }}">
 								<span class="nav-link-text">{{ $__t('Chores') }}</span>
@@ -406,8 +393,7 @@
 						</li>
 						@endif
 						@if(GROCY_FEATURE_FLAG_BATTERIES)
-						<li data-nav-for-page="batteries"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'batteries') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/batteries') }}">
 								<span class="nav-link-text">{{ $__t('Batteries') }}</span>
@@ -415,23 +401,20 @@
 						</li>
 						@endif
 						@if(GROCY_FEATURE_FLAG_TASKS)
-						<li data-nav-for-page="taskcategories"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'taskcategories') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/taskcategories') }}">
 								<span class="nav-link-text">{{ $__t('Task categories') }}</span>
 							</a>
 						</li>
 						@endif
-						<li data-nav-for-page="userfields"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'userfields') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/userfields') }}">
 								<span class="nav-link-text">{{ $__t('Userfields') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="userentities"
-							data-sub-menu-of="#top-nav-manager-master-data">
+						<li class="@if($viewName == 'userentities') active-page @endif">
 							<a class="nav-link discrete-link"
 								href="{{ $U('/userentities') }}">
 								<span class="nav-link-text">{{ $__t('Userentities') }}</span>
@@ -716,9 +699,10 @@
 	<script src="{{ $U('/js/grocy_wakelockhandling.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_nightmode.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_clock.js?v=', true) }}{{ $version }}"></script>
+
 	@stack('pageScripts')
 	@stack('componentScripts')
-	@hasSection('viewJsName')<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>@endif
+	<script src="{{ $U('/viewjs/' . $viewName . '.js?v=', true) }}{{ $version }}"></script>
 
 	@if(file_exists(GROCY_DATAPATH . '/custom_js.html'))
 	@php include GROCY_DATAPATH . '/custom_js.html' @endphp

views/locationcontentsheet.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Location Content Sheet'))
-@section('viewJsName', 'locationcontentsheet')
 
 @push('pageStyles')
 <style>

views/locationform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create location'))
 @endif
 
-@section('viewJsName', 'locationform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/locations.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Locations'))
-@section('activeNav', 'locations')
-@section('viewJsName', 'locations')
 
 @section('content')
 <div class="row">

views/login.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Login'))
-@section('viewJsName', 'login')
 
 @section('content')
 <div class="row">

views/manageapikeys.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('API keys'))
-@section('activeNav', '')
-@section('viewJsName', 'manageapikeys')
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/bwip-js/dist/bwip-js-min.js?v=', true) }}{{ $version }}"></script>

views/mealplan.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Meal plan'))
-@section('activeNav', 'mealplan')
-@section('viewJsName', 'mealplan')
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/fullcalendar/dist/fullcalendar.min.js?v=', true) }}{{ $version }}"></script>

views/mealplansectionform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create meal plan section'))
 @endif
 
-@section('viewJsName', 'mealplansectionform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/mealplansections.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Meal plan sections'))
-@section('activeNav', 'mealplansections')
-@section('viewJsName', 'mealplansections')
 
 @section('content')
 <div class="row">

views/productbarcodeform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create Barcode'))
 @endif
 
-@section('viewJsName', 'productbarcodeform')
-
 @section('content')
 <script>
 	Grocy.QuantityUnits = {!! json_encode($quantityUnits) !!};

views/productform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create product'))
 @endif
 
-@section('viewJsName', 'productform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/productgroupform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create product group'))
 @endif
 
-@section('viewJsName', 'productgroupform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/productgroups.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Product groups'))
-@section('activeNav', 'productgroups')
-@section('viewJsName', 'productgroups')
 
 @section('content')
 <div class="row">

views/products.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Products'))
-@section('activeNav', 'products')
-@section('viewJsName', 'products')
 
 @section('content')
 <div class="row">

views/purchase.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Purchase'))
-@section('activeNav', 'purchase')
-@section('viewJsName', 'purchase')
 
 @push('pageScripts')
 <script src="{{ $U('/js/grocy_uisound.js?v=', true) }}{{ $version }}"></script>

views/quantityunitconversionform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create QU conversion'))
 @endif
 
-@section('viewJsName', 'quantityunitconversionform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/quantityunitconversionsresolved.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('QU conversions resolved'))
 
-@section('viewJsName', 'quantityunitconversionsresolved')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/quantityunitform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create quantity unit'))
 @endif
 
-@section('viewJsName', 'quantityunitform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/quantityunitpluraltesting.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Quantity unit plural form testing'))
 
-@section('viewJsName', 'quantityunitpluraltesting')
-
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"
 	rel="stylesheet">

views/quantityunits.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Quantity units'))
-@section('activeNav', 'quantityunits')
-@section('viewJsName', 'quantityunits')
 
 @section('content')
 <div class="row">

views/recipeform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create recipe'))
 @endif
 
-@section('viewJsName', 'recipeform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/recipeposform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Add recipe ingredient'))
 @endif
 
-@section('viewJsName', 'recipeposform')
-
 @section('content')
 <script>
 	Grocy.DefaultMinAmount = '{{$DEFAULT_MIN_AMOUNT}}';

views/recipes.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Recipes'))
-@section('activeNav', 'recipes')
-@section('viewJsName', 'recipes')
 
 @push('pageStyles')
 <style>

views/recipessettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Recipes settings'))
 
-@section('viewJsName', 'recipessettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/shoppinglist.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Shopping list'))
-@section('activeNav', 'shoppinglist')
-@section('viewJsName', 'shoppinglist')
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/bwip-js/dist/bwip-js-min.js?v=', true) }}{{ $version }}"></script>

views/shoppinglistform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create shopping list'))
 @endif
 
-@section('viewJsName', 'shoppinglistform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/shoppinglistitemform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create shopping list item'))
 @endif
 
-@section('viewJsName', 'shoppinglistitemform')
-
 @section('content')
 <script>
 	Grocy.QuantityUnits = {!! json_encode($quantityUnits) !!};

views/shoppinglistsettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Shopping list settings'))
 
-@section('viewJsName', 'shoppinglistsettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/shoppinglocationform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create store'))
 @endif
 
-@section('viewJsName', 'shoppingLocationform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/shoppinglocations.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stores'))
-@section('activeNav', 'shoppinglocations')
-@section('viewJsName', 'shoppinglocations')
 
 @section('content')
 <div class="row">

views/stockentries.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stock entries'))
-@section('viewJsName', 'stockentries')
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"

views/stockentryform.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Edit stock entry'))
-@section('viewJsName', 'stockentryform')
 
 @section('content')
 <script>

views/stockjournal.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stock journal'))
-@section('activeNav', 'stockjournal')
-@section('viewJsName', 'stockjournal')
 
 @section('content')
 <div class="title-related-links">

views/stockjournalsummary.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stock journal summary'))
-@section('activeNav', '')
-@section('viewJsName', 'stockjournalsummary')
 
 @section('content')
 <div class="row">

views/stockoverview.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stock overview'))
-@section('activeNav', 'stockoverview')
-@section('viewJsName', 'stockoverview')
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"

views/stockreportspendings.blade.php

@@ -1,7 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Stock report') . ' / ' . $__t('Spendings'))
-@section('viewJsName', 'stockreportspendings')
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/chart.js/dist/Chart.min.js?v=', true) }}{{ $version }}"></script>

views/stocksettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Stock settings'))
 
-@section('viewJsName', 'stocksettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/taskcategories.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Task categories'))
-@section('activeNav', 'taskcategories')
-@section('viewJsName', 'taskcategories')
 
 @section('content')
 <div class="row">

views/taskcategoryform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create task category'))
 @endif
 
-@section('viewJsName', 'taskcategoryform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/taskform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create task'))
 @endif
 
-@section('viewJsName', 'taskform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/tasks.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Tasks'))
-@section('activeNav', 'tasks')
-@section('viewJsName', 'tasks')
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"

views/taskssettings.blade.php

@@ -2,8 +2,6 @@
 
 @section('title', $__t('Tasks settings'))
 
-@section('viewJsName', 'taskssettings')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/transfer.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Transfer'))
-@section('activeNav', 'transfer')
-@section('viewJsName', 'transfer')
 
 @section('content')
 <script>

views/userentities.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Userentities'))
-@section('activeNav', 'userentities')
-@section('viewJsName', 'userentities')
 
 @section('content')
 <div class="row">

views/userentityform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create userentity'))
 @endif
 
-@section('viewJsName', 'userentityform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/userfieldform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create userfield'))
 @endif
 
-@section('viewJsName', 'userfieldform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/userfields.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Userfields'))
-@section('activeNav', 'userfields')
-@section('viewJsName', 'userfields')
 
 @section('content')
 <div class="row">

views/userform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create user'))
 @endif
 
-@section('viewJsName', 'userform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/userobjectform.blade.php

@@ -6,8 +6,6 @@
 @section('title', $__t('Create %s', $userentity->caption))
 @endif
 
-@section('viewJsName', 'userobjectform')
-
 @section('content')
 <div class="row">
 	<div class="col">

views/userobjects.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $userentity->caption)
-@section('activeNav', 'userentity-' . $userentity->name)
-@section('viewJsName', 'userobjects')
 
 @section('content')
 <div class="row">

views/userpermissions.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Permissions for user %s', GetUserDisplayName($user)))
-@section('activeNav', '')
-@section('viewJsName', 'userpermissions')
 
 @push('pageScripts')
 <script>
@@ -15,7 +13,6 @@
 	ul {
 		list-style-type: none;
 	}
-
 </style>
 @endpush
 

views/users.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('Users'))
-@section('activeNav', '')
-@section('viewJsName', 'users')
 
 @section('content')
 <div class="row">

views/usersettings.blade.php

@@ -1,8 +1,6 @@
 @extends('layout.default')
 
 @section('title', $__t('User settings'))
-@section('activeNav', '')
-@section('viewJsName', 'usersettings')
 
 @section('content')
 <div class="row">