Adding Landscape Lock

package.json

@@ -12,7 +12,7 @@
         "postinstall": "husky install"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.4",
+        "@fortawesome/fontawesome-free": "^6.5.1",
         "@mdi/font": "5.9.55",
         "@tiptap/core": "^2.0.3",
         "@tiptap/extension-character-count": "^2.0.3",

src/components/Extra.vue

@@ -13,7 +13,15 @@
     <!-- Circuit Elements Panel -->
     <ElementsPanel />
     <!-- --------------------------------------------------------------------------------------------- -->
-
+    <!-- Lock of Portait Mode -->
+    <div id="potraidLockBg"></div>
+    <div id="lockPortaidMode">
+        <span class="portaidIcon"> </span>
+        <span id="portaidModeText"
+            >Please switch to the landscape mode and refresh to access the
+            simulator</span
+        >
+    </div>
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Layout Element Panel -->
     <div
@@ -321,3 +329,74 @@ import InsertSubcircuit from './DialogBox/InsertSubcircuit.vue'
 import OpenOffline from './DialogBox/OpenOffline.vue'
 import ReportIssue from './ReportIssue/ReportIssue.vue'
 </script>
+
+<style>
+
+#potraidLockBg {
+    display: none;
+}
+
+#lockPortaidMode {
+    display: none;
+}
+
+@media screen and (orientation: portrait) and (max-device-width: 1024px){
+    #potraidLockBg {
+        display: flex;
+        position: absolute;
+        background-color: rgb(0, 0, 0);
+        width: 100%;
+        height: 100%;
+        opacity: 70%;
+        z-index: 1000;
+    }
+
+    #lockPortaidMode {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-grow: 1;
+        position: fixed;
+        z-index: 1000;
+        height: 450px;
+        width: 600px;
+        top: 30%;
+        right: 20%;
+        border-radius: 20px;
+    }
+
+     .portaidIcon {
+        background: url(../assets/img/PortraidMode.svg) center/cover no-repeat;
+        display: block;
+        font-size: 210px;
+        padding-top: 50px;
+        padding-right: 10px;
+        height: 150px;
+        width: 250px;
+    }
+
+    #portaidModeText {
+        color: white;
+        font-size: 35px;
+        padding-left: 20px;
+        padding-right: 10px;
+        padding-top: 40px;
+        overflow: hidden;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .ce-panel {
+        display: none;
+    }
+    .properties-panel {
+        visibility: hidden;
+    }
+    .timing-diagram-panel {
+        display: none;
+    }
+}
+
+
+
+</style>

src/components/MessageBox/messageBox.vue

@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
 import BooleanTable from '@/DialogBox/BooleanTable.vue'
-import { defineProps, defineEmits } from 'vue'
+// import { defineProps, defineEmits } from 'vue'
 
 defineEmits(['buttonClick'])
 

src/components/Navbar/Hamburger/Hamburger.vue

@@ -16,5 +16,6 @@
 <script lang="ts" setup></script>
 
 <style>
-@import url('./Hamburger.css');
+/* Commenting since ./Hamburger.css file is empty its showing errors in the console */
+/* @import url('./Hamburger.css'); */
 </style>

src/components/ReportIssue/ReportIssueButton.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineEmits } from 'vue'
+// import { defineEmits } from 'vue'
 
 const emit = defineEmits(['openReportModal'])