[Ember-Migration] Created a navbar (Real-Dev-Squad#325)

* Created a navbar

* minor refactoring and fixes

* resolved over simplications and minor fixes

app/adapters/application.js

@@ -0,0 +1,15 @@
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
+import ENV from 'website-www/config/environment';
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  host = ENV.BASE_API_URL;
+
+  ajaxOptions() {
+    const options = super.ajaxOptions(...arguments);
+    options.credentials = 'include';
+    return options;
+  }
+
+  buildURL(...args) {
+    return `${super.buildURL(...args)}`;
+  }
+}

app/components/navbar.hbs

@@ -0,0 +1,56 @@
+<nav class='nav'>
+  <button type='button' class='hamburger--toggle' {{on 'click' this.toggleNavbar}}>
+    <FaIcon @icon='bars' @size='2x' />
+  </button>
+
+  <ul class='nav__menu {{if this.isNavOpen "active" ""}}'>
+    <li>
+      <a href={{this.HOME_PAGE_URL}} class='nav__home'>
+        <img class='nav__home__img' src='assets/images/rds-logo.png' alt='Real_Dev_Squad' />
+      </a>
+    </li>
+    <li>
+      <a class='nav__home__link nav__element' href={{this.HOME_URL}}>
+        Home
+      </a>
+    </li>
+    <li><a class='nav__element' href={{this.WELCOME_URL}}>Welcome</a></li>
+    <li><a class='nav__element' href={{this.EVENTS_URL}}>Events</a></li>
+    <li><a class='nav__element' href={{this.MEMBERS_URL}}>Members</a></li>
+    <li><a class='nav__element' href={{this.CRYPTO_URL}}>Crypto</a></li>
+    <li><a class='nav__element' href={{this.STATUS_URL}}>Status</a></li>
+  </ul>
+
+  <div class='nav__login'>
+    {{#if @isLoggedIn }}
+    <div class='nav__user' role="button" class="user" {{on "click" this.toggleMenu}} {{on-click-outside
+      this.outsideClickMenu}}>
+      <div class='user__msg'>Hello, {{@firstName}}</div>
+      <img class='user__pic' src={{@profilePicture}} />
+      <Fa-Icon @icon='chevron-down' />
+    </div>
+    {{else}}
+    <a class='login' href={{this.AUTH_URL}}>
+      <button class='login__btn' type="button">
+        <span class='login__signin'>Sign In</span>
+        <span class='login__github'>with GitHub</span>
+        <img 
+          class='login__logo' 
+          src='assets/icons/github-logo.png' 
+          alt='GitHub_Icon' 
+          height='20px' 
+          width='20px' 
+        />
+      </button>
+    </a>
+    {{/if}}
+  </div>
+
+  <section class="menu {{if this.isMenuOpen " active-menu" "" }}">
+    <a href={{this.PROFILE_URL}} class="menu__link">
+      My Profile
+    </a>
+    <hr />
+    <div role="button" class="menu__link" {{on "click" (fn @signOut)}}>Sign Out</div>
+  </section>
+</nav>

app/components/navbar.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { APPS, AUTH } from '../constants/urls';
+
+export default class NavbarComponent extends Component {
+  @tracked isNavOpen = false;
+  @tracked isMenuOpen = false;
+
+  AUTH_URL = AUTH.SIGN_IN;
+  HOME_URL = APPS.HOME;
+  WELCOME_URL = APPS.WELCOME;
+  EVENTS_URL = APPS.EVENTS;
+  MEMBERS_URL = APPS.MEMBERS;
+  CRYPTO_URL = APPS.CRYPTO;
+  STATUS_URL = APPS.STATUS;
+  PROFILE_URL = APPS.PROFILE;
+
+  @action toggleNavbar() {
+    this.isNavOpen = !this.isNavOpen;
+  }
+
+  @action toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  @action outsideClickMenu() {
+    this.isMenuOpen = false;
+  }
+}

app/constants/urls.js

@@ -0,0 +1,14 @@
+export const APPS = {
+  HOME: 'http://realdevsquad.com/',
+  WELCOME: 'https://welcome.realdevsquad.com/',
+  EVENTS: 'http://realdevsquad.com/events.html',
+  MEMBERS: 'https://members.realdevsquad.com/',
+  CRYPTO: 'https://crypto.realdevsquad.com/',
+  STATUS: 'https://status.realdevsquad.com/',
+  PROFILE: 'https://my.realdevsquad.com/',
+};
+
+export const AUTH = {
+  SIGN_IN:
+    'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97',
+};

app/controllers/application.js

@@ -0,0 +1,21 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import ENV from 'website-www/config/environment';
+
+export default class ApplicationController extends Controller {
+  @tracked isLoggedIn = false;
+
+  @action async signOut() {
+    try {
+      fetch(`${ENV.BASE_API_URL}/auth/signout`, {
+        method: 'GET',
+        credentials: 'include',
+      }).then(() => {
+        location.reload();
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}

app/index.html

@@ -2,35 +2,27 @@
 
 <html>
 
-  <head>
-
-    <meta charset="utf-8" />
-
-    <title>Real Dev Squad</title>
-
-    <meta name="description" content="" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
-     {{content-for "head"}}
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
-
-    <link
-      integrity=""
-      rel="stylesheet"
-      href="{{rootURL}}assets/website-www.css"
-    />
-     {{content-for "head-footer"}}
-  </head>
-
-  <body>
-     {{content-for "body"}}
-    <script src="{{rootURL}}assets/vendor.js"></script>
-
-    <script src="{{rootURL}}assets/website-www.js"></script>
-     {{content-for "body-footer"}}
-  </body>
-
-</html>
-
+<head>
+  <meta charset="utf-8" />
+  <title>Real Dev Squad</title>
+
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
+  {{content-for "head"}}
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/website-www.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400..900&display=swap" rel="stylesheet" />
+  {{content-for "head-footer"}}
+</head>
+
+<body>
+  {{content-for "body"}}
+  <script src="{{rootURL}}assets/vendor.js"></script>
+
+  <script src="{{rootURL}}assets/website-www.js"></script>
+  {{content-for "body-footer"}}
+</body>
+
+</html>

app/models/user.js

@@ -0,0 +1,20 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class UserModel extends Model {
+  @attr first_name;
+  @attr last_name;
+  @attr username;
+  @attr('string', { defaultValue: 'active' }) status;
+  @attr roles;
+  @attr yoe;
+  @attr picture;
+  @attr company;
+  @attr incompleteUserDetails;
+  @attr github_display_name;
+  @attr github_id;
+  @attr instragram_id;
+  @attr linkedin_id;
+  @attr twitter_id;
+  @attr profileURL;
+  @attr profileStatus;
+}

app/routes/application.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { UnauthorizedError } from '@ember-data/adapter/error';
+import { action } from '@ember/object';
+
+export default class IndexRoute extends Route {
+  @service store;
+  @service router;
+
+  async model() {
+    return this.store.findRecord('user', 'self');
+  }
+
+  @action
+  error(error) {
+    if (error instanceof UnauthorizedError) {
+      // TODO: Handle the unauthorized error
+      console.log(error.message);
+    }
+  }
+}

app/serializers/application.js

@@ -0,0 +1,3 @@
+import JSONSerializer from '@ember-data/serializer/json';
+
+export default class ApplicationSerializer extends JSONSerializer {}

app/styles/app.css

@@ -0,0 +1,20 @@
+@import 'navbar.module.css';
+
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  box-sizing: border-box;
+  font-family: 'raleway', sans-serif;
+  background-color: var(--color-white);
+}
+
+h1 {
+  font-size: 4.5rem;
+}
+
+h2 {
+  font-size: 4rem;
+}