Fix Navbar (#31)

Feat: add Navbar component Closes #31
ReCoded-Org · Mar 24, 2021 · 14c0949 · 14c0949
1 parent 538552c
commit 14c0949
Show file tree

Hide file tree

Showing 15 changed files with 460 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html  lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/logo.ico"  />
@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,41 @@
-import React from 'react';
-import { BrowserRouter as Router, Switch } from "react-router-dom";
+import React from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import NavBar from './components/NavBar/NavBar'
+import {
+    HOME_ROUTE,
+    ADOPT_ROUTE,
+    ABOUT_ROUTE,
+    RESOURCE_CAT_ROUTE,
+    RESOURCE_DOG_ROUTE,
+    LOGIN_ROUTE,
+    SIGNUP_ROUTE,
+    CONTACT_US_ROUTE,
+} from './routes'
 
 function App() {
-
-  return (
-    <Router>
-      <Switch>
-       <p>Hello wordl!</p>
-      </Switch>
-    </Router>
-  );
+    return (
+        <Router>
+            <NavBar />
+            <Switch>
+                <Route path={ADOPT_ROUTE}>{/** <ADOPT_ROUTE/> */}</Route>
+                <Route path={ABOUT_ROUTE}>{/** <ABOUT_ROUTE/> */}</Route>
+                <Route path={LOGIN_ROUTE}>{/** <LOGIN_ROUTE/> */}</Route>
+                <Route path={SIGNUP_ROUTE}>{/** <SIGNUP_ROUTE/> */}</Route>
+                <Route path={RESOURCE_CAT_ROUTE}>
+                    {/** <RESOURCE_CAT_ROUTE/> */}
+                </Route>
+                <Route path={RESOURCE_DOG_ROUTE}>
+                    {/** <RESOURCE_DOG_ROUTE/> */}
+                </Route>
+                <Route path={CONTACT_US_ROUTE}>
+                    {/** <CONTACT_US_ROUTE/> */}
+                </Route>
+                <Route path={HOME_ROUTE} exact>
+                    {/** <HOME_ROUTE/> */}
+                </Route>
+            </Switch>
+        </Router>
+    )
 }
 
-export default App;
+export default App
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
@@ -0,0 +1,84 @@
+.navBar {
+    background: linear-gradient(45deg, #fe6b8b, #ff8e53 100%);
+    padding: 0 !important;
+}
+
+.navBar a {
+    text-decoration: none;
+    color: rgb(255, 246, 246) !important;
+    margin-right: 25px;
+    margin-left: 25px;
+    font-weight: 400;
+}
+
+a.dropdown-item {
+    margin: auto;
+}
+
+.selected {
+    border-bottom: 2px solid white;
+    margin-bottom: 3px;
+}
+
+.nav-link {
+    transition: color 0.5s;
+}
+.nav-link:hover {
+    color: #696964 !important;
+}
+
+a.dropdown-item {
+    color: #ff8e53 !important;
+    margin: auto;
+}
+
+.dropdown-item:active {
+    background: white;
+}
+.logo {
+    margin-left: 10px;
+}
+.logo img {
+    width: 55px;
+    height: 55px;
+}
+.navbar-light .navbar-toggler-icon {
+    background-image: url('../../images/burger.png');
+}
+
+.navbar-toggler-icon {
+    display: inline-block;
+    width: 1.3em;
+    height: 1em;
+}
+.navbar-light .navbar-toggler {
+    border-color: rgba(0, 0, 0, 0);
+}
+
+.selectLang {
+    background: none;
+    color: rgb(255, 246, 246) !important;
+    font-weight: 400;
+    border: none;
+    margin-right: 0px;
+    padding: 10;
+    outline-style: none;
+    box-shadow: none;
+    border-color: transparent;
+}
+
+.selectLang:focus {
+    outline: none;
+    box-shadow: none;
+}
+.selectLang option {
+  color: #ff8e53 !important;
+  font-weight: 300;
+  font-size: 18px !important;
+  text-align: center;
+}
+
+.firstOption{
+  display: none;
+}
+
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react'
+import { Navbar, Nav, NavDropdown, Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+import { BrowserRouter as Router, NavLink } from 'react-router-dom'
+import './NavBar.css'
+import {
+    HOME_ROUTE,
+    ADOPT_ROUTE,
+    ABOUT_ROUTE,
+    RESOURCE_CAT_ROUTE,
+    RESOURCE_DOG_ROUTE,
+    LOGIN_ROUTE,
+    CONTACT_US_ROUTE,
+} from '../../routes'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import logo from '../../images/logo.ico'
+
+export default function NavBar() {
+    const { t } = useTranslation()
+    const [dirProperties, setDir] = useState({
+        dir: 'ltr',
+        className: 'ml-auto',
+    })
+
+    const selectedLanguage = (lang) => {
+        i18next.changeLanguage(lang)
+    }
+    const handelOption = (e) => {
+        selectedLanguage(e.target.value)
+    }
+
+    const handelDir = () => {
+        if (localStorage.getItem('i18nextLng') !== 'en') {
+            const newDir = 'rtl'
+            const newClassName = 'mr-auto'
+            const newdirProperties = { ...dirProperties }
+            newdirProperties.dir = newDir
+            newdirProperties.className = newClassName
+            setDir(newdirProperties)
+        } else {
+            const newDir = 'ltr'
+            const newClassName = 'ml-auto'
+            const newdirProperties = { ...dirProperties }
+            newdirProperties.dir = newDir
+            newdirProperties.className = newClassName
+            setDir(newdirProperties)
+        }
+    }
+
+    useEffect(() => {
+        handelDir()
+    }, [localStorage.getItem('i18nextLng')])
+
+    return (
+        <div dir={dirProperties.dir} data-testid="NavBar">
+            <Router>
+                <Navbar className="navBar" expand="lg">
+                    <Navbar.Brand className="logo" as={NavLink} to={HOME_ROUTE}>
+                        <img src={logo} alt="" />
+                    </Navbar.Brand>
+                    <Navbar.Toggle />
+                    <Navbar.Collapse id="basic-navbar-nav">
+                        <Nav className={dirProperties.className}>
+                            <Nav.Link
+                                as={NavLink}
+                                to={HOME_ROUTE}
+                                activeClassName="selected"
+                                exact
+                            >
+                                {t('navbar.home')}
+                            </Nav.Link>
+                            <Nav.Link
+                                as={NavLink}
+                                to={ABOUT_ROUTE}
+                                activeClassName="selected"
+                                exact
+                            >
+                                {t('navbar.about')}
+                            </Nav.Link>
+                            <Nav.Link
+                                as={NavLink}
+                                to={ADOPT_ROUTE}
+                                RESOURCE_CAT_ROUTE
+                                activeClassName="selected"
+                                exact
+                            >
+                                {t('navbar.adopt')}
+                            </Nav.Link>
+                            <NavDropdown
+                                className="drop"
+                                title={t('navbar.resources.0')}
+                            >
+                                <NavDropdown.Item
+                                    as={NavLink}
+                                    activeClassName="selected"
+                                    exact
+                                    to={RESOURCE_CAT_ROUTE}
+                                >
+                                    {t('navbar.resources.1')}
+                                </NavDropdown.Item>
+                                <NavDropdown.Item
+                                    as={NavLink}
+                                    activeClassName="selected"
+                                    exact
+                                    to={RESOURCE_DOG_ROUTE}
+                                >
+                                    {t('navbar.resources.2')}
+                                </NavDropdown.Item>
+                            </NavDropdown>
+                            <Nav.Link
+                                as={NavLink}
+                                activeClassName="selected"
+                                exact
+                                to={CONTACT_US_ROUTE}
+                            >
+                                {t('navbar.contact')}
+                            </Nav.Link>
+                            <Nav.Link
+                                as={NavLink}
+                                activeClassName="selected"
+                                exact
+                                to={LOGIN_ROUTE}
+                            >
+                                {t('navbar.logIn')}
+                            </Nav.Link>
+                            <Nav.Link className="fa">
+                                <Form.Control
+                                    className="selectLang"
+                                    onChange={handelOption}
+                                    as="select"
+                                    size="sm"
+                                    custom
+                                    value=""
+                                >
+                                    <option selected className="firstOption fa">
+                                        &#xf1ab;
+                                    </option>
+                                    <option value='en'>English</option>
+                                    <option value='ar'>عربي</option>
+                                    <option value='krd'>كردى</option>
+                                </Form.Control>
+                            </Nav.Link>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Navbar>
+            </Router>
+        </div>
+    )
+}
diff --git a/src/i18n.js b/src/i18n.js
@@ -7,6 +7,8 @@ import translationEn from "./translations/en/translation.json"
 import translationAr from "./translations/ar/translation.json"
 import translationKrd from "./translations/krd/translation.json"
 
+const language = ['en','kr','ar']
+
 const resources = {
   en: {
     translation: translationEn,
@@ -25,7 +27,8 @@ i18n
   .use(initReactI18next)
   .init({
     resources,
-    lng: 'en',
+    // lng: 'en',
+    whitelist:language,
 
     interpolation: {
       escapeValue: false,

diff --git a/src/images/burger.png b/src/images/burger.png
diff --git a/src/images/logo.ico b/src/images/logo.ico
diff --git a/src/images/logo.png b/src/images/logo.png