Merge branch 'feature/dushyanth' of...

Merge branch 'feature/dushyanth' of gitlab.niveussolutions.com:prajakta.sathwane/sample_argon into argon/dushyanth/sidebar

src/App.js

 import React, { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 const Login = lazy(() => import("./containers/Login"));
+const Dashboard = lazy(() => import("./containers/Home"));
 
 
 function App() {
@@ -10,8 +11,7 @@ function App() {
         <Suspense fallback={<div> loading</div>}>
           <Routes>
             <Route exact path="/login" element={<Login />} />
-           
-            
+            <Route exact path="/dashboard" element={<Dashboard />} />
             <Route path="/" element={<Login />} />
           </Routes>
         </Suspense>

src/components/Card/index.jsx

+import React from 'react'
+
+function Card(props) {
+    const{}=props;
+    
+    return (
+        <div class="card-body">
+                  <div class="row">
+                    <div class="col">
+                      <h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
+                      <span class="h2 font-weight-bold mb-0">350,897</span>
+                    </div>
+                    <div class="col-auto">
+                      <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
+                        <i class="ni ni-active-40"></i>
+                      </div>
+                    </div>
+                  </div>
+                  <p class="mt-3 mb-0 text-sm">
+                    <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
+                    <span class="text-nowrap">Since last month</span>
+                  </p>
+                </div>
+    )
+}
+
+export default Card

src/components/Input/Input.scss

+
+.form-control {
+  display: block;
+  width: 15%;
+  height: calc(1.5em + 1.25rem + 2px);
+  padding: 0.625rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #8898aa;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.form-control {
+  font-size: .875rem;
+  height: calc(1.5em + 1.25rem + 5px);
+  transition: all .15s ease-in-out;
+}
+.form-control:focus {
+  color: #8898aa;
+  border-color: #5e72e4;
+  outline: 0;
+  background-color: #fff;
+  // box-shadow: 0 3px 9px ;
+
+}
\ No newline at end of file

src/components/Input/index.jsx

+import { type } from '@testing-library/user-event/dist/type';
+import React from 'react'
+import PropTypes from "prop-types";
+import "./Input.scss";
+
+
+function Input(props) {
+  const{customClass,value,handleChange,placeholder}=props;
+
+    return (
+      <div>
+    <input className={`${customClass}`} value={value} onChange={handleChange} placeholder={placeholder}/>
+    </div>
+    )
+    }
+
+
+
+
+
+
+export default Input

src/containers/Home/dashboard.scss

+.main-content {
+    position: relative;
+  }
+  .main-content .navbar-top {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  @media (min-width: 768px) {
+    .main-content .container-fluid,
+    .main-content .container-lg,
+    .main-content .container-md,
+    .main-content .container-sm,
+    .main-content .container-xl {
+      padding-right: 30px !important;
+      padding-left: 30px !important;
+    }
+  }
+  .navbar-vertical.navbar-expand-xs.fixed-left + .main-content {
+    margin-left: 250px;
+  }
+  .navbar-vertical.navbar-expand-xs.fixed-right + .main-content {
+    margin-right: 62px;
+  }
+  @media (min-width: 576px) {
+    .navbar-vertical.navbar-expand-sm.fixed-left + .main-content {
+      margin-left: 250px;
+    }
+    .navbar-vertical.navbar-expand-sm.fixed-right + .main-content {
+      margin-right: 62px;
+    }
+  }
+  @media (min-width: 768px) {
+    .navbar-vertical.navbar-expand-md.fixed-left + .main-content {
+      margin-left: 250px;
+    }
+    .navbar-vertical.navbar-expand-md.fixed-right + .main-content {
+      margin-right: 62px;
+    }
+  }
+  @media (min-width: 992px) {
+    .navbar-vertical.navbar-expand-lg.fixed-left + .main-content {
+      margin-left: 250px;
+    }
+    .navbar-vertical.navbar-expand-lg.fixed-right + .main-content {
+      margin-right: 62px;
+    }
+  }
+  @media (min-width: 1200px) {
+    .navbar-vertical.navbar-expand-xl.fixed-left + .main-content {
+      margin-left: 250px;
+    }
+    .navbar-vertical.navbar-expand-xl.fixed-right + .main-content {
+      margin-right: 62px;
+    }
+  }
+  .sidenav.fixed-left + .main-content {
+    margin-left: 62px;
+    transition: all 0.15s ease;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sidenav.fixed-left + .main-content {
+      transition: none;
+    }
+  }
+  .sidenav.fixed-right + .main-content {
+    margin-right: 62px;
+    transition: all 0.15s ease;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sidenav.fixed-right + .main-content {
+      transition: none;
+    }
+  }
+  @media (min-width: 1200px) {
+    .g-sidenav-pinned .sidenav.fixed-left + .main-content {
+      margin-left: 250px;
+    }
+    .g-sidenav-pinned .sidenav.fixed-right + .main-content {
+      margin-right: 250px;
+    }
+  }
+  @media (max-width: 1199.98px) {
+    .sidenav {
+      transform: translateX(-250px);
+    }
+    .sidenav.fixed-left + .main-content {
+      margin-left: 0 !important;
+    }
+    .g-sidenav-pinned .sidenav {
+      transform: translateX(0);
+    }
+  }
\ No newline at end of file

src/containers/Home/index.jsx

+import SideBar from 'components/sidebar'
+import Header from 'components/Header'
+import React from 'react'
+import './dashboard.scss'
+
+function Dashboard() {
+    return (
+        <>
+        <SideBar/>
+        <div class="main-content">
+            <Header/>
+        </div>
+        </>
+    )
+}
+
+export default Dashboard