diff --git a/src/css/menustyle.css b/src/css/menustyle.css
deleted file mode 100755
index ee43259..0000000
--- a/src/css/menustyle.css
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
-*
-* janishutz.com - menustyle.css
-*
-*
-* Created 2023 by Janis Hutz
-*/
-
-::selection {
- background-color: darkblue;
- color: white;
-}
-
-.Menu {
- font-size: 0.8rem;
- margin-top: -1%;
- padding: 2%;
- padding-left: 0;
- padding-right: 0;
- width: 100%;
- overflow: hidden;
- background-color: rgba(56, 68, 77, 1);
-}
-
-.logo {
- height: 10vh;
- display: inline-block;
- margin-left: 2%;
- position: relative;
- vertical-align: middle;
-}
-
-.menu-container {
- display: none;
- width: 80%;
-}
-
-.active {
- color: rgba(184, 214, 240, 1);
-}
-
-.listtoggle {
- text-decoration: none;
- color: black;
- font-size: 2.5rem;
- margin-right: 7%;
- cursor: pointer;
-}
-
-.toggle-wrapper {
- display: inline-flex;
- height: 100%;
- width: 70%;
- align-items: center;
- justify-content: flex-end;
-}
-
-.menu-container, .dropdown-menu {
- list-style: none;
- margin: 0 5%;
- padding: 0;
-}
-
-.menubutton {
- text-decoration: none;
- width: 96%;
- display: block;
- padding: 2%;
- color: white;
- transition: 0.6s;
-}
-
-.menubutton:hover {
- background-color: darkblue;
- transition: 0.2s;
-}
-
-.sub {
- width: 96%;
-}
-
-.dropdown-menu {
- width: 95%;
-}
-
-@media only screen and (min-width: 999px) {
- .listtoggle, .toggle-wrapper {
- display: none;
- }
-
- .menu-wrapper {
- display: inline-block;
- }
-
- .menu-container {
- display: inline-flex;
- list-style-type: none;
- width: 80%;
- margin: 0;
- justify-content: center;
- }
-
- .menubutton {
- text-decoration: none;
- display: inline-block;
- padding: 20px;
- width: inherit;
- color: white;
- border-radius: 0%;
- background-color: rgba(0,0,0,0);
- transition: 0.6s;
- }
-
- .sub {
- width: 92%;
- padding: 20px 4%;
- }
-
- .menubutton:hover {
- border-radius: 0%;
- background-color: darkblue;
- transition: 0.3s;
- }
-
- .dropdown-menu {
- margin: 0;
- padding: 0;
- width: fit-content;
- background-color: lightseagreen;
- display: none;
- list-style-type: none;
- position: absolute;
- min-width: 200px;
- transform-origin: top center;
- flex-direction: column;
- }
-
- @keyframes growDown {
- 0% {
- transform: scaleY(0);
- }
- 100% {
- transform: scaleY(1);
- }
- }
-
- .dropdown:hover .dropdown-menu {
- display: flex;
- animation: growDown 0.3s ease-in-out;
- }
-
- .mainitems {
- display: inline-block;
- }
-}
diff --git a/src/css/nav/menu.css b/src/css/nav/menu.css
index 9183d23..76718a1 100644
--- a/src/css/nav/menu.css
+++ b/src/css/nav/menu.css
@@ -59,7 +59,7 @@
/* TODO: Make multiple steps for this
*/
-.menu-cateogry-active {
+.menu-category-active {
padding-right: 20vw !important;
transition-delay: 0s;
}
diff --git a/src/js/support.js b/src/js/support.js
new file mode 100644
index 0000000..0c7052a
--- /dev/null
+++ b/src/js/support.js
@@ -0,0 +1,194 @@
+const { createApp } = Vue;
+
+createApp( {
+ data() {
+ return {
+ products: {
+ 'sm': {
+ 'id': 'sm',
+ 'name': 'StorageManager',
+ 'supportOptions': {
+ 'no-scan': {
+ 'id': 'no-scan',
+ 'name': 'Scanning not working',
+ 'display': 'Please ensure that the barcode is not too far away (up to roughly four meters should work fine), that it is a barcode and that the surface the code is on is entirely visible and not wrinkled in any shape or form. If it still does not work, contact me below.',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ },
+ 'contact': {
+ 'id': 'contact',
+ 'name': 'Problem not in this list',
+ 'display': 'Please use the contact form and include as much information as possible',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ }
+ }
+ },
+ 'qr': {
+ 'id': 'qr',
+ 'name': 'QR & Barcode Insight',
+ 'supportOptions': {
+ 'history': {
+ 'id': 'history',
+ 'name': 'History missing',
+ 'display': 'In the settings tab, under History Settings, ensure that history is enabled! If your issue is regarding only a few entries being kept, please, in the same page, check if there is history size limit set and if so, consider increasing or removing it. If it still does not work, contact me below',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ },
+ 'no-scan': {
+ 'id': 'no-scan',
+ 'name': 'Scanning not working',
+ 'display': 'Please ensure that the code is not too far away (up to roughly four meters should work fine) and that the surface the code is on is entirely visible and not wrinkled in any shape or form. If it still does not work, contact me below.',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ },
+ 'contact': {
+ 'id': 'contact',
+ 'name': 'Problem not in this list',
+ 'display': 'Please use the contact form and include as much information as possible',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ }
+ }
+ },
+ 'smuL': {
+ 'id': 'smuL',
+ 'name': 'SimpleMediaUpscalerLite',
+ 'supportOptions': {
+ 'gh': {
+ 'id': 'gh',
+ 'name': 'Any problem',
+ 'display': 'Please head to GitHub and open an issue',
+ 'action': {
+ 'type': 'link',
+ 'href': 'https://github.com/simplePCBuilding/SimpleMediaUpscalerLite/issues/new',
+ 'display': 'Open an Issue'
+ }
+ }
+ }
+ },
+ 'le': {
+ 'id': 'le',
+ 'name': 'libreevent',
+ 'supportOptions': {
+ 'gh': {
+ 'id': 'gh',
+ 'name': 'Any problem',
+ 'display': 'Please head to GitHub and open an issue',
+ 'action': {
+ 'type': 'link',
+ 'href': 'https://github.com/simplePCBuilding/libreevent/issues/new',
+ 'display': 'Open an Issue'
+ }
+ }
+ }
+ },
+ 'mp': {
+ 'id': 'mp',
+ 'name': 'MusicPlayer',
+ 'supportOptions': {
+ 'not-ready': {
+ 'id': 'not-ready',
+ 'name': 'Not working',
+ 'display': 'MusicPlayer Version 2.0 is not yet completed. Version 1 will not receive any more updates and is deprecated',
+ 'action': {
+ 'type': 'link',
+ 'href': 'https://github.com/simplePCBuilding/MusicPlayerV2',
+ 'display': 'GitHub'
+ }
+ }
+ }
+ },
+ 'bga': {
+ 'id': 'bga',
+ 'name': 'BiogasControllerApp',
+ 'supportOptions': {
+ 'warning': {
+ 'id': 'warning',
+ 'name': 'Windows app warning',
+ 'display': 'As this app is not digitally signed, Windows will warn you about running the app. The app is totally safe, so you can allow it to run. If it does not work, consider downloading the app, installing python with all necessary dependencies (see link below) and running it that way.',
+ 'action': {
+ 'type': 'link',
+ 'href': 'https://github.com/simplePCBuilding/BiogasControllerApp/wiki/Install-and-run-the-program#download-dev-versions-if-you-run-into-a-bug-then-this-may-help',
+ 'display': 'Contact'
+ }
+ },
+ 'errconn': {
+ 'id': 'errconn',
+ 'name': 'Connection error',
+ 'display': 'Please first follow the steps the app gives you when you press the details button on the error message. If these steps do not work, please head to our wiki where things are explained in a more detailed manner. If these steps also do not help, please contact me using the contact form!',
+ 'action': {
+ 'type': 'link',
+ 'href': 'https://github.com/simplePCBuilding/BiogasControllerApp/wiki/Connect-a-Microcontroller',
+ 'display': 'Wiki'
+ }
+ },
+ 'contact': {
+ 'id': 'contact',
+ 'name': 'Problem not in this list',
+ 'display': 'Please use the contact form and include as much information as possible',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact me'
+ }
+ }
+ }
+ },
+ 'other': {
+ 'id': 'other',
+ 'name': 'Other',
+ 'supportOptions': {
+ 'contact': {
+ 'id': 'contact',
+ 'name': 'Contact me',
+ 'display': 'Please contact me using the contact form, include the name of the software you have problems with and as much information as possible on the isse.',
+ 'action': {
+ 'type': 'link',
+ 'href': '/support/contact',
+ 'display': 'Contact'
+ }
+ }
+ }
+ }
+ },
+ selectedProduct: 'sm',
+ };
+ },
+ methods: {
+ closePopup() {
+ $( '#popup' ).fadeOut( 500 );
+ $( 'body' ).removeClass( 'menuOpen' );
+ },
+ openPopup ( product ) {
+ $( '#popup' ).fadeIn( 500 );
+ $( 'body' ).addClass( 'menuOpen' );
+ this.selectedProduct = product;
+ },
+ toggleSupportOption ( option ) {
+ for ( let action in this.products[ this.selectedProduct ][ 'supportOptions' ] ) {
+ if ( action !== option ) {
+ $( '#' + action + '-container' ).removeClass( 'open' );
+ $( '#' + action ).fadeOut( 100 );
+ }
+ }
+ $( '#' + option + '-container' ).toggleClass( 'open' );
+ $( '#' + option ).fadeToggle( 100 );
+ }
+ },
+} ).mount( '#support-app' );
diff --git a/src/menu.html b/src/menu.html
index bc3134e..af0ad33 100644
--- a/src/menu.html
+++ b/src/menu.html
@@ -76,9 +76,17 @@
+
@@ -25,9 +99,29 @@
First off all, I want to apologise for any inconvenience that arose due to a problem with any of my software.
Please choose the app you have problems with below:
- Work in progress. Please use Contact if you have any questions regarding my software or any kind of problems
+
+
{{ product.name }}
+
+
+