Fixed responsive stlying

composables/windowDimensions.ts

@@ -19,6 +19,16 @@ const enum ViewPortType {
     MOBILE,
 }
 
+/**
+ * Enums for viewport orientation
+ * @readonly
+ * @enum {number}
+ */
+const enum ViewPortOrientation {
+    LANDSCAPE,
+    PORTRAIT,
+}
+
 /**
  * Vue Composable for getting window dimensions and viewport type based on width
  * @returns {object} returns the references of width, height, and viewport type
@@ -27,10 +37,15 @@ function useWindowDimensions() {
     const width = ref<number>(0);
     const height = ref<number>(0);
     const viewPortType = ref<ViewPortType>(ViewPortType.DESKTOP);
+    const viewPortOrientation = ref<ViewPortOrientation>(
+        ViewPortOrientation.LANDSCAPE
+    );
 
-    function update(event: Event | undefined) {
+    function update() {
         width.value = window.innerWidth;
         height.value = window.innerHeight;
+        viewPortOrientation.value = (width.value <
+            height.value) as unknown as number;
         if (width.value > largeTabletMaxWidth) {
             viewPortType.value = ViewPortType.DESKTOP;
         } else if (width.value > mediumTabletMaxWidth) {
@@ -43,13 +58,13 @@ function useWindowDimensions() {
     }
 
     onMounted(() => {
-        update(undefined);
+        update();
         window.addEventListener("resize", update);
     });
 
     onUnmounted(() => window.removeEventListener("resize", update));
 
-    return { width, height, viewPortType };
+    return { width, height, viewPortType, viewPortOrientation };
 }
 
-export { useWindowDimensions, ViewPortType };
+export { useWindowDimensions, ViewPortType, ViewPortOrientation };