migrate navbar to use UI library (#430)

Signed-off-by: rahulsh18 <[email protected]>

Signed-off-by: rahulsh18 <[email protected]>

flint.ui/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@moja-global/mojaglobal-ui": "^0.1.0",
+    "@moja-global/mojaglobal-ui": "^0.1.1",
     "@popperjs/core": "2.9.3",
     "@stencil/core": "^2.15.0",
     "@tailwindcss/forms": "0.3.3",
@@ -84,7 +84,7 @@
     "postcss-loader": "^7.0.0",
     "prettier": "2.3.2",
     "sass": "^1.42.1",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^10.1.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "vue-eslint-parser": "^7.10.0",
     "vue-loader": "^15.9.8"

flint.ui/src/components/Navbars/LandingPageNavbar.vue

@@ -1,122 +1,78 @@
 <template>
   <div>
-    <a-layout>
-      <a-row class="navbar" type="flex" align="middle">
-        <a-col :flex="5" class="logo">
-          <a href="/">
-            <img src="/moja_global_logo.png" alt="moja global logo" height="40" width="57" />
-          </a>
-        </a-col>
-        <a-col :flex="3" align="middle">
-          <a-row :gutter="40" justify="center" type="flex">
-            <a-col>
-              <a href="https://docs.moja.global/en/master/" target="_blank" rel="noreferrer noopener">
-                Documentation
-              </a>
-            </a-col>
-            <a-col>
-              <a href="https://github.com/moja-global/FLINT-UI" target="_blank" rel="noreferrer noopener">Github </a>
-            </a-col>
-            <a-col> <a href="mailto:[email protected]" target="_blank" rel="noreferrer noopener">Contact Us </a> </a-col>
-          </a-row>
-        </a-col>
-      </a-row>
-      <a-row class="navbar navbar-mobile">
-        <a-col>
-          <a-row type="flex" justify="space-between">
-            <a-col class="logo"
-              ><img src="/moja_global_logo.png" alt="moja global logo" height="40" width="57"
-            /></a-col>
-            <a-col>
-              <MenuOutlined v-if="!showMenu" type="menu" @click="toggleNavbar()" />
-              <CloseOutlined v-if="showMenu" type="close" @click="toggleNavbar()" />
-            </a-col>
-          </a-row>
-        </a-col>
-        <a-col v-if="showMenu">
-          <a-row type="flex" justify="space-between" class="menu-mobile">
-            <a-col>
-              <a href="https://docs.moja.global/projects/flint-ui/en/latest/" target="_blank" rel="noreferrer noopener"
-                >Documentation
-              </a>
-            </a-col>
-            <a-col>
-              <a href="https://github.com/moja-global/FLINT-UI" target="_blank" rel="noreferrer noopener">Github </a>
-            </a-col>
-            <a-col> <a href="mailto:[email protected]" target="_blank" rel="noreferrer noopener">Contact Us </a> </a-col>
-          </a-row>
-        </a-col>
-      </a-row>
-    </a-layout>
+    <div class="nav-menu">
+      <div class="nav-content" :class="this.showMenu ? 'open-menu' : 'closed-menu'">
+        <NavbarComponent imageSrc="https://community.moja.global/img/logo-light.png">
+          <li>
+            <a
+              href="https://docs.moja.global/en/master/"
+              style="color: white; padding-left: 1%"
+              target="_blank"
+              rel="noreferrer noopener"
+              >Documentation</a
+            >
+          </li>
+          <li>
+            <a
+              href="mailto:[email protected]"
+              style="color: white; padding-left: 1%"
+              target="_blank"
+              rel="noreferrer noopener"
+              >Contact Us</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/moja-global/FLINT-UI"
+              style="color: white; padding-left: 1%"
+              target="_blank"
+              rel="noreferrer noopener"
+              >GitHub</a
+            >
+          </li>
+        </NavbarComponent>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { MenuOutlined, CloseOutlined } from '@ant-design/icons-vue'
+import { NavbarComponent } from '@moja-global/mojaglobal-ui'
 import { ref } from 'vue'
 
 export default {
   name: 'LandingPageNavbar',
   components: {
-    MenuOutlined,
-    CloseOutlined
+    NavbarComponent
   },
   setup() {
     const showMenu = ref(false)
 
-    function toggleNavbar() {
-      showMenu.value = !showMenu.value
-    }
-
-    return { showMenu, toggleNavbar }
+    return { showMenu }
   }
 }
 </script>
 
-<style scoped>
-.navbar {
-  padding: 1.2rem 1.4rem;
-  background: white;
-  font-size: 1.1rem;
-  color: #475447;
-}
-
-.navbar a:hover {
-  border-bottom: solid 2px #475447;
-}
-
-.navbar a {
-  color: #475447;
-}
-
-.logo {
-  margin-left: 4rem;
-}
-
-.navbar-mobile {
-  display: none;
-}
-
-.anticon {
-  margin: 20px;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-.menu-mobile {
-  margin: 1rem 4rem;
-}
-
-.menu-mobile .ant-col {
-  margin: 1rem 0;
-}
-
-@media only screen and (max-width: 768px) {
-  .navbar {
-    display: none;
+<style lang="scss" scoped>
+@media screen and (max-width: 768px) {
+  .nav-menu {
+    padding-top: 0px;
+    position: absolute;
+    width: 100%;
+  }
+  .open-menu {
+    opacity: 1;
+    height: 100px;
+  }
+  .closed-menu {
+    opacity: 1;
+    height: 0;
+    padding: 0;
   }
-  .navbar-mobile {
-    display: block;
+  .nav-content {
+    flex-direction: column;
+    z-index: 100;
+    position: relative;
   }
 }
 </style>