Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…t-paw-five into dev
  • Loading branch information
klay964 committed Mar 26, 2021
2 parents eb0b0e1 + a3552c0 commit c637062
Show file tree
Hide file tree
Showing 38 changed files with 766 additions and 57 deletions.
30 changes: 30 additions & 0 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
push:
branches: [ dev ]
pull_request:
branches: [ dev ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [10.x, 12.x, 14.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: yarn install
- run: yarn run fix
# - run: "[[ -z $(git --no-pager diff -- . ':(exclude)yarn.lock' ':(exclude)yarn.lock') ]]"
- run: yarn run test --passWithNoTests
8 changes: 5 additions & 3 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/logo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
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/
Expand All @@ -24,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Paw-five</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file added public/logo.ico
Binary file not shown.
55 changes: 37 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,41 @@
import React from 'react';
import { BrowserRouter as Router, Switch, Route } 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>
<Route path="/">{/**<Home/> */}</Route>
<Route path="/AdoptionPage">{/**<AdoptionPage/> */}</Route>
<Route path="/ResourcePage">{/**<ResourcePage/> */}</Route>
<Route path="/Aboutus">{/**<Aboutus/> */}</Route>
<Route path="/DetailsPage">{/**<DetailsPage/> */}</Route>
<Route path="/ContactUs">{/**<ContactUs/> */}</Route>
<Route path="/Login">{/**<Login/> */}</Route>
<Route path="/Signup">{/**<Signup/> */}</Route>
</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
84 changes: 84 additions & 0 deletions src/components/NavBar/NavBar.css
Original file line number Diff line number Diff line change
@@ -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;
}

150 changes: 150 additions & 0 deletions src/components/NavBar/NavBar.jsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Loading

0 comments on commit c637062

Please sign in to comment.