+
diff --git a/clientapp/src/layouts/admin/scss/style.module.scss b/clientapp/src/layouts/admin/scss/style.module.scss
new file mode 100644
index 0000000..bd38357
--- /dev/null
+++ b/clientapp/src/layouts/admin/scss/style.module.scss
@@ -0,0 +1,55 @@
+$background: #7386d5;
+
+.wrapper {
+ padding-top: 57px;
+
+ .sidebar {
+ position: fixed;
+
+ background: $background;
+
+ min-width: 250px;
+ max-width: 250px;
+ height: 100%;
+
+ margin-left: -250px;
+ transition: all 0.5s;
+
+ &.isopen {
+ margin-left: 0;
+ transition: 0.5s;
+ }
+ }
+
+ .content {
+ transition: all 0.5s;
+
+ &.isopen {
+ padding-left: 255px;
+ }
+ }
+}
+
+@media(max-width: 768px) {
+ .wrapper {
+ padding-top: 51px;
+
+ .sidebar {
+ &.isopen {
+ min-width: 65px;
+ max-width: 65px;
+
+ margin-left: 0;
+ transition: all 0.5s, height 0s;
+ }
+ }
+
+ .content {
+ transition: all 0.5s;
+
+ &.isopen {
+ padding-left: 65px;
+ }
+ }
+ }
+}
diff --git a/clientapp/src/layouts/admin/scss/style.scss b/clientapp/src/layouts/admin/scss/style.scss
deleted file mode 100644
index a43f3c5..0000000
--- a/clientapp/src/layouts/admin/scss/style.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-//colors
-$color_science_blue_approx: #0366d6;
-$color_cerise_approx: #e01a76;
-$white: #fff;
-$color_denim_approx: #1b6ec2;
-$color_fun_blue_approx: #1861ac;
-$black_5: rgba(0, 0, 0, .05);
-
-html {
- font-size: 14px;
-}
-
-a {
- color: $color_science_blue_approx;
- &.navbar-brand {
- white-space: normal;
- text-align: center;
- //Instead of the line below you could use @include word-break($value)
- word-break: break-all;
- }
-}
-
-code {
- color: $color_cerise_approx;
-}
-
-.btn-primary {
- color: $white;
- background-color: $color_denim_approx;
- border-color: $color_fun_blue_approx;
-}
-
-.box-shadow {
- //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
- box-shadow: 0 .25rem .75rem $black_5;
-}
-
-@media(min-width: 768px) {
- html {
- font-size: 16px;
- }
-}
-
-
-
-
-
-.wrapper {
- padding-top: 57px;
-
- .sidebar {
- position: fixed;
-
- background: #7386d5;
- color: #fff;
-
- min-width: 250px;
- max-width: 250px;
- height: 100%;
-
- margin-left: -250px;
- transition: all 0.5s;
- &.is-open {
- margin-left: 0;
- transition: 0.5s;
- }
-
- a,
- a:hover,
- a:focus {
- cursor: pointer;
- color: inherit;
- text-decoration: none;
- transition: all 0.3s;
-
- .link-title {
- padding-left: 10px;
- }
- }
-
- .side-menu {
-
- .menu-title {
- color: #fff;
- padding: 10px;
- }
-
- .nav-item {
- &:hover {
- color: #7386d5;
- background: #fff;
- }
-
- .dropdown-toggle {
- &::after {
-
- }
- }
- }
-
- /* Collabsable menu nav item */
- .menu-open {
- background: #6d7fcc;
- }
-
- /* Collapsable menu items container */
- .items-menu {
- color: #fff;
- background: #6d7fcc;
- }
- }
- }
-
- .content {
- transition: all 0.5s;
-
- &.is-open {
- padding-left: 255px;
- }
- }
-}
-
-
-
-
-
-
-
-
-
-@media(max-width: 768px) {
- .wrapper {
- padding-top: 51px;
-
- .sidebar {
- &.is-open {
- min-width: 60px;
- max-width: 60px;
-
- margin-left: 0;
- transition: all 0.5s, height 0s;
- }
-
- .side-menu {
- .menu-title {
- display: none;
- }
-
- .nav-item {
- .link-title {
- display: none;
- }
- .dropdown-toggle {
- &::after {
-
- }
- }
- }
- }
- }
-
- .content {
- transition: all 0.5s;
-
- &.is-open {
- padding-left: 65px;
- }
- }
- }
-}
diff --git a/clientapp/src/layouts/index.tsx b/clientapp/src/layouts/index.tsx
index 6f7c717..656877a 100644
--- a/clientapp/src/layouts/index.tsx
+++ b/clientapp/src/layouts/index.tsx
@@ -5,6 +5,9 @@ import { AdminLayout } from './admin'
import { ILayout } from './interfaces'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './scss/style.scss'
+
interface ILayouts {
[key: string]: React.FC
;
}
diff --git a/clientapp/src/layouts/public/NavMenu/index.tsx b/clientapp/src/layouts/public/NavMenu/index.tsx
index c16e759..6c52d0d 100644
--- a/clientapp/src/layouts/public/NavMenu/index.tsx
+++ b/clientapp/src/layouts/public/NavMenu/index.tsx
@@ -1,8 +1,12 @@
-import React, { useState } from 'react'
-import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'
+import React, { FC, useState } from 'react'
import { Link } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'
+import { FeatherIcon } from '../../../components/FeatherIcons'
+import { IMenuItem, IReduxState } from '../../../interfaces'
-const NavMenu = () => {
+const NavMenu : FC = () => {
+ let { siteName, topMenu = [] } = useSelector((state: IReduxState) => state.settings)
const [state, hookState] = useState({
isOpen: false
@@ -16,20 +20,18 @@ const NavMenu = () => {
return
-
- react-redux-template
+ {siteName} NavbarBrand>
-
- Home
-
-
- Counter
-
-
- Fetch data
-
+ {topMenu.map((item: IMenuItem, index: number) => {
+ return
+
+ {item.icon ? : ''}
+ {item.title}
+
+
+ })}
@@ -38,4 +40,4 @@ const NavMenu = () => {
export {
NavMenu
-}
\ No newline at end of file
+}
diff --git a/clientapp/src/layouts/public/index.tsx b/clientapp/src/layouts/public/index.tsx
index 68875ec..a17ba63 100644
--- a/clientapp/src/layouts/public/index.tsx
+++ b/clientapp/src/layouts/public/index.tsx
@@ -4,15 +4,16 @@ import { NavMenu } from './NavMenu'
import { ILayout } from '../interfaces'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './scss/style.scss'
+import s from './scss/style.module.scss'
const PublicLayout: FC = ({ children = null }) => {
return <>
-
- {children}
-
+
+
+ {children}
+
+
>
}
diff --git a/clientapp/src/layouts/public/scss/style.module.scss b/clientapp/src/layouts/public/scss/style.module.scss
new file mode 100644
index 0000000..4bc7db4
--- /dev/null
+++ b/clientapp/src/layouts/public/scss/style.module.scss
@@ -0,0 +1,10 @@
+
+.wrapper {
+ padding-top: 57px;
+}
+
+@media(max-width: 768px) {
+ .wrapper {
+ padding-top: 51px;
+ }
+}
diff --git a/clientapp/src/layouts/public/scss/style.scss b/clientapp/src/layouts/scss/style.scss
similarity index 92%
rename from clientapp/src/layouts/public/scss/style.scss
rename to clientapp/src/layouts/scss/style.scss
index f12a7a3..c856abd 100644
--- a/clientapp/src/layouts/public/scss/style.scss
+++ b/clientapp/src/layouts/scss/style.scss
@@ -7,7 +7,7 @@ $color_fun_blue_approx: #1861ac;
$black_5: rgba(0, 0, 0, .05);
html {
- font-size: 14px;
+ font-size: 16px;
}
a {
@@ -35,8 +35,8 @@ code {
box-shadow: 0 .25rem .75rem $black_5;
}
-@media(min-width: 768px) {
+@media(max-width: 768px) {
html {
- font-size: 16px;
+ font-size: 14px;
}
-}
\ No newline at end of file
+}
diff --git a/clientapp/src/pages/AdminHome.tsx b/clientapp/src/pages/AdminHome.tsx
new file mode 100644
index 0000000..0285754
--- /dev/null
+++ b/clientapp/src/pages/AdminHome.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+const AdminHome = () => {
+
+ return Admin Home
+}
+
+export {
+ AdminHome
+}
\ No newline at end of file
diff --git a/clientapp/src/pages/index.tsx b/clientapp/src/pages/index.tsx
index e8dfe89..3daf167 100644
--- a/clientapp/src/pages/index.tsx
+++ b/clientapp/src/pages/index.tsx
@@ -3,6 +3,9 @@ import React, { FC } from 'react'
import { Home } from './Home'
import { Counter } from './Counter'
import { FetchData } from './FetchData'
+
+import { AdminHome } from './AdminHome'
+
import { Signin } from './Signin'
import { Signup } from './Signup'
@@ -14,6 +17,9 @@ const pages: IPages = {
Home,
Counter,
FetchData,
+
+ AdminHome,
+
Signin,
Signup
}
diff --git a/clientapp/src/store/reducers/Settings.ts b/clientapp/src/store/reducers/Settings.ts
index 1ddcd72..2c64944 100644
--- a/clientapp/src/store/reducers/Settings.ts
+++ b/clientapp/src/store/reducers/Settings.ts
@@ -3,7 +3,9 @@ import { AppThunkAction } from '../'
import { IMenuItem, IRoute } from '../../interfaces'
export interface ISettingsState {
+ siteName: string,
routes: IRoute [],
+ adminRoutes: IRoute [],
serviceRoutes: IRoute [],
sideMenu?: IMenuItem [],
topMenu?: IMenuItem [],
@@ -16,7 +18,9 @@ interface RequestSettingsAction {
interface ReceiveSettingsAction {
type: 'RECEIVE_SETTINGS',
+ siteName: string,
routes: IRoute [],
+ adminRoutes: IRoute [],
serviceRoutes: IRoute [],
sideMenu?: IMenuItem [],
topMenu?: IMenuItem [],
@@ -31,6 +35,8 @@ export const actionCreators = {
const appState = getState()
+ const siteName = "MAKS-IT"
+
const routes : IRoute[] = [
{ path: "/", component: "Home" },
{ path: "/home", component: "Home" },
@@ -43,7 +49,10 @@ export const actionCreators = {
}
]
},
-
+ ]
+
+ const adminRoutes : IRoute [] = [
+ { path: "/admin", component: "AdminHome" },
]
const serviceRoutes : IRoute[] = [
@@ -53,33 +62,10 @@ export const actionCreators = {
const sideMenu : IMenuItem [] = [
{
- icon: "activity",
+ icon: "alert-triangle",
title: "Home",
- items: [
- {
- icon: "activity",
- title: "Home 1",
- target: "/Home-1",
- },
- {
- icon: "activity",
- title: "Home 2",
- target: "/Home-2",
- },
- {
- icon: "activity",
- title: "Home 3",
- target: "/Home-3",
- },
- ]
+ target: "/admin"
},
-
- {
- icon: "info",
- title: "About",
- target: "/about"
- },
-
{
icon: "activity",
title: "Page",
@@ -96,17 +82,15 @@ export const actionCreators = {
},
]
},
-
{
- icon: "alert-triangle",
- title: "Faq",
- target: "/faq"
+ icon: "",
+ title: "Counter",
+ target: "/counter",
},
-
{
- icon: "phone-call",
- title: "Contact",
- target: "/contact"
+ icon: "",
+ title: "Fetch data",
+ target: "/fetch-data"
},
]
@@ -116,16 +100,7 @@ export const actionCreators = {
title: "Home",
target: "/"
},
- {
- icon: "",
- title: "Counter",
- target: "/counter",
- },
- {
- icon: "",
- title: "Fetch data",
- target: "fetch-data"
- },
+
{
icon: "",
title: "Signin",
@@ -138,12 +113,14 @@ export const actionCreators = {
}
]
- dispatch({ type: 'RECEIVE_SETTINGS', routes, serviceRoutes, sideMenu, topMenu })
+ dispatch({ type: 'RECEIVE_SETTINGS', siteName, routes, adminRoutes, serviceRoutes, sideMenu, topMenu })
}
}
-const unloadedState: ISettingsState = {
+const unloadedState: ISettingsState = {
+ siteName: "reactredux",
routes: [],
+ adminRoutes: [],
serviceRoutes: [],
sideMenu: [],
topMenu: [],
@@ -159,7 +136,9 @@ export const reducer: Reducer = (state: ISettingsState | undefin
switch (action.type) {
case 'REQUEST_SETTINGS':
return {
+ siteName: state.siteName,
routes: state.routes,
+ adminRoutes: state.adminRoutes,
serviceRoutes: state.serviceRoutes,
sideMenu: state.sideMenu,
topMenu: state.topMenu,
@@ -168,7 +147,9 @@ export const reducer: Reducer = (state: ISettingsState | undefin
case 'RECEIVE_SETTINGS':
return {
+ siteName: action.siteName,
routes: action.routes,
+ adminRoutes: action.adminRoutes,
serviceRoutes: action.serviceRoutes,
sideMenu: action.sideMenu,
topMenu: action.topMenu,