Skip to content
Snippets Groups Projects
Commit 12f56796 authored by Manjusha K's avatar Manjusha K
Browse files

sidebar

parent 821c2c1e
Branches
No related tags found
No related merge requests found
import ProfileCover from "./theme/profile-cover.jpg";
import Logo from "./brand/blue.png"
export {
ProfileCover,
Logo
}
\ No newline at end of file
.navbar-vertical.navbar-expand-xs.fixed-left {
left: 0;
border-width: 0 1px 0 0;
}
.navbar-vertical.navbar-expand-xs.fixed-left {
left: 0;
border-width: 0 1px 0 0;
}
.g-sidenav-pinned .sidenav {
max-width: 250px !important;
}
.navbar-vertical.navbar-expand-xs {
position: fixed;
top: 0;
bottom: 0;
display: block;
overflow-y: auto;
width: 100%;
max-width: 250px;
padding-right: 0;
padding-left: 0;
}
.navbar-vertical.navbar-light {
border-color: rgba(0, 0, 0, 0.05);
background-color: #f6f9fc;
}
.bg-white {
background-color: #fff !important;
}
.sidenav {
z-index: 1050;
transition: all 0.4s ease;
}
.navbar-vertical {
padding-top: 0;
border-width: 0 0 1px 0;
border-style: solid;
box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
}
.navbar {
position: relative;
display: flex;
padding: 1rem 1rem;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* .sidenav-header {
height: 78px;
text-align: center;
}
.align-items-center {
align-items: center !important;
} */
.sidenav-header {
height: 78px;
text-align: center;
}
.navbar-vertical .navbar-brand-img,
.navbar-vertical .navbar-brand > img {
max-width: 100%;
max-height: 2rem;
}
.g-sidenav-pinned .sidenav .navbar-brand,
.g-sidenav-pinned .sidenav .navbar-heading {
display: block;
}
.sidenav .navbar-brand,
.sidenav .navbar-heading {
padding: 1.5rem;
}
.navbar-vertical .navbar-brand {
margin-right: 0;
}
.navbar-vertical.navbar-expand-xs .navbar-inner {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.navbar-vertical.navbar-expand-xs .navbar-collapse {
display: flex;
flex-direction: column;
margin-right: -1.5rem;
margin-left: -1.5rem;
padding-right: 1.5rem;
padding-left: 1.5rem;
flex: 1 1;
align-items: stretch;
}
/* .navbar-vertical .navbar-collapse {
margin-right: -1rem;
margin-left: -1rem;
@media (min-width: 768px);
} */
.navbar-vertical.navbar-expand-xs .navbar-nav {
flex-direction: column;
margin-right: -1.5rem;
margin-left: -1.5rem;
}
.navbar-vertical.navbar-expand-xs .navbar-collapse > * {
min-width: 100%;
}
.navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item {
margin-top: 16px;
}
.g-sidenav-pinned .sidenav .navbar-brand,
.g-sidenav-pinned .sidenav .navbar-heading {
display: block;
}
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
padding: 0.675rem 1.5rem;
}
.navbar-vertical .navbar-nav .nav-link {
display: flex;
align-items: center;
}
.navbar-vertical .navbar-nav .nav-link {
font-size: 0.875rem;
font-weight: 500;
padding-right: 1rem;
padding-left: 1rem;
}
.navbar-vertical .navbar-nav .nav-link > i {
font-size: 0.9375rem;
line-height: 1.5rem;
min-width: 2rem;
}
.nav-link i.ni {
position: relative;
top: 2px;
margin-right: 20px;
}
* {
font-family: Open Sans, sans-serif;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(0, 0, 0, 0.6);
}
import React from "react";
import "../../../style/common/icons.scss";
export const SideBarData = [
{
title: "Dashboard",
icon: <i className="ni ni-tv-2 text-primary" />,
link: "/dashboard",
},
{
title: "Icons",
icon: <i className="ni ni-planet text-orange" />,
link: "/icons",
},
{
title: "Google",
icon: <i className="ni ni-pin-3 text-primary" />,
link: "/google",
},
{
title: "Profile",
icon: <i className="ni ni-single-02 text-yellow" />,
link: "/profile",
},
{
title: "Tables",
icon: <i className="ni ni-bullet-list-67 text-default" />,
link: "/tables",
},
{
title: "Login",
icon: <i className="ni ni-key-25 text-info" />,
link: "/login",
},
{
title: "Register",
icon: <i className="ni ni-circle-08 text-pink" />,
link: "/register",
},
{
title: "Upgrade",
icon: <i className="ni ni-send text-dark" />,
link: "/upgrade",
},
];
export const SideBarDocumentationData = [
{
title: "Getting started",
icon: <i className="ni ni-spaceship " />,
link: "/getting started",
},
{
title: "Foundation",
icon: <i className="ni ni-palette " />,
link: "/foundation",
},
{
title: "Components",
icon: <i className="ni ni-ui-04" />,
link: "/components",
},
{
title: "Getting Plugins",
icon: <i className="ni ni-chart-pie-35 " />,
link: "/plugins",
},
];
import React from "react";
import PropTypes from "prop-types";
import { SideBarData } from "./SideBarData";
import { SideBarDocumentationData } from "./SideBarData";
import { Logo } from "../../../assets/img/index";
import { Link } from "react-router-dom";
import "./SideBar.css";
const SideBar = (props) => {
return (
<nav className="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white">
<div
className="scroll-wrapper scrollbar-inner"
style={{ position: "relative" }}
>
<div
className="scrollbar-inner scroll-content scroll-scrolly_visible"
style={{
height: "auto",
marginBottom: "0px",
marginRight: "0px",
maxHeight: "600px",
}}
>
<div className="sidenav-header align-items-center">
<a className="navbar-brand">
<img src={Logo} className="navbar-brand-img" alt="Logo" />
</a>
</div>
<div className="navbar-inner">
<div className="collapse navbar-collapse">
<ul className="navbar-nav">
{SideBarData.map((ele, i) => {
return (
<Link to={ele.link}>
<a key={i} className="nav-link">
<li className="nav-item">
{ele.icon}
<span className="nav-link-text">{ele.title}</span>
</li>
</a>
</Link>
);
})}
</ul>
<hr className="my-3" />
<h6 className="navbar-heading p-0 text-muted">
<span className="docs-normal"> Documentation</span>
</h6>
<ul className="navbar-nav mb-md-3">
{SideBarDocumentationData.map((ele, i) => {
return (
<Link to={ele.link}>
<a key={i} className="nav-link">
<li className="nav-item">
{ele.icon}
<span className="nav-link-text"> {ele.title} </span>
</li>
</a>
</Link>
);
})}
</ul>
</div>
</div>
</div>
<div className="scroll-element scroll-x scroll-scrolly_visible">
<div className="scroll-element_outer">
<div className="scroll-element_size"></div>
<div className="scroll-element_track"></div>
<div className="scroll-bar" style={{ width: "0px" }}></div>
</div>
</div>
<div className="scroll-element scroll-y scroll-scrolly_visible">
<div className="scroll-element_outer">
<div className="scroll-element_size"></div>
<div className="scroll-element_track"></div>
<div
className="scroll-bar"
style={{ height: "600px", top: "0px" }}
></div>
</div>
</div>
</div>
</nav>
);
};
SideBar.propTypes = {};
export default SideBar;
......@@ -572,6 +572,4 @@ License - nucleoapp.com/license/
content: "\ea65";
}
/* all icon font classes list here */
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment