Feature/mobile layout

README.md

@@ -3,7 +3,7 @@
 
 # Research Kernel's Frontend
 
-We at Research Kernel are working on **React.js** for developing UI for Frontend with **Ant Deisng** as a UI design language.  
+We at Research Kernel are working on **React.js** for developing UI for Frontend with **Ant Design** as a UI design language.  
 
 ##  What this Organisation do ?
 

src/components/common/navbar/navbar.component.js

@@ -9,24 +9,60 @@ import {
 } from "./navbar.style";
 import SearchBox from "./../search_box/search_box.component";
 import Logo from "../../../_assets/images/rk-light.png";
+import { Row, Col,Popover, Icon, Button } from 'antd';
+
+const content = (
+  <div>
+ <NavbarLinks>
+ <p><StyledLink as={Link} to="/community">
+ Community
+ </StyledLink></p>
+ <p><StyledLink  as={Link} to="/about-us">
+ About-Us
+</StyledLink></p>
+<p><StyledLink as={Link} to="/contact-us">
+ Contact-Us
+</StyledLink></p>
+<p><StyledLink as={Link} to="/donate">
+ Donate
+</StyledLink></p>
+<p><StyledLink as={Link} to="/sign-in">
+ Sign In
+</StyledLink></p>
+<p><StyledLink as={Link} to="/sign-up">
+ Sign Up
+</StyledLink></p>
+</NavbarLinks>
+</div>
+ );
 
 const NavbarComponent = () => {
   return (
-    <Navbar>
+    <div>
+    <Row type="flex" justify="space-around" align="middle">
+    <Col xs={22} sm={22} md={5} lg={3}>
       <NavbarLogo>
-        {/* <StyledLink as={Link} to="/"> */}
         <NavbarImg src={Logo} />
-        {/* </StyledLink> */}
       </NavbarLogo>
+    </Col>
+    <Col xs={2} sm={2} md={0} lg={0}>
+    <Popover
+      content={content}
+      placement="bottomRight" 
+      trigger="click">
+      <Button><Icon type= 'menu' /></Button>
+    </Popover>
+    </Col>
+    <Col xs={0} sm={0} md={18} lg={12}>
       <NavbarLinks>
-        <StyledLink as={Link} to="/community">
+          <StyledLink as={Link} to="/community">
           Community
-        </StyledLink>
-        <StyledLink as={Link} to="/about-us">
-          About Us
+          </StyledLink>
+        <StyledLink  as={Link} to="/about-us">
+          About-Us
         </StyledLink>
         <StyledLink as={Link} to="/contact-us">
-          Contact Us
+          Contact-Us
         </StyledLink>
         <StyledLink as={Link} to="/donate">
           Donate
@@ -37,9 +73,14 @@ const NavbarComponent = () => {
         <StyledLink as={Link} to="/sign-up">
           Sign Up
         </StyledLink>
-      </NavbarLinks>
-      <SearchBox />
-    </Navbar>
+        </NavbarLinks>
+    </Col>
+    <Col  xs={20} sm={16} md={8} lg={6}>
+    <SearchBox />
+    </Col>
+
+    </Row>
+    </div>
   );
 };
 

src/components/common/navbar/navbar.style.js

@@ -13,9 +13,6 @@ export const Navbar = styled.div`
 
 export const NavbarLinks = styled.div`
   display: inherit;
-  @media (max-width: 992px) {
-    display: none;
-  }
 `;
 
 export const NavbarLogo = styled.div`

src/components/common/search_box/search_box.component.js

@@ -61,7 +61,7 @@ class SearchBoxComponent extends React.Component {
     const { dataSource } = this.state;
     return (
       <div style={{ flex: 1 }}>
-        <div className="global-search-wrapper" style={{ width: 400 }}>
+        <div>
           {/* <AutoComplete
             className="global-search"
             size="medium"

src/components/common/sidebar/sidebar.component.js

@@ -17,9 +17,8 @@ class SiderComponent extends React.Component {
   render() {
     return (
       <Sider
-        breakpoint="lg"
-        collapsedWidth="0"
-        style={{ background: "#fff" }}
+
+        style={{  background: "#fff", overflow:'auto' }}
         theme="dark"
         width={200}
         onBreakpoint={broken => {

src/views/login/Login.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { login } from "./../../_actions/auth.action";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import { Form, Icon, Button, Checkbox, Input } from 'antd';
+import { Form, Icon, Input } from 'antd';
 import {
   StyledForm,
   LoginButton,
@@ -59,10 +59,6 @@ class Login extends Component {
               onChange={this.handlePassword}
               />
           </FormItem>
-                    {/* <FormItem>
-            <Checkbox>Remember me</Checkbox>
-              <Forgot><a href="">Forgot password</a></Forgot>
-          </FormItem> */}
           <FormItem>
             <LoginButton type="primary" htmlType="submit">
               Sign In

src/views/login/login.style.js

@@ -2,8 +2,6 @@ import styled from "styled-components";
 import { Form, Button } from 'antd';
 import { Link } from "react-router-dom";
 
-const FormItem = Form.Item;
-
 export const LoginPage = styled.div`
     margin-left: 35%;
     margin-right: 35%;