Add UI pages block

Author: Blari

.gitignore

@@ -1,7 +1,2 @@
 /node_modules/
-/.idea/.gitignore
-/.idea/misc.xml
-/.idea/modules.xml
-/.idea/inspectionProfiles/Project_Default.xml
-/.idea/React-Material-Admin-Full_frontend.iml
-/.idea/vcs.xml
+/.idea/

package.json

@@ -28,6 +28,7 @@
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.2.1",
     "file-loader": "3.0.1",
+    "font-awesome": "^4.7.0",
     "formik": "2.2.9",
     "history": "4.10.1",
     "jsonwebtoken": "^8.5.1",
@@ -41,6 +42,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-swipeable-views": "^0.14.0",
+    "react-swipeable-views-utils": "^0.14.0",
     "react-syntax-highlighter": "^11.0.2",
     "recharts": "^2.1.10",
     "redux": "^4.0.5",

src/components/Layout/Layout.js

@@ -33,6 +33,17 @@ import GridPage from '../../pages/grid'
 import StaticTablesPage from '../../pages/tables'
 import DynamicTablesPage from '../../pages/tables/dynamic'
 
+import IconsPage from '../../pages/icons'
+import BadgesPage from '../../pages/badge'
+import CarouselsPage from '../../pages/carousel'
+import CardsPage from '../../pages/cards'
+import ModalsPage from '../../pages/modal'
+// import NotificationsPage from '../../pages/notifications'
+import NavbarsPage from '../../pages/nav'
+import TooltipsPage from '../../pages/tooltips'
+import TabsPage from '../../pages/tabs'
+import ProgressPage from '../../pages/progress'
+import WidgetsPage from '../../pages/widget'
 
 import BreadCrumbs from '../../components/BreadCrumbs';
 
@@ -84,8 +95,19 @@ function Layout(props) {
           <Route path="/app/core/grid" component={GridPage} />
 
           <Route path="/app/tables/static" component={StaticTablesPage} />
-          <Route path="/app/tables/dynamic" component={DynamicTablesPage}
-          />
+          <Route path="/app/tables/dynamic" component={DynamicTablesPage} />
+
+          <Route path="/app/ui/icons" component={IconsPage} />
+          <Route path="/app/ui/badge" component={BadgesPage} />
+          <Route path="/app/ui/carousel" component={CarouselsPage} />
+          <Route path="/app/ui/modal" component={ModalsPage} />
+          <Route path="/app/ui/navbar" component={NavbarsPage} />
+          <Route path="/app/ui/tooltips" component={TooltipsPage} />
+          <Route path="/app/ui/tabs" component={TabsPage} />
+          <Route path="/app/ui/cards" component={CardsPage} />
+          <Route path="/app/ui/widget" component={WidgetsPage} />
+          <Route path="/app/ui/progress" component={ProgressPage} />
+          {/*<Route path="/app/ui/notifications" component={NotificationsPage} />*/}
           />
 
           <Route path={'/app/api-docs'} exact
@@ -100,7 +122,11 @@ function Layout(props) {
               />
             )}
           />
-
+          <Route
+            exact
+            path="/app/ui"
+            render={() => <Redirect to="/app/ui/icons" />}
+          />
           <Route path={'/app/users'} exact component={UsersTablePage} />
           <Route path={'/app/user/new'} exact component={AddUser} />
           <Route

src/components/Sidebar/SidebarStructure.js

@@ -114,6 +114,39 @@ const structure = [
       },
     ],
   },
+  {
+    id: 8,
+    label: 'UI Elements',
+    link: '/app/ui',
+    icon: <UIElementsIcon />,
+    children: [
+      { label: 'Icons', link: '/app/ui/icons' },
+      { label: 'Badge', link: '/app/ui/badge' },
+      { label: 'Carousel', link: '/app/ui/carousel' },
+      { label: 'Cards', link: '/app/ui/cards' },
+      { label: 'Modal', link: '/app/ui/modal' },
+      {
+        label: 'Notifications',
+        link: '/app/ui/notifications',
+      },
+      { label: 'Navbar', link: '/app/ui/navbar' },
+      { label: 'Tooltips', link: '/app/ui/tooltips' },
+      { label: 'Tabs', link: '/app/ui/tabs' },
+      { label: 'Pagination', link: '/app/tables/dynamic' },
+      { label: 'Progress', link: '/app/ui/progress' },
+      { label: 'Widget', link: '/app/ui/widget' },
+    ],
+  },
+  {
+    id: 9,
+    label: 'Forms',
+    link: '/app/forms',
+    icon: <DescriptionIcon />,
+    children: [
+      { label: 'Form Elements', link: '/app/forms/elements' },
+      { label: 'Form Validation', link: '/app/forms/validation' },
+    ],
+  },
 ];
 
 export default structure;