Init

Preview: http://dashboards.webkom.co/react/airframe
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
--- a/app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js
+++ b/app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+    Button,
+    DropdownToggle,
+    Nav,
+    NavItem,
+    NavLink,
+    Avatar,
+    AvatarAddOn,
+    Navbar,
+    NavbarToggler,
+    UncontrolledDropdown,
+    ThemeConsumer,
+} from './../../../../components';
+import { randomAvatar } from './../../../../utilities';
+
+import { NavbarActivityFeed } from
+    './../../../../layout/components/NavbarActivityFeed';
+import { NavbarMessages } from
+    './../../../../layout/components/NavbarMessages';
+import { NavbarUser } from
+    './../../../../layout/components/NavbarUser';
+import { DropdownProfile } from
+    './../../../components/Dropdowns/DropdownProfile';
+import { NavbarNavigation } from
+    './../../../components/Navbars/NavbarNavigation';
+import { LogoThemed } from
+    './../../../components/LogoThemed/LogoThemed';
+
+export const LayoutNavbar = () => (
+    <React.Fragment>
+        <Navbar light expand="lg" themed>
+            <Link to="/" className="navbar-brand mr-0 mr-sm-3">
+                <LogoThemed className="mb-1" checkBackground />
+            </Link>
+
+            <Nav pills>
+                <NavItem>
+                    <NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
+                        <i className="fa fa-fw fa-bars"></i>
+                    </NavLink>
+                </NavItem>
+            </Nav>
+
+            { /* Navigation with Collapse */ }
+            <NavbarNavigation pills />
+
+            { /* END Navbar: Left Side */ }
+            { /* START Navbar: Right Side */ }
+            <Nav className="ml-auto" pills>
+                <NavbarMessages />
+                <NavbarActivityFeed />
+                { /* START Navbar: Dropdown */ }
+                <UncontrolledDropdown nav inNavbar>
+                    <DropdownToggle nav>
+                        <Avatar.Image
+                            size="sm"
+                            src={ randomAvatar() }
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="danger"
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        /> 
+                    </DropdownToggle>
+                    <DropdownProfile  
+                        right  
+                    />
+                </UncontrolledDropdown>
+                { /* END Navbar: Dropdown */ }
+                <NavbarUser className="d-none d-lg-block" />
+            </Nav>
+            { /* END Navbar: Right Side */ }
+        </Navbar>
+
+        <Navbar light shadow expand="lg" className="py-3 bg-white">
+            <h1 className="mb-0 h4">
+                Navbar Only
+            </h1>
+            
+            <ThemeConsumer>
+            {
+                ({ color }) => (
+                    <Button color={ color } className="px-4 my-sm-0">
+                        Download <i className="fa ml-1 fa-fw fa-download"></i>
+                    </Button>
+                )
+            }
+            </ThemeConsumer>
+        </Navbar>
+    </React.Fragment>
+);