├── .env ├── .gitignore ├── README.md ├── logo.png ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── app │ ├── index.js │ └── routing.js ├── assets │ ├── custom.css │ ├── main.css │ └── tailwind.css ├── components │ ├── features │ │ ├── Login │ │ │ ├── Form │ │ │ │ ├── Email │ │ │ │ │ └── index.js │ │ │ │ ├── Password │ │ │ │ │ └── index.js │ │ │ │ ├── Submit │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── Link │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Logo │ │ │ └── index.js │ │ ├── Navigation │ │ │ ├── Linker.js │ │ │ ├── Links │ │ │ │ └── Features │ │ │ │ │ ├── Menu │ │ │ │ │ ├── Badge │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── Item │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── RequestButton │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── SubMenu │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── state.js │ │ │ │ │ └── index.js │ │ │ ├── Switcher.js │ │ │ └── index.js │ │ ├── Search │ │ │ └── index.js │ │ ├── Signup │ │ │ └── index.js │ │ └── Statement │ │ │ └── index.js │ └── library │ │ ├── Button │ │ ├── Brand.jsx │ │ ├── index.js │ │ └── withStyledButton.js │ │ ├── Label │ │ ├── Label.jsx │ │ └── index.js │ │ └── Textfield │ │ ├── Outline.jsx │ │ └── index.js ├── constants │ └── routes.js ├── index.js ├── layouts │ └── Header │ │ ├── index.js │ │ └── mobile │ │ └── index.js ├── pages │ ├── Customers │ │ └── index.js │ ├── Features │ │ └── index.js │ ├── Home │ │ └── index.js │ ├── Login │ │ └── index.js │ ├── Products │ │ └── index.js │ ├── Sales │ │ └── index.js │ └── index.js ├── serviceWorker.js └── setupTests.js └── tailwind.config.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_API_KEY="AIzaSyC9eABwujyTzLqJdcEufCw1tflEHHEans8", 2 | REACT_APP_AUTH_DOMAIN: "react-authentication-adb73.firebaseapp.com", 3 | REACT_APP_DATABASE_URL: "https://react-authentication-adb73.firebaseio.com", 4 | REACT_APP_PROJECT_ID: "react-authentication-adb73", 5 | REACT_APP_STORAGE_BUCKET: "react-authentication-adb73.appspot.com", 6 | REACT_APP_MESSAGING_SENDER_ID: "27359851197", 7 | REACT_APP_ID: "1:27359851197:web:ea7a24b116a2b0720ffdd4", 8 | REACT_APP_MEASUREMENT_ID: "G-D8W142VJEL" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

React Navigation

4 |

5 |
Professional Navigation with modern design.
6 | 7 | ## Demo 8 | 9 | [Live App](https://jiue8.csb.app/) 10 | 11 | [On Codesandbox](https://codesandbox.io/s/menaialareact-navigation-jiue8) 12 | 13 | ## Features 14 | 15 | - [x] Well-structured directories and modules. 16 | - [x] Modular and readable code. 17 | - [x] Modern user interface. 18 | - [x] Responsive. 19 | - [x] Respected accessibility and usability. 20 | 21 | ## Scripts 22 | 23 | In the project directory, you can run: 24 | 25 | #### `npm start` 26 | 27 | Runs the app in the development mode.
28 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 29 | 30 | #### `npm run build` 31 | 32 | Builds the app for production to the `build` folder.
33 | It correctly bundles React in production mode and optimizes the build for the best performance. 34 | 35 | The build is minified and the filenames include the hashes.
36 | Your app is ready to be deployed! 37 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alamenai/react-navigation/97a1dd3945c66eef05c0e8fc9c35dc0c8ec7805d/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-firebase-authentication", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "autoprefixer": "^9.8.6", 10 | "firebase": "^4.0.0", 11 | "lodash": "^4.17.19", 12 | "postcss": "^7.0.32", 13 | "react": "^16.13.1", 14 | "react-dom": "^16.13.1", 15 | "react-router-dom": "^5.2.0", 16 | "react-scripts": "3.4.1", 17 | "react-transition-group": "^4.4.1", 18 | "recompose": "^0.30.0", 19 | "sass": "^1.26.10", 20 | "tailwindcss": "^1.6.2" 21 | }, 22 | "scripts": { 23 | "start": "npm run watch:css && react-scripts start", 24 | "build": "npm run build:css && react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject", 27 | "build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css", 28 | "watch:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css" 29 | }, 30 | "eslintConfig": { 31 | "extends": "react-app" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const tailwindcss = require('tailwindcss'); 2 | module.exports = { 3 | plugins: [ 4 | tailwindcss("./tailwind.config.js"), 5 | require('autoprefixer') 6 | ], 7 | }; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alamenai/react-navigation/97a1dd3945c66eef05c0e8fc9c35dc0c8ec7805d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alamenai/react-navigation/97a1dd3945c66eef05c0e8fc9c35dc0c8ec7805d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alamenai/react-navigation/97a1dd3945c66eef05c0e8fc9c35dc0c8ec7805d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/app/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { BrowserRouter as Router } from "react-router-dom" 3 | import Header from "../layouts/Header" 4 | import { Switcher } from "../components/features/Navigation" 5 | import HeaderMobile from "../layouts/Header/mobile" 6 | 7 | class App extends React.Component { 8 | render() { 9 | return (
10 | 11 |
12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | } 19 | export default App -------------------------------------------------------------------------------- /src/app/routing.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import * as ROUTES from '../constants/routes' 3 | 4 | const Routing = () => ( 5 |
6 | 7 |
8 | ) 9 | 10 | export default Routing -------------------------------------------------------------------------------- /src/assets/custom.css: -------------------------------------------------------------------------------- 1 | button:focus { 2 | outline: none; 3 | } -------------------------------------------------------------------------------- /src/assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; -------------------------------------------------------------------------------- /src/components/features/Login/Form/Email/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { OutlineField as EmailField } from "../../../../library/Textfield" 3 | import Label from "../../../../library/Label" 4 | 5 | const Email = () => { 6 | 7 | const email = { 8 | type: "password", 9 | id: "password", 10 | placeholder: "You@example.com", 11 | isFocused: true 12 | }; 13 | 14 | return
15 |
18 | } 19 | 20 | export default Email -------------------------------------------------------------------------------- /src/components/features/Login/Form/Password/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | import { OutlineField as PasswordField } from "../../../../library/Textfield" 4 | import Label from "../../../../library/Label" 5 | 6 | 7 | const Password = () => { 8 | 9 | const password = { 10 | type: "password", 11 | id: "password", 12 | placeholder: "••••••••••", 13 | isFocused: false 14 | }; 15 | 16 | return < div className="mt-3 flex flex-col" > 17 |
18 |
21 | 22 | 23 | } 24 | 25 | const ForgotPasswordLink = () => ( 26 | 27 | Forgot password? 28 | 29 | ) 30 | 31 | export default Password -------------------------------------------------------------------------------- /src/components/features/Login/Form/Submit/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { BrandButtonLarge as SignInButton } from "../../../../library/Button" 3 | 4 | 5 | const LoginButton = () => { 6 | 7 | const login = (e) => e.preventDefault() 8 | 9 | return 14 | } 15 | 16 | export default LoginButton -------------------------------------------------------------------------------- /src/components/features/Login/Form/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Email from "./Email" 3 | import Password from "./Password" 4 | import LoginButton from "./Submit" 5 | const Form = () => { 6 | return (
11 | 12 | 13 | 14 | ) 15 | } 16 | export default Form -------------------------------------------------------------------------------- /src/components/features/Login/Link/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | import * as ROUTES from "../../../../constants/routes" 4 | 5 | const Login = () => ( 6 | 9 | {ROUTES.LOGIN.name} 10 | ) 11 | 12 | export default Login -------------------------------------------------------------------------------- /src/components/features/Login/index.js: -------------------------------------------------------------------------------- 1 | import LoginLink from "./Link" 2 | import LoginForm from "./Form" 3 | 4 | export default LoginForm 5 | export { LoginLink } 6 | -------------------------------------------------------------------------------- /src/components/features/Logo/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | import { HOME } from "../../../constants/routes" 4 | 5 | const Logo = () => ( 6 | 7 | 9 | t 10 | 11 | ) 12 | 13 | export default Logo -------------------------------------------------------------------------------- /src/components/features/Navigation/Linker.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import * as ROUTES from "../../../constants/routes" 3 | import { NavLink } from "react-router-dom" 4 | import FeatureLink from "./Links/Features" 5 | 6 | const Linker = () => ( 7 | 15 | ) 16 | export default Linker -------------------------------------------------------------------------------- /src/components/features/Navigation/Links/Features/Menu/Badge/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Badge = ({ text }) => ( 4 | 5 |

{text}

6 | 7 | ) 8 | export default Badge -------------------------------------------------------------------------------- /src/components/features/Navigation/Links/Features/Menu/Item/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | 4 | const Item = ({ name, route }) => ( 5 | < Link to={`/features/${route}`} className="text-gray-700 text-base-14 hover:text-brand" > {name}) 6 | 7 | export default Item -------------------------------------------------------------------------------- /src/components/features/Navigation/Links/Features/Menu/RequestButton/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | import { BrandButtonDefault as Button } from "../../../../../../library/Button" 4 | 5 | 6 | const RequestButton = () => { 7 | 8 | const login = (e) => e.preventDefault() 9 | 10 | return 11 |