Merge branch 'dev'

Author: fadelun

src/App.vue

@@ -1,11 +1,18 @@
 <template>
   <!-- portfolio vue x scss -->
 
-  <MyHeader />
+  <MyHeader ref="header" />
   <MyMain :scrollValue="scrollValue" />
+  <!-- <button id="myButton" ref="myButton">button</button> -->
 
   <footer>
-    <p>Built by Muhammad ©2023</p>
+    <p>
+      {{
+        store.lang != "AR"
+          ? "Built by Muhammad Fadll ©2023"
+          : "بناه محمد فضل ©2023"
+      }}
+    </p>
   </footer>
 </template>
 
@@ -29,6 +36,7 @@ export default {
   created() {
     window.addEventListener("scroll", this.scroll);
   },
+
   methods: {
     scroll() {
       this.scrollValue = window.pageYOffset;
@@ -105,8 +113,6 @@ h4 {
   &.AR-lang {
     // font untuk bahasa arab
     font-family: "Droid Arabic Naskh", sans-serif !important;
-    text-align: right;
-    flex-direction: row-reverse;
   }
 
   footer {

src/components/MyNavbar.vue

@@ -138,9 +138,14 @@ export default {
     "store.lang"(newValue) {
       // jika store.lang berupa "AR" maka ubah font tersebut ke "Droid Arabic Naskh"
       const app = document.getElementById("app");
-      newValue == "AR"
-        ? app.classList.add("AR-lang")
-        : app.classList.remove("AR-lang");
+      const root = document.querySelector("html");
+      if (newValue == "AR") {
+        app.classList.add("AR-lang");
+        root.setAttribute("dir", "rtl");
+      } else {
+        app.classList.remove("AR-lang");
+        root.removeAttribute("dir");
+      }
     },
   },
 };
@@ -162,6 +167,7 @@ header {
     z-index: 999;
 
     .main-logo {
+      flex-grow: 2;
       .img-logo {
         width: 96px;
       }
@@ -246,40 +252,37 @@ header {
         }
       }
     }
-    .select {
-      flex-grow: 2;
-      select {
-        // remove arrow select
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        //
+    .select select {
+      // remove arrow select
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      //
 
-        padding: 0.4rem 0.8rem;
-        font-size: inherit;
-        font-family: inherit;
-        border: transparent;
-        color: $white;
-        background-color: $secondary;
+      padding: 0.4rem 0.8rem;
+      font-size: inherit;
+      font-family: inherit;
+      border: transparent;
+      color: $white;
+      background-color: $secondary;
 
-        &:focus {
-          color: $primary;
-
-          option {
-            color: $white;
-          }
-        }
+      &:focus {
+        color: $primary;
 
         option {
-          background-color: $secondary;
+          color: $white;
         }
       }
+
+      option {
+        background-color: $secondary;
+      }
     }
   }
 
   @media (min-width: 768px) {
     .navbar {
       .main-logo {
-        // flex-grow: 0;
+        flex-grow: 0;
       }
 
       .button-bars {
@@ -288,9 +291,6 @@ header {
       nav.navbar-header {
         display: block;
       }
-      .select {
-        flex-grow: 0;
-      }
     }
   }
 }

src/components/MyProject.vue

@@ -179,6 +179,9 @@ export default {
             margin: 0 4px 0;
           }
         }
+        .desc {
+          padding-top: 2rem;
+        }
         .project-buttons {
           display: flex;
           column-gap: 6px;
@@ -247,9 +250,6 @@ export default {
           .project-meta-stack p {
             font-size: 0.8rem;
           }
-          .desc {
-            padding-top: 2rem;
-          }
         }
       }
     }

src/view/MyHeader.vue

@@ -57,7 +57,7 @@
     <div id="banner">
       <h1 class="personal-intro">
         <span class="greeting"
-          >{{ store.lang != "AR" ? "Hi im" : "مرحباً" }}
+          >{{ store.lang != "AR" ? "Hi im" : "مرحباً أنا" }}
         </span>
         <span class="main-name"
           >{{ store.lang != "AR" ? "Muhammad Fadll" : "محمد فضل" }} </span