Moved sidebar / menu layout into own (customized) component

2025-04-28 17:23:56 +00:00 · 2023-05-19 15:12:11 +02:00 · 2023-05-19 15:12:11 +02:00 · 628e779902
commit 628e779902
parent 99546815f9
8 changed files with 553 additions and 217 deletions
--- a/package.json
+++ b/package.json
@ -33,7 +33,6 @@
 		"moment": "^2.27.0",
 		"nosleep.js": "^0.12.0",
 		"sprintf-js": "^1.1.2",
-		"startbootstrap-sb-admin": "4.0.0",
 		"summernote": "^0.8.18",
 		"swagger-ui-dist": "^4.10.3",
 		"tempusdominus-bootstrap-4": "^5.39.2",
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@ -67,12 +67,6 @@ a.discrete-link:focus {
 	width: 100%;
 }

-/* Fixes smooth scrolling on iOS */
-#sidebarResponsive,
-.fullscreen {
-	-webkit-overflow-scrolling: touch;
-}
-
 .fullscreen-card .card-header-fullscreen {
 	z-index: 9999;
 	width: 100%;
@ -113,10 +107,6 @@ button.disabled {
 	display: none;
 }

-body.embedded.fixed-nav {
-	padding-top: 0;
-}
-
 .embedded .content-wrapper {
 	margin-left: 0;
 }
@ -148,78 +138,6 @@ form.has-sticky-form-footer .form-group:nth-last-child(2) {
 	padding-bottom: 2rem;
 }

-/* Navigation style customizations */
-#mainNav {
-	line-height: 1;
-	background-color: #e5e5e5 !important;
-	border-bottom: 2px solid !important;
-	border-color: #d6d6d6 !important;
-	padding-bottom: 0.3rem;
-}
-
-#mainNav .dropdown-menu {
-	line-height: 1.5;
-}
-
-.navbar-sidenav {
-	overflow-x: hidden;
-	overflow-y: overlay;
-	border-top: 2px solid !important;
-}
-
-.navbar-sidenav,
-.sidenav-second-level {
-	background-color: #e5e5e5 !important;
-	border-right: 2px solid !important;
-	border-color: #d6d6d6 !important;
-}
-
-.navbar-nav .dropdown-menu {
-	background-color: #e5e5e5 !important;
-	border: 0;
-	border-radius: 0;
-}
-
-.navbar-nav .dropdown-divider,
-.nav-item-divider {
-	border-top: 2px solid !important;
-	border-color: #d6d6d6 !important;
-}
-
-.sidenav-toggler {
-	background-color: #d6d6d6 !important;
-	border-right: 2px solid !important;
-	border-color: #d6d6d6 !important;
-}
-
-.navbar-sidenav>li,
-.sidenav-second-level>li {
-	transition: all 0.3s !important;
-}
-
-.navbar-sidenav>li:hover,
-.sidenav-second-level>li:hover,
-.navbar-nav .dropdown-item:hover {
-	box-shadow: inset 5px 0 0 #337ab7 !important;
-	background-color: #d6d6d6 !important;
-}
-
-.navbar-sidenav>li>a:focus,
-.sidenav-second-level>li>a:focus,
-.navbar-nav .dropdown-item:focus {
-	box-shadow: inset 5px 0 0 #ab2230 !important;
-	background-color: #d6d6d6 !important;
-}
-
-.active-page {
-	box-shadow: inset 5px 0 0 #ab2230 !important;
-	background-color: #d6d6d6 !important;
-}
-
-.navbar-brand {
-	margin-right: 0;
-}
-
 .cursor-link {
 	cursor: pointer;
 }
@ -410,51 +328,12 @@ tr.dtrg-group {
 	font-family: sans-serif;
 }

-/* Third party component customizations - SB Admin 2 */
-#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after,
-#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
-	font-family: 'Font Awesome 5 Free';
-	font-weight: 900;
-}
-
-#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link.py-0:after,
-#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.py-0:after {
-	padding-top: 8px;
-}
-
-#mainNav .navbar-collapse .navbar-sidenav>.nav-item>.nav-link,
-#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a {
-	padding: 0.75em;
-}
-
-@media (min-width: 992px) {
-	#mainNav .navbar-collapse .navbar-sidenav {
-		margin-top: 46px;
-	}
-
-	#mainNav.fixed-top .navbar-sidenav {
-		height: calc(100vh - 94px)
-	}
-
-	#mainNav.fixed-top .sidenav-toggler {
-		margin-top: calc(100vh - 48px);
-	}
-
-	.content-wrapper {
-		margin-left: 245px;
-	}
-}
-
@media (max-width: 767.98px) {
 	.width-xs-sm-100 {
 		width: 100%;
 	}
 }

-body.fixed-nav {
-	padding-top: 54px;
-}
-
 html {
 	min-height: inherit;
 }
@ -463,14 +342,6 @@ html {
 	margin-left: -0.15em !important;
 }

-#mainNav .navbar-collapse .navbar-sidenav>.nav-item>.nav-link {
-	padding-right: 1.25em !important;
-}
-
-#sidebarResponsive .nav-item-sidebar {
-	line-height: 1;
-}
-
 /* Third party component customizations - Tempus Dominus */
 .bootstrap-datetimepicker-widget.dropdown-menu {
 	width: auto !important;
@ -641,10 +512,6 @@ canvas.drawingBuffer {
 		margin-left: 0;
 	}

-	body.fixed-nav {
-		padding-top: 0;
-	}
-
 	.calendar button.fc-prev-button,
 	.calendar button.fc-today-button,
 	.calendar button.fc-next-button,
--- a/public/css/grocy_menu_layout.css
+++ b/public/css/grocy_menu_layout.css
@ -0,0 +1,510 @@
+html {
+	position: relative;
+	min-height: 100%;
+}
+
+body {
+	overflow-x: hidden;
+}
+
+body.fixed-nav {
+	padding-top: 56px;
+}
+
+.content-wrapper {
+	min-height: calc(100vh - 56px);
+	padding-top: 1rem;
+}
+
+#mainNav .navbar-collapse {
+	overflow: auto;
+	max-height: 75vh;
+}
+
+#mainNav .navbar-collapse .navbar-nav .nav-item .nav-link {
+	cursor: pointer;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+	float: right;
+	content: '\f107';
+	font-family: 'Font Awesome 5 Free';
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.collapsed:after {
+	content: '\f105';
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level,
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level {
+	padding-left: 0;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level>li>a,
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level>li>a {
+	display: block;
+	padding: 0.5em 0;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level>li>a:focus,
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level>li>a:hover,
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level>li>a:focus,
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level>li>a:hover {
+	text-decoration: none;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level>li>a {
+	padding-left: 1em;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level>li>a {
+	padding-left: 2em;
+}
+
+#mainNav .navbar-collapse .sidenav-toggler {
+	display: none;
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link {
+	position: relative;
+	min-width: 45px;
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after {
+	float: right;
+	width: auto;
+	content: '\f105';
+	border: none;
+	font-family: 'Font Awesome 5 Free';
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link .indicator {
+	position: absolute;
+	top: 5px;
+	left: 21px;
+	font-size: 10px;
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown.show>.nav-link:after {
+	content: '\f107';
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu>.dropdown-item>.dropdown-message {
+	overflow: hidden;
+	max-width: none;
+	text-overflow: ellipsis;
+}
+
+@media (min-width: 992px) {
+	#mainNav .navbar-brand {
+		width: 250px;
+	}
+
+	#mainNav .navbar-collapse {
+		overflow: visible;
+		max-height: none;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav {
+		position: absolute;
+		top: 0;
+		left: 0;
+		-webkit-flex-direction: column;
+		-ms-flex-direction: column;
+		flex-direction: column;
+		margin-top: 56px;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item {
+		width: 250px;
+		padding: 0;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item>.nav-link {
+		padding: 1em;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level,
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level {
+		padding-left: 0;
+		list-style: none;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li,
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li {
+		width: 250px;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a,
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a {
+		padding: 1em;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a {
+		padding-left: 2.75em;
+	}
+
+	#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a {
+		padding-left: 3.75em;
+	}
+
+	#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link {
+		min-width: 0;
+	}
+
+	#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after {
+		width: 24px;
+		text-align: center;
+	}
+
+	#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu>.dropdown-item>.dropdown-message {
+		max-width: 300px;
+	}
+}
+
+#mainNav.fixed-top .sidenav-toggler {
+	display: none;
+}
+
+@media (min-width: 992px) {
+	#mainNav.fixed-top .navbar-sidenav {
+		height: calc(100vh - 112px);
+	}
+
+	#mainNav.fixed-top .sidenav-toggler {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		-webkit-flex-direction: column;
+		-ms-flex-direction: column;
+		flex-direction: column;
+		margin-top: calc(100vh - 56px);
+	}
+
+	#mainNav.fixed-top .sidenav-toggler>.nav-item {
+		width: 250px;
+		padding: 0;
+	}
+
+	#mainNav.fixed-top .sidenav-toggler>.nav-item>.nav-link {
+		padding: 1em;
+	}
+}
+
+#mainNav.fixed-top.navbar-dark .sidenav-toggler {
+	background-color: #212529;
+}
+
+#mainNav.fixed-top.navbar-dark .sidenav-toggler a i {
+	color: #adb5bd;
+}
+
+#mainNav.fixed-top.navbar-light .sidenav-toggler {
+	background-color: #dee2e6;
+}
+
+#mainNav.fixed-top.navbar-light .sidenav-toggler a i {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler {
+	overflow-x: hidden;
+	width: 55px;
+}
+
+body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-item,
+body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-link {
+	width: 55px !important;
+}
+
+body.sidenav-toggled #mainNav.fixed-top #sidenavToggler i {
+	-webkit-transform: scaleX(-1);
+	-moz-transform: scaleX(-1);
+	-o-transform: scaleX(-1);
+	transform: scaleX(-1);
+	filter: FlipH;
+	-ms-filter: 'FlipH';
+}
+
+.content-wrapper {
+	overflow-x: hidden;
+	background: white;
+}
+
+@media (min-width: 992px) {
+	.content-wrapper {
+		margin-left: 250px;
+	}
+}
+
+#sidenavToggler i {
+	font-weight: 800;
+}
+
+.navbar-sidenav-tooltip.show {
+	display: none;
+}
+
+@media (min-width: 992px) {
+	body.sidenav-toggled .content-wrapper {
+		margin-left: 55px;
+	}
+}
+
+body.sidenav-toggled .navbar-sidenav {
+	width: 55px;
+}
+
+body.sidenav-toggled .navbar-sidenav .nav-link-text {
+	display: none;
+}
+
+body.sidenav-toggled .navbar-sidenav .nav-item,
+body.sidenav-toggled .navbar-sidenav .nav-link {
+	width: 55px !important;
+}
+
+body.sidenav-toggled .navbar-sidenav .nav-item:after,
+body.sidenav-toggled .navbar-sidenav .nav-link:after {
+	display: none;
+}
+
+body.sidenav-toggled .navbar-sidenav .nav-item {
+	white-space: nowrap;
+}
+
+body.sidenav-toggled .navbar-sidenav-tooltip.show {
+	display: flex;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+	color: #868e96;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item>.nav-link {
+	color: #868e96;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item>.nav-link:hover {
+	color: #adb5bd;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a,
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a {
+	color: #868e96;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a:focus,
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a:hover,
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a:focus,
+#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a:hover {
+	color: #adb5bd;
+}
+
+#mainNav.navbar-dark .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after {
+	color: #adb5bd;
+}
+
+@media (min-width: 992px) {
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav {
+		background: #343a40;
+	}
+
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a {
+		color: white !important;
+		background-color: #495057;
+	}
+
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:focus,
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:hover {
+		color: white;
+	}
+
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level,
+	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level {
+		background: #343a40;
+	}
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item>.nav-link {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item>.nav-link:hover {
+	color: rgba(0, 0, 0, 0.7);
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a,
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a:focus,
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a:hover,
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a:focus,
+#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level>li>a:hover {
+	color: rgba(0, 0, 0, 0.7);
+}
+
+#mainNav.navbar-light .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 992px) {
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav {
+		background: #f8f9fa;
+	}
+
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a {
+		color: #000 !important;
+		background-color: #e9ecef;
+	}
+
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:focus,
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:hover {
+		color: #000;
+	}
+
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level,
+	#mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item .sidenav-third-level {
+		background: #f8f9fa;
+	}
+}
+
+#mainNav {
+	line-height: 1;
+	background-color: #e5e5e5 !important;
+	border-bottom: 2px solid !important;
+	border-color: #d6d6d6 !important;
+	padding-bottom: 0.3rem;
+}
+
+#mainNav .dropdown-menu {
+	line-height: 1.5;
+}
+
+.navbar-sidenav {
+	overflow-x: hidden;
+	overflow-y: overlay;
+	border-top: 2px solid !important;
+}
+
+.navbar-sidenav,
+.sidenav-second-level {
+	background-color: #e5e5e5 !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-nav .dropdown-menu {
+	background-color: #e5e5e5 !important;
+	border: 0;
+	border-radius: 0;
+}
+
+.navbar-nav .dropdown-divider,
+.nav-item-divider {
+	border-top: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.sidenav-toggler {
+	background-color: #d6d6d6 !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav>li,
+.sidenav-second-level>li {
+	transition: all 0.3s !important;
+}
+
+.navbar-sidenav>li:hover,
+.sidenav-second-level>li:hover,
+.navbar-nav .dropdown-item:hover {
+	box-shadow: inset 5px 0 0 #337ab7 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav>li>a:focus,
+.sidenav-second-level>li>a:focus,
+.navbar-nav .dropdown-item:focus {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.active-page {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.navbar-brand {
+	margin-right: 0;
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after,
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+	font-family: 'Font Awesome 5 Free';
+	font-weight: 900;
+}
+
+#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link.py-0:after,
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.py-0:after {
+	padding-top: 8px;
+}
+
+#mainNav .navbar-collapse .navbar-sidenav>.nav-item>.nav-link,
+#mainNav .navbar-collapse .navbar-sidenav>.nav-item .sidenav-second-level>li>a {
+	padding: 0.75em;
+}
+
+@media (min-width: 992px) {
+	#mainNav .navbar-collapse .navbar-sidenav {
+		margin-top: 46px;
+	}
+
+	#mainNav.fixed-top .navbar-sidenav {
+		height: calc(100vh - 94px)
+	}
+
+	#mainNav.fixed-top .sidenav-toggler {
+		margin-top: calc(100vh - 48px);
+	}
+
+	.content-wrapper {
+		margin-left: 245px;
+	}
+}
+
+#mainNav .navbar-collapse .navbar-sidenav>.nav-item>.nav-link {
+	padding-right: 1.25em !important;
+}
+
+#sidebarResponsive .nav-item-sidebar {
+	line-height: 1;
+}
+
+body.embedded.fixed-nav {
+	padding-top: 0;
+}
+
+body.fixed-nav {
+	padding-top: 54px;
+}
+
+/* Fixes smooth scrolling on iOS */
+#sidebarResponsive,
+.fullscreen {
+	-webkit-overflow-scrolling: touch;
+}
+
+@media print {
+	body.fixed-nav {
+		padding-top: 0;
+	}
+}
--- a/public/js/grocy.js
+++ b/public/js/grocy.js
@ -789,6 +789,9 @@ $(document).on("click", ".show-as-dialog-link", function(e)
 	});
 });

+// Init Bootstrap tooltips
+$('[data-toggle="tooltip"]').tooltip()
+
 // Default DataTables initialisation settings
 var collapsedGroups = {};
 $.extend(true, $.fn.dataTable.defaults, {
--- a/public/js/grocy_menu_layout.js
+++ b/public/js/grocy_menu_layout.js
@ -0,0 +1,19 @@
+$('.navbar-sidenav [data-toggle="tooltip"]').tooltip({
+	template: '<div class="tooltip navbar-sidenav-tooltip" role="tooltip" style="pointer-events: none;"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
+})
+
+$("#sidenavToggler").click(function(e)
+{
+	e.preventDefault();
+	$("body").toggleClass("sidenav-toggled");
+	$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
+	$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
+});
+
+$(".navbar-sidenav .nav-link-collapse").click(function(e)
+{
+	e.preventDefault();
+	$("body").removeClass("sidenav-toggled");
+});
+
+
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@ -42,8 +42,6 @@
 	<title>@yield('title') | grocy</title>
 	<link href="{{ $U('/node_modules/bootstrap/dist/css/bootstrap.min.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
-	<link href="{{ $U('/node_modules/startbootstrap-sb-admin/css/sb-admin.min.css?v=', true) }}{{ $version }}"
-		rel="stylesheet">
 	<link href="{{ $U('/node_modules/@fortawesome/fontawesome-free/css/all.min.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}"
@ -66,6 +64,8 @@
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/@fontsource/noto-sans/latin.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
+	<link href="{{ $U('/css/grocy_menu_layout.css?v=', true) }}{{ $version }}"
+		rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">

@ -701,7 +701,6 @@

 	<script src="{{ $U('/node_modules/jquery/dist/jquery.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/startbootstrap-sb-admin/js/sb-admin.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/bootbox/dist/bootbox.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/jquery-serializejson/jquery.serializejson.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/moment/min/moment.min.js?v=', true) }}{{ $version }}"></script>
@ -729,6 +728,7 @@
 	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>

 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy_menu_layout.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_wakelockhandling.js?v=', true) }}{{ $version }}"></script>
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@ -10,6 +10,24 @@
 		max-height: 250px !important;
 		object-fit: cover !important;
 	}
+
+	@media (min-width: 576px) {
+		.card-columns {
+			column-count: 1;
+		}
+	}
+
+	@media (min-width: 768px) {
+		.card-columns {
+			column-count: 2;
+		}
+	}
+
+	@media (min-width: 1200px) {
+		.card-columns {
+			column-count: 2;
+		}
+	}
 </style>
@endpush

--- a/yarn.lock
+++ b/yarn.lock
@ -97,11 +97,6 @@ bootstrap-select@^1.13.18:
  resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.18.tgz#4557119d58dc1159189977161c803962220e4dda"
  integrity sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==

-bootstrap@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
-  integrity sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==
-
 bootstrap@^4.5.2, bootstrap@^4.6.1:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
@ -117,14 +112,6 @@ caseless@~0.12.0:
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==

-chart.js@2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.1.tgz#ae90b4aa4ff1f02decd6b1a2a8dabfd73c9f9886"
-  integrity sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==
-  dependencies:
-    chartjs-color "~2.2.0"
-    moment "~2.18.0"
-
 chart.js@^2.8.0:
  version "2.9.4"
  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
@ -133,13 +120,6 @@ chart.js@^2.8.0:
    chartjs-color "^2.1.0"
    moment "^2.10.2"

-chartjs-color-string@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
-  integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
-  dependencies:
-    color-name "^1.0.0"
-
 chartjs-color-string@^0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
@ -155,14 +135,6 @@ chartjs-color@^2.1.0:
    chartjs-color-string "^0.6.0"
    color-convert "^1.9.3"

-chartjs-color@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
-  integrity sha512-lmrNe4fRXbMK+9Iwuhx+pH686RGZZRZKJuJ5xUctCqtRDgoluqxEe3TiDstWfuppDt1LTSEMR6bU4xW5IYdwNA==
-  dependencies:
-    chartjs-color-string "^0.5.0"
-    color-convert "^0.5.3"
-
 chartjs-plugin-colorschemes@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/chartjs-plugin-colorschemes/-/chartjs-plugin-colorschemes-0.4.0.tgz#7a310c32411ef0b5135df1f47da4d379e22220f7"
@ -178,11 +150,6 @@ chartjs-plugin-piechart-outlabels@^0.1.4:
  resolved "https://registry.yarnpkg.com/chartjs-plugin-piechart-outlabels/-/chartjs-plugin-piechart-outlabels-0.1.4.tgz#e97e19a12202d74f9040d9e4641987c9d1e458fc"
  integrity sha512-IaYkh6ab8nLAvgioQ+BwU0awfMbxwmfO2AeBL+S45VVx9AdObovr9+aE+ShUO2Og96y6eJpCxZGJr4zXB7YnRw==

-color-convert@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-  integrity sha512-RwBeO/B/vZR3dfKL1ye/vx8MHZ40ugzpyfeVG5GsiuGnrlMWe2o8wxBbLCpw9CsxV+wHuzYlCiWnybrIA0ling==
-
 color-convert@^1.9.3:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -236,14 +203,6 @@ data-uri-to-buffer@0.0.3:
  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-0.0.3.tgz#18ae979a6a0ca994b0625853916d2662bbae0b1a"
  integrity sha512-Cp+jOa8QJef5nXS5hU7M1DWzXPEIoVR3kbV0dQuVGwROZg8bGf1DcCnkmajBTnvghTtSNMUdRrPjgaT6ZQucbw==

-datatables.net-bs4@1.10.16:
-  version "1.10.16"
-  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.16.tgz#9eee67cfa8565bd3807a603a188305f7d0e20e32"
-  integrity sha512-GpLP7BfpKpBU76z61z4Aw0+7hK49q+cYCPv/gnaFDC21jMFf0gYxYHOTG5v/1Vzf2wyiDduBaULeM0YuipyhLg==
-  dependencies:
-    datatables.net "1.10.16"
-    jquery ">=1.7"
-
 datatables.net-bs4@>=1.12.1, datatables.net-bs4@^1.10.22:
  version "1.13.2"
  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.13.2.tgz#681b77d5dfd755019dd1266aa8fa69ca2c2513b7"
@ -308,13 +267,6 @@ datatables.net-select@>=1.4.0, datatables.net-select@^1.3.1:
    datatables.net ">=1.12.1"
    jquery ">=1.7"

-datatables.net@1.10.16:
-  version "1.10.16"
-  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.16.tgz#4b052d1082824261b68eed9d22741b711d3d2469"
-  integrity sha512-ydkKfwsraKsikmgGaatw7qqIigJlwLLgMNNzF46JN0+CSxMRKkLJgF5+vKe3MHBsB1Fp/+fgPOGWiUmJVAh8IQ==
-  dependencies:
-    jquery ">=1.7"
-
 datatables.net@>=1.12.1, datatables.net@^1.10.22:
  version "1.13.2"
  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.13.2.tgz#48f7035b1696a29cb70909db1f2e0ebd5f946f3e"
@ -368,11 +320,6 @@ fast-json-stable-stringify@^2.0.0:
  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==

-font-awesome@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-  integrity sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
-
 forever-agent@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@ -492,16 +439,6 @@ jquery-serializejson@^2.9.0:
  resolved "https://registry.yarnpkg.com/jquery-serializejson/-/jquery-serializejson-2.9.0.tgz#03e3764e3a4b42c1c5aae9f93d7f19320c5f35a6"
  integrity sha512-xR7rjl0tRKIVioV5lOkOSv7K8BHMvGzYzC7Ech1iAYuZiYf0ksEpLC8OqjA5VApXf/qn/49O9hTmW70+/EA0vA==

-jquery.easing@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jquery.easing/-/jquery.easing-1.4.1.tgz#47982c5836bd758fd48494923c4a101ef6e93e3b"
-  integrity sha512-BVpRacWCbNfo/ALWxnLkIY/WRa4Ydg/LtwzIJZvDm7vrhV8Txv+ACi6EGnU11zT19sTc3KEPathWx6CtjWLD1w==
-
-jquery@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
-  integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
-
 jquery@>=1.10:
  version "3.6.4"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
@ -571,11 +508,6 @@ moment-timezone@^0.5.34:
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==

-moment@~2.18.0:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
-  integrity sha512-QGcnVKRSEhbWy2i0pqFhjWMCczL/YU5ICMB3maUavFcyUqBszRnzsswvOaGOqSfWZ/R+dMnb9gGBuRT4LMTdVQ==
-
 ndarray-linear-interpolate@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/ndarray-linear-interpolate/-/ndarray-linear-interpolate-1.0.0.tgz#78bc92b85b9abc15b6e67ee65828f9e2137ae72b"
@ -715,18 +647,6 @@ sshpk@^1.7.0:
    safer-buffer "^2.0.2"
    tweetnacl "~0.14.0"

-startbootstrap-sb-admin@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/startbootstrap-sb-admin/-/startbootstrap-sb-admin-4.0.0.tgz#cf141a260d031b36bdc013c68200a1c1ea6c9881"
-  integrity sha512-qnIu5fcjAb288+MgeaOBnZ93eq4lXb3cpUgbqGUVG2afDRFgsIX0ii3BgbWHrQ7jYZRYADEKWe580F8uUpIAHg==
-  dependencies:
-    bootstrap "4.0.0"
-    chart.js "2.7.1"
-    datatables.net-bs4 "1.10.16"
-    font-awesome "4.7.0"
-    jquery "3.3.1"
-    jquery.easing "^1.4.1"
-
 summernote@^0.8.18:
  version "0.8.20"
  resolved "https://registry.yarnpkg.com/summernote/-/summernote-0.8.20.tgz#395905f2cec0aceebc712edc019d91b8ef88f7cf"