Merge pull request i-barysiuk#22 from i-barysiuk/F9/newMenu

F9/new menu

app/package.json

@@ -40,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "antd": "^3.20.5"
   }
 }

app/src/App.css

@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.css';
+
 .App {
   text-align: center;
 }

app/src/App.js

@@ -1,22 +1,23 @@
 import React from "react";
 import "./App.css";
-
 import { BrowserRouter, Route } from "react-router-dom";
 import Login from "./components/login/Login";
 import Dashboard from "./components/dashboard/Dashboard";
-import Header from "./components/header/Header";
-import Request from "./components/request/Request";
+import Menu from "./components/menu/Menu";
 
 function App() {
   return (
-    <div>
-      <Request />
-      <BrowserRouter>
-        <Route exact path="/" component={Header} />
-        <Route path="/login" component={Login} />
-        <Route path="/dashboard" component={Dashboard} />
-      </BrowserRouter>
-    </div>
+    <BrowserRouter>
+      <Route exact path="/" component={Menu} />
+      <Route path="/home" component={Menu} />
+      <Route path="/users" component={Menu} />
+      <Route path="/idcard" component={Menu} />
+      <Route path="/file" component={Menu} />
+      <Route path="/calendar" component={Menu} />
+      <Route path="/search" component={Menu} />
+      <Route path="/login" component={Login} />
+      <Route path="/dashboard" component={Dashboard} />
+    </BrowserRouter>
   );
 }
 

app/src/components/menu/Menu.js

@@ -0,0 +1,57 @@
+import React from "react";
+import style from "./style.module.scss";
+import {NavLink} from 'react-router-dom';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendarAlt , faFileAlt  , faSearch , faUsers , faBell , faIdCard} from "@fortawesome/free-solid-svg-icons";
+import logoK from '../../assets/img/logo_k.png';
+import { Popover,  Badge , Avatar} from 'antd';
+
+class Menu extends React.Component 
+{
+    state = {
+        count: 5,
+        show: true,
+      };
+
+    render() {
+        return (
+        <div className={style.container}>
+            <div className={style.upMenu}>
+                <NavLink to="/dashboard">
+                    <img src={logoK} className={style.logo}></img>
+                </NavLink>
+            </div>
+            <div className={style.middleMenu}>
+                    <NavLink to="/dashboard/groups" className={style.button}>
+                         <FontAwesomeIcon icon={faUsers} className={style.icon} />   
+                    </NavLink>
+                    <NavLink to="/dashboard/students" className={style.button}>
+                         <FontAwesomeIcon icon={faIdCard} className={style.icon} />
+                    </NavLink>    
+                    <NavLink to="/dashboard/reports" className={style.button}>
+                         <FontAwesomeIcon icon={faFileAlt}   className={style.icon} />
+                    </NavLink>    
+                    <NavLink to="/dashboard/events" className={style.button}>
+                         <FontAwesomeIcon  icon={faCalendarAlt} className={style.icon} />
+                    </NavLink>    
+                    <NavLink to="/search" className={style.button}>
+                         <FontAwesomeIcon  icon={faSearch}    className={style.icon} />
+                    </NavLink>    
+            </div> 
+
+            <div className={style.downMenu}>
+                <Popover placement="rightBottom" trigger="click" content="button" title="Title">
+                    <Badge count={this.state.count} dot> 
+                        <FontAwesomeIcon icon={faBell}      className={style.bell  } /> 
+                    </Badge>    
+                </Popover>    
+                <Popover placement="rightBottom" trigger="click" content="button" title="Title">
+                    <Avatar icon="user" className={style.avatar}></Avatar>  
+                </Popover>      
+            </div>  
+        </div>
+        );
+      }
+}    
+
+export default Menu;

app/src/components/menu/style.module.scss

@@ -0,0 +1,92 @@
+//container
+$bg-menu: #2D50EC;    
+$width-menu: 55px;
+
+//Icons_menu
+$width-icon:  20px ;    
+$height-icon: 20px ;  
+$color-icons: white;
+
+//logo
+$width-logo: 35px;
+$margin-top: 20px;
+
+//Hover
+$hover-width: 40px;
+$hover-height:40px;
+
+//Down menu
+$margin-bottom: 15px;
+
+
+.container
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: $width-menu;
+    height: 100%;
+    background: $bg-menu;
+}
+
+.upMenu, .middleMenu, .downMenu 
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.logo{
+    width: $width-logo;
+    margin-top:$margin-top;
+}
+
+.button
+{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    width: $hover-width;
+    height: $hover-height;
+    border-radius: 7px;
+    color: white;
+    margin-bottom: 20px;
+
+}
+
+.button:hover
+{
+    background: rgba(30, 59, 186, 0.79);
+}
+
+.icon
+{
+    height: $height-icon !important;
+    width:  $width-icon  !important;
+    color: $color-icons;
+}
+
+.Link_to_menu
+{
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+}
+
+.avatar , .bell
+{
+    margin-bottom: $margin-bottom !important;
+
+}
+
+.bell
+{
+    height: 16px !important;
+    width:  16px !important;
+    color: $color-icons;
+}
+
+

docker-compose.yml

@@ -0,0 +1,16 @@
+version: "3.1"
+
+services:
+  db:
+    image: postgres
+    restart: always
+    environment:
+      POSTGRES_PASSWORD: trytofindme
+    ports:
+      - 5432:5432
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8020:8080