update login sso address
This commit is contained in:
Mohamed Nouffer
@ -1,185 +1,185 @@
|
||||
import React, { Suspense, useState, useEffect } from 'react'
|
||||
import axios from 'axios';
|
||||
//import Cookies from 'js-cookie';
|
||||
import Cookies from 'universal-cookie';
|
||||
import {
|
||||
Redirect,
|
||||
Route,
|
||||
useLocation,
|
||||
Switch
|
||||
} from 'react-router-dom'
|
||||
import { CContainer, CFade } from '@coreui/react'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
import Sso from 'src/views/sso';
|
||||
|
||||
const loading = ( <
|
||||
div className = "pt-3 text-center" >
|
||||
<div className = "sk-spinner sk-spinner-pulse" > </div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const TheContent = () => {
|
||||
|
||||
const [SsoSession, setSsoSession] = useState('');
|
||||
const [UserData, setUserData] = useState('');
|
||||
const [UserId, setUserId] = useState('');
|
||||
|
||||
async function fetchSession() {
|
||||
|
||||
//setSsoSession('{ "expiration": 468, "client_address": "111.223.144.163", "protocol": "urn:oasis:names:tc:SAML:2.0:protocol", "identity_provider": "https://sso.ts.bizside.biz/idp/shibboleth", "authn_instant": "2021-09-03T08:26:41.248Z", "authncontext_class": "urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport", "attributes": [ { "name": "mail", "values": [ "akira.miyata@mobilous.com" ] } ] }')
|
||||
const result = await axios('https://fbssso.ts.bizside.biz/Shibboleth.sso/Session');
|
||||
if(JSON.stringify(SsoSession) !== JSON.stringify(result.data)) {
|
||||
console.log(result.data);
|
||||
setSsoSession(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSession()
|
||||
}, []);
|
||||
|
||||
async function postUserData(data) {
|
||||
|
||||
let axiosConfig = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=UTF-8',
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
}
|
||||
};
|
||||
|
||||
const result = await axios.post('https://fbssso.ts.bizside.biz/csv', data, axiosConfig)
|
||||
.catch((err) => {
|
||||
console.log("AXIOS ERROR: ", err);
|
||||
});
|
||||
console.log("user data posted");
|
||||
}
|
||||
|
||||
async function fetchUser() {
|
||||
if(SsoSession.attributes == null || SsoSession.attributes[0] === undefined) {
|
||||
return false;
|
||||
}
|
||||
const user_email = SsoSession.attributes[0].values[0]
|
||||
//console.log(user_email);
|
||||
const company_code = "FBS";
|
||||
const key = "api"
|
||||
const pwd = "c558a56c63c44f65956adde8863ecc3558f3e55a465d4338bb2e7d2692866fd8";
|
||||
|
||||
const result = await axios.get('https://fbssso.ts.bizside.biz/users?email=' + user_email, {
|
||||
auth: {
|
||||
username: key,
|
||||
password: pwd
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
return false;
|
||||
});
|
||||
//console.log(result.data);
|
||||
if(JSON.stringify(UserData) !== JSON.stringify(result.data[0])) {
|
||||
setUserData(result.data[0]);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function isCSVPath(){
|
||||
const url =window.location.href;
|
||||
if(url.includes('dashboard')) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function get_token_from_storage_or_cookie() {
|
||||
//return true;
|
||||
const cookies = new Cookies();
|
||||
const shib = cookies.get('_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468')
|
||||
if (shib !== undefined) {
|
||||
fetchSession().then(() => {
|
||||
if (SsoSession !== null) {
|
||||
console.log(shib);
|
||||
fetchUser().then(() => {
|
||||
if(UserId === ''){
|
||||
let id = Math.floor(100000 + Math.random() * 900000)
|
||||
setUserId(id);
|
||||
}
|
||||
const _firstname = UserData.firstname;
|
||||
const _lastname = UserData.lastname;
|
||||
const _email = UserData.email;
|
||||
const _empcode = UserData.employee_code;
|
||||
|
||||
const json_str = `[
|
||||
{
|
||||
"mailadress": "${_email}",
|
||||
"name": "${_lastname} ${_firstname}",
|
||||
"jsessionid": ${UserId},
|
||||
"_idp_session": "",
|
||||
"_opensaml_key": "_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468",
|
||||
"_opensaml_value": "${shib}"
|
||||
}
|
||||
]`;
|
||||
|
||||
|
||||
//const json_str = '[{"jsessonid": "' + UserId + '" , "name": "' + _firstname + ' ' +_lastname+ '", "mailadress":" ' + _email + '", "empcode": "' + _empcode + '"}]';
|
||||
if(_empcode !== null && _empcode !== undefined){
|
||||
if(isCSVPath()){
|
||||
postUserData(json_str);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<main className = "c-main">
|
||||
<CContainer fluid >
|
||||
<Suspense fallback = { loading }>
|
||||
<Switch > {
|
||||
routes.map((route, idx) => {
|
||||
return route.component && (
|
||||
<Route key = { idx }
|
||||
path = { route.path }
|
||||
exact = { route.exact }
|
||||
name = { route.name }
|
||||
|
||||
|
||||
|
||||
// render = {
|
||||
// props =>
|
||||
// ( <route.component {...props} userid={1} email={"akira.miyata@mobilous.com"}/>
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
|
||||
render = {
|
||||
props =>
|
||||
get_token_from_storage_or_cookie() !== null ?
|
||||
( <route.component {...props} userid={UserId} email={UserData.email}/>
|
||||
) : ( <Redirect to = {
|
||||
{ pathname: "/sso" }
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Redirect
|
||||
from = "/"
|
||||
to = "/dashboard" / >
|
||||
</Switch> </Suspense >
|
||||
</CContainer> </main >
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheContent)
|
||||
import React, { Suspense, useState, useEffect } from 'react'
|
||||
import axios from 'axios';
|
||||
//import Cookies from 'js-cookie';
|
||||
import Cookies from 'universal-cookie';
|
||||
import {
|
||||
Redirect,
|
||||
Route,
|
||||
useLocation,
|
||||
Switch
|
||||
} from 'react-router-dom'
|
||||
import { CContainer, CFade } from '@coreui/react'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
import Sso from 'src/views/sso';
|
||||
|
||||
const loading = ( <
|
||||
div className = "pt-3 text-center" >
|
||||
<div className = "sk-spinner sk-spinner-pulse" > </div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const TheContent = () => {
|
||||
|
||||
const [SsoSession, setSsoSession] = useState('');
|
||||
const [UserData, setUserData] = useState('');
|
||||
const [UserId, setUserId] = useState('');
|
||||
|
||||
async function fetchSession() {
|
||||
|
||||
//setSsoSession('{ "expiration": 468, "client_address": "111.223.144.163", "protocol": "urn:oasis:names:tc:SAML:2.0:protocol", "identity_provider": "https://sso.ts.bizside.biz/idp/shibboleth", "authn_instant": "2021-09-03T08:26:41.248Z", "authncontext_class": "urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport", "attributes": [ { "name": "mail", "values": [ "akira.miyata@mobilous.com" ] } ] }')
|
||||
const result = await axios('https://fbssso.ts.bizside.biz/Shibboleth.sso/Session');
|
||||
if(JSON.stringify(SsoSession) !== JSON.stringify(result.data)) {
|
||||
console.log(result.data);
|
||||
setSsoSession(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSession()
|
||||
}, []);
|
||||
|
||||
async function postUserData(data) {
|
||||
|
||||
let axiosConfig = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=UTF-8',
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
}
|
||||
};
|
||||
|
||||
const result = await axios.post('https://fbssso.ts.bizside.biz/csv', data, axiosConfig)
|
||||
.catch((err) => {
|
||||
console.log("AXIOS ERROR: ", err);
|
||||
});
|
||||
console.log("user data posted");
|
||||
}
|
||||
|
||||
async function fetchUser() {
|
||||
if(SsoSession.attributes == null || SsoSession.attributes[0] === undefined) {
|
||||
return false;
|
||||
}
|
||||
const user_email = SsoSession.attributes[0].values[0]
|
||||
//console.log(user_email);
|
||||
const company_code = "FBS";
|
||||
const key = "api"
|
||||
const pwd = "c558a56c63c44f65956adde8863ecc3558f3e55a465d4338bb2e7d2692866fd8";
|
||||
|
||||
const result = await axios.get('https://fbssso.ts.bizside.biz/users?email=' + user_email, {
|
||||
auth: {
|
||||
username: key,
|
||||
password: pwd
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
return false;
|
||||
});
|
||||
//console.log(result.data);
|
||||
if(JSON.stringify(UserData) !== JSON.stringify(result.data[0])) {
|
||||
setUserData(result.data[0]);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function isCSVPath(){
|
||||
const url =window.location.href;
|
||||
if(url.includes('dashboard')) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function get_token_from_storage_or_cookie() {
|
||||
//return true;
|
||||
const cookies = new Cookies();
|
||||
const shib = cookies.get('_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468')
|
||||
if (shib !== undefined) {
|
||||
fetchSession().then(() => {
|
||||
if (SsoSession !== null) {
|
||||
console.log(shib);
|
||||
fetchUser().then(() => {
|
||||
if(UserId === ''){
|
||||
let id = Math.floor(100000 + Math.random() * 900000)
|
||||
setUserId(id);
|
||||
}
|
||||
const _firstname = UserData.firstname;
|
||||
const _lastname = UserData.lastname;
|
||||
const _email = UserData.email;
|
||||
const _empcode = UserData.employee_code;
|
||||
|
||||
const json_str = `[
|
||||
{
|
||||
"mailadress": "${_email}",
|
||||
"name": "${_lastname} ${_firstname}",
|
||||
"jsessionid": ${UserId},
|
||||
"_idp_session": "",
|
||||
"_opensaml_key": "_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468",
|
||||
"_opensaml_value": "${shib}"
|
||||
}
|
||||
]`;
|
||||
|
||||
|
||||
//const json_str = '[{"jsessonid": "' + UserId + '" , "name": "' + _firstname + ' ' +_lastname+ '", "mailadress":" ' + _email + '", "empcode": "' + _empcode + '"}]';
|
||||
if(_empcode !== null && _empcode !== undefined){
|
||||
if(isCSVPath()){
|
||||
postUserData(json_str);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<main className = "c-main">
|
||||
<CContainer fluid >
|
||||
<Suspense fallback = { loading }>
|
||||
<Switch > {
|
||||
routes.map((route, idx) => {
|
||||
return route.component && (
|
||||
<Route key = { idx }
|
||||
path = { route.path }
|
||||
exact = { route.exact }
|
||||
name = { route.name }
|
||||
|
||||
|
||||
|
||||
// render = {
|
||||
// props =>
|
||||
// ( <route.component {...props} userid={1} email={"akira.miyata@mobilous.com"}/>
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
|
||||
render = {
|
||||
props =>
|
||||
get_token_from_storage_or_cookie() !== null ?
|
||||
( <route.component {...props} userid={UserId} email={UserData.email}/>
|
||||
) : ( <Redirect to = {
|
||||
{ pathname: "/sso" }
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Redirect
|
||||
from = "/"
|
||||
to = "/dashboard" / >
|
||||
</Switch> </Suspense >
|
||||
</CContainer> </main >
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheContent)
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import React from 'react'
|
||||
import { CFooter } from '@coreui/react'
|
||||
|
||||
const TheFooter = () => {
|
||||
return (
|
||||
<CFooter fixed={false}>
|
||||
<div>
|
||||
<a href="sumasen.net" target="_blank" rel="noopener noreferrer">FBS</a>
|
||||
<span className="ml-1">© 2021 DigitalVox.</span>
|
||||
</div>
|
||||
<div className="mfs-auto">
|
||||
<span className="mr-1">搭載</span>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">DigitalVox</a>
|
||||
</div>
|
||||
</CFooter>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheFooter)
|
||||
import React from 'react'
|
||||
import { CFooter } from '@coreui/react'
|
||||
|
||||
const TheFooter = () => {
|
||||
return (
|
||||
<CFooter fixed={false}>
|
||||
<div>
|
||||
<a href="sumasen.net" target="_blank" rel="noopener noreferrer">FBS</a>
|
||||
<span className="ml-1">© 2021 DigitalVox.</span>
|
||||
</div>
|
||||
<div className="mfs-auto">
|
||||
<span className="mr-1">搭載</span>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">DigitalVox</a>
|
||||
</div>
|
||||
</CFooter>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheFooter)
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
CHeader,
|
||||
CToggler,
|
||||
CHeaderBrand,
|
||||
CHeaderNav,
|
||||
CHeaderNavItem,
|
||||
CHeaderNavLink,
|
||||
CSubheader,
|
||||
CBreadcrumbRouter,
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
|
||||
import {
|
||||
TheHeaderDropdown,
|
||||
TheHeaderDropdownMssg,
|
||||
TheHeaderDropdownNotif,
|
||||
TheHeaderDropdownTasks
|
||||
} from './index'
|
||||
|
||||
const TheHeader = () => {
|
||||
const dispatch = useDispatch()
|
||||
const sidebarShow = useSelector(state => state.sidebarShow)
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
|
||||
const toggleSidebarMobile = () => {
|
||||
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
|
||||
return (
|
||||
<CHeader withSubheader>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ml-md-3 d-lg-none"
|
||||
onClick={toggleSidebarMobile}
|
||||
/>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ml-3 d-md-down-none"
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
<CHeaderBrand className="mx-auto d-lg-none" to="/">
|
||||
{/* <CIcon name="logo" height="48" alt="Logo"/> */}
|
||||
<h2>FBS</h2>
|
||||
</CHeaderBrand>
|
||||
|
||||
<CHeaderNav className="d-md-down-none mr-auto">
|
||||
<CHeaderNavItem className="px-3" >
|
||||
<CHeaderNavLink to="/dashboard">ダッシュボード</CHeaderNavLink>
|
||||
</CHeaderNavItem>
|
||||
</CHeaderNav>
|
||||
|
||||
<CHeaderNav className="px-3">
|
||||
<TheHeaderDropdown/>
|
||||
</CHeaderNav>
|
||||
|
||||
<CSubheader className="px-3 justify-content-between">
|
||||
<CBreadcrumbRouter
|
||||
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
|
||||
routes={routes}
|
||||
/>
|
||||
</CSubheader>
|
||||
</CHeader>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeader
|
||||
import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
CHeader,
|
||||
CToggler,
|
||||
CHeaderBrand,
|
||||
CHeaderNav,
|
||||
CHeaderNavItem,
|
||||
CHeaderNavLink,
|
||||
CSubheader,
|
||||
CBreadcrumbRouter,
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
|
||||
import {
|
||||
TheHeaderDropdown,
|
||||
TheHeaderDropdownMssg,
|
||||
TheHeaderDropdownNotif,
|
||||
TheHeaderDropdownTasks
|
||||
} from './index'
|
||||
|
||||
const TheHeader = () => {
|
||||
const dispatch = useDispatch()
|
||||
const sidebarShow = useSelector(state => state.sidebarShow)
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
|
||||
const toggleSidebarMobile = () => {
|
||||
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
|
||||
return (
|
||||
<CHeader withSubheader>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ml-md-3 d-lg-none"
|
||||
onClick={toggleSidebarMobile}
|
||||
/>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ml-3 d-md-down-none"
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
<CHeaderBrand className="mx-auto d-lg-none" to="/">
|
||||
{/* <CIcon name="logo" height="48" alt="Logo"/> */}
|
||||
<h2>FBS</h2>
|
||||
</CHeaderBrand>
|
||||
|
||||
<CHeaderNav className="d-md-down-none mr-auto">
|
||||
<CHeaderNavItem className="px-3" >
|
||||
<CHeaderNavLink to="/dashboard">ダッシュボード</CHeaderNavLink>
|
||||
</CHeaderNavItem>
|
||||
</CHeaderNav>
|
||||
|
||||
<CHeaderNav className="px-3">
|
||||
<TheHeaderDropdown/>
|
||||
</CHeaderNav>
|
||||
|
||||
<CSubheader className="px-3 justify-content-between">
|
||||
<CBreadcrumbRouter
|
||||
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
|
||||
routes={routes}
|
||||
/>
|
||||
</CSubheader>
|
||||
</CHeader>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeader
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdown = () => {
|
||||
|
||||
function launchsso() {
|
||||
console.log("launch sso");
|
||||
window.open("https://fbssso.ts.bizside.biz/Shibboleth.sso/Login", "_self");
|
||||
}
|
||||
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-items mx-2"
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
アカウント
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
className="text-center"
|
||||
>
|
||||
<strong>アカウント</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem onClick={launchsso}>
|
||||
<CIcon name="cil-bell" className="mfe-2" />
|
||||
SSO ログイン
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeaderDropdown
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdown = () => {
|
||||
|
||||
function launchsso() {
|
||||
console.log("launch sso");
|
||||
window.open("https://fbssso.ts.bizside.biz/Shibboleth.sso/Login", "_self");
|
||||
}
|
||||
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-items mx-2"
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
アカウント
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
className="text-center"
|
||||
>
|
||||
<strong>アカウント</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem onClick={launchsso}>
|
||||
<CIcon name="cil-bell" className="mfe-2" />
|
||||
SSO ログイン
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeaderDropdown
|
||||
|
||||
@ -1,127 +1,127 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownMssg = () => {
|
||||
const itemsCount = 4
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} messages</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/7.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">John Doe</small>
|
||||
<small className="text-muted float-right mt-1">Just now</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">
|
||||
<span className="fa fa-exclamation text-danger"></span> Important message
|
||||
</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/6.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-warning"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Jane Dovve</small>
|
||||
<small className="text-muted float-right mt-1">5 minutes ago</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/5.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Janet Doe</small>
|
||||
<small className="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/4.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-info"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Joe Doe</small>
|
||||
<small className="text-muted float-right mt-1">4:03 AM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownMssg = () => {
|
||||
const itemsCount = 4
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} messages</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/7.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">John Doe</small>
|
||||
<small className="text-muted float-right mt-1">Just now</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">
|
||||
<span className="fa fa-exclamation text-danger"></span> Important message
|
||||
</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/6.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-warning"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Jane Dovve</small>
|
||||
<small className="text-muted float-right mt-1">5 minutes ago</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/5.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Janet Doe</small>
|
||||
<small className="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/4.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<span className="c-avatar-status bg-info"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Joe Doe</small>
|
||||
<small className="text-muted float-right mt-1">4:03 AM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
|
||||
</div>
|
||||
</div>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeaderDropdownMssg
|
||||
@ -1,70 +1,70 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownNotif = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-bell"/>
|
||||
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
className="text-center"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} notifications</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
>
|
||||
<strong>Server</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>CPU Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="info" value={25} />
|
||||
<small className="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>Memory Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="warning" value={70} />
|
||||
<small className="text-muted">11444GB/16384MB</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>SSD 1 Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="danger" value={90} />
|
||||
<small className="text-muted">243GB/256GB</small>
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownNotif = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-bell"/>
|
||||
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
className="text-center"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} notifications</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
>
|
||||
<strong>Server</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>CPU Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="info" value={25} />
|
||||
<small className="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>Memory Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="warning" value={70} />
|
||||
<small className="text-muted">11444GB/16384MB</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
<small><b>SSD 1 Usage</b></small>
|
||||
</div>
|
||||
<CProgress size="xs" color="danger" value={90} />
|
||||
<small className="text-muted">243GB/256GB</small>
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeaderDropdownNotif
|
||||
@ -1,59 +1,59 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownTasks = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-list" />
|
||||
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
className="text-center"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} pending tasks</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Upgrade NPM & Bower <span
|
||||
className="float-right"><strong>0%</strong></span></div>
|
||||
<CProgress size="xs" color="info" value={0} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
|
||||
<CProgress size="xs" color="danger" value={25} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
|
||||
<CProgress size="xs" color="warning" value={50} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
|
||||
<CProgress size="xs" color="info" value={75} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
|
||||
<CProgress size="xs" color="success" value={100} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownTasks = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-list" />
|
||||
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
className="text-center"
|
||||
color="light"
|
||||
>
|
||||
<strong>You have {itemsCount} pending tasks</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Upgrade NPM & Bower <span
|
||||
className="float-right"><strong>0%</strong></span></div>
|
||||
<CProgress size="xs" color="info" value={0} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
|
||||
<CProgress size="xs" color="danger" value={25} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
|
||||
<CProgress size="xs" color="warning" value={50} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
|
||||
<CProgress size="xs" color="info" value={75} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
|
||||
<CProgress size="xs" color="success" value={100} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheHeaderDropdownTasks
|
||||
@ -1,25 +1,25 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
TheContent,
|
||||
TheSidebar,
|
||||
TheFooter,
|
||||
TheHeader
|
||||
} from './index'
|
||||
|
||||
const TheLayout = () => {
|
||||
|
||||
return (
|
||||
<div className="c-app c-default-layout">
|
||||
<TheSidebar/>
|
||||
<div className="c-wrapper">
|
||||
<TheHeader/>
|
||||
<div className="c-body">
|
||||
<TheContent/>
|
||||
</div>
|
||||
<TheFooter/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheLayout
|
||||
import React from 'react'
|
||||
import {
|
||||
TheContent,
|
||||
TheSidebar,
|
||||
TheFooter,
|
||||
TheHeader
|
||||
} from './index'
|
||||
|
||||
const TheLayout = () => {
|
||||
|
||||
return (
|
||||
<div className="c-app c-default-layout">
|
||||
<TheSidebar/>
|
||||
<div className="c-wrapper">
|
||||
<TheHeader/>
|
||||
<div className="c-body">
|
||||
<TheContent/>
|
||||
</div>
|
||||
<TheFooter/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TheLayout
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
CCreateElement,
|
||||
CSidebar,
|
||||
CSidebarBrand,
|
||||
CSidebarNav,
|
||||
CSidebarNavDivider,
|
||||
CSidebarNavTitle,
|
||||
CSidebarMinimizer,
|
||||
CSidebarNavDropdown,
|
||||
CSidebarNavItem,
|
||||
} from '@coreui/react'
|
||||
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// sidebar nav config
|
||||
import navigation from './_nav'
|
||||
|
||||
const TheSidebar = () => {
|
||||
const dispatch = useDispatch()
|
||||
const show = useSelector(state => state.sidebarShow)
|
||||
|
||||
return (
|
||||
<CSidebar
|
||||
show={show}
|
||||
onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
|
||||
>
|
||||
<CSidebarBrand className="d-md-down-none" to="/">
|
||||
<h2>FBS</h2>
|
||||
<CIcon
|
||||
className="c-sidebar-brand-minimized"
|
||||
name="sygnet"
|
||||
height={35}
|
||||
/>
|
||||
</CSidebarBrand>
|
||||
<CSidebarNav>
|
||||
|
||||
<CCreateElement
|
||||
items={navigation}
|
||||
components={{
|
||||
CSidebarNavDivider,
|
||||
CSidebarNavDropdown,
|
||||
CSidebarNavItem,
|
||||
CSidebarNavTitle
|
||||
}}
|
||||
/>
|
||||
</CSidebarNav>
|
||||
<CSidebarMinimizer className="c-d-md-down-none"/>
|
||||
</CSidebar>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheSidebar)
|
||||
import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
CCreateElement,
|
||||
CSidebar,
|
||||
CSidebarBrand,
|
||||
CSidebarNav,
|
||||
CSidebarNavDivider,
|
||||
CSidebarNavTitle,
|
||||
CSidebarMinimizer,
|
||||
CSidebarNavDropdown,
|
||||
CSidebarNavItem,
|
||||
} from '@coreui/react'
|
||||
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// sidebar nav config
|
||||
import navigation from './_nav'
|
||||
|
||||
const TheSidebar = () => {
|
||||
const dispatch = useDispatch()
|
||||
const show = useSelector(state => state.sidebarShow)
|
||||
|
||||
return (
|
||||
<CSidebar
|
||||
show={show}
|
||||
onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
|
||||
>
|
||||
<CSidebarBrand className="d-md-down-none" to="/">
|
||||
<h2>FBS</h2>
|
||||
<CIcon
|
||||
className="c-sidebar-brand-minimized"
|
||||
name="sygnet"
|
||||
height={35}
|
||||
/>
|
||||
</CSidebarBrand>
|
||||
<CSidebarNav>
|
||||
|
||||
<CCreateElement
|
||||
items={navigation}
|
||||
components={{
|
||||
CSidebarNavDivider,
|
||||
CSidebarNavDropdown,
|
||||
CSidebarNavItem,
|
||||
CSidebarNavTitle
|
||||
}}
|
||||
/>
|
||||
</CSidebarNav>
|
||||
<CSidebarMinimizer className="c-d-md-down-none"/>
|
||||
</CSidebar>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TheSidebar)
|
||||
|
||||
@ -1,51 +1,51 @@
|
||||
import React from 'react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const _nav = [{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: 'ダッシュボード',
|
||||
to: '/dashboard',
|
||||
icon: < CIcon name = "cil-speedometer"
|
||||
customClasses = "c-sidebar-nav-icon" / >
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavTitle',
|
||||
_children: ['レポート']
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: '報告書',
|
||||
to: '/reports',
|
||||
icon: 'cil-drop',
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: 'アップロード',
|
||||
to: '/uploader',
|
||||
icon: 'cil-drop',
|
||||
},
|
||||
// {
|
||||
// _tag: 'CSidebarNavTitle',
|
||||
// _children: ['Components']
|
||||
// },
|
||||
// {
|
||||
// _tag: 'CSidebarNavDropdown',
|
||||
// name: 'Base',
|
||||
// route: '/base',
|
||||
// icon: 'cil-puzzle',
|
||||
// _children: [
|
||||
// {
|
||||
// _tag: 'CSidebarNavItem',
|
||||
// name: 'Breadcrumb',
|
||||
// to: '/base/breadcrumbs',
|
||||
// },
|
||||
// {
|
||||
// _tag: 'CSidebarNavItem',
|
||||
// name: 'Tooltips',
|
||||
// to: '/base/tooltips',
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
]
|
||||
|
||||
import React from 'react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const _nav = [{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: 'ダッシュボード',
|
||||
to: '/dashboard',
|
||||
icon: < CIcon name = "cil-speedometer"
|
||||
customClasses = "c-sidebar-nav-icon" / >
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavTitle',
|
||||
_children: ['レポート']
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: '報告書',
|
||||
to: '/reports',
|
||||
icon: 'cil-drop',
|
||||
},
|
||||
{
|
||||
_tag: 'CSidebarNavItem',
|
||||
name: 'アップロード',
|
||||
to: '/uploader',
|
||||
icon: 'cil-drop',
|
||||
},
|
||||
// {
|
||||
// _tag: 'CSidebarNavTitle',
|
||||
// _children: ['Components']
|
||||
// },
|
||||
// {
|
||||
// _tag: 'CSidebarNavDropdown',
|
||||
// name: 'Base',
|
||||
// route: '/base',
|
||||
// icon: 'cil-puzzle',
|
||||
// _children: [
|
||||
// {
|
||||
// _tag: 'CSidebarNavItem',
|
||||
// name: 'Breadcrumb',
|
||||
// to: '/base/breadcrumbs',
|
||||
// },
|
||||
// {
|
||||
// _tag: 'CSidebarNavItem',
|
||||
// name: 'Tooltips',
|
||||
// to: '/base/tooltips',
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
]
|
||||
|
||||
export default _nav
|
||||
@ -1,21 +1,21 @@
|
||||
import TheContent from './TheContent'
|
||||
import TheFooter from './TheFooter'
|
||||
import TheHeader from './TheHeader'
|
||||
import TheHeaderDropdown from './TheHeaderDropdown'
|
||||
import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
|
||||
import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
|
||||
import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
|
||||
import TheLayout from './TheLayout'
|
||||
import TheSidebar from './TheSidebar'
|
||||
|
||||
export {
|
||||
TheContent,
|
||||
TheFooter,
|
||||
TheHeader,
|
||||
TheHeaderDropdown,
|
||||
TheHeaderDropdownMssg,
|
||||
TheHeaderDropdownNotif,
|
||||
TheHeaderDropdownTasks,
|
||||
TheLayout,
|
||||
TheSidebar
|
||||
}
|
||||
import TheContent from './TheContent'
|
||||
import TheFooter from './TheFooter'
|
||||
import TheHeader from './TheHeader'
|
||||
import TheHeaderDropdown from './TheHeaderDropdown'
|
||||
import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
|
||||
import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
|
||||
import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
|
||||
import TheLayout from './TheLayout'
|
||||
import TheSidebar from './TheSidebar'
|
||||
|
||||
export {
|
||||
TheContent,
|
||||
TheFooter,
|
||||
TheHeader,
|
||||
TheHeaderDropdown,
|
||||
TheHeaderDropdownMssg,
|
||||
TheHeaderDropdownNotif,
|
||||
TheHeaderDropdownTasks,
|
||||
TheLayout,
|
||||
TheSidebar
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user