coreui-free-react-admin-template

1
import React, { useState } from 'react'
2
import {
3
  CCard,
4
  CCardBody,
5
  CCardHeader,
6
  CCollapse,
7
  CDropdownItem,
8
  CDropdownMenu,
9
  CDropdownToggle,
10
  CForm,
11
  CFormInput,
12
  CImage,
13
  CNavbar,
14
  CNavbarNav,
15
  CNavbarBrand,
16
  CNavbarText,
17
  CNavbarToggler,
18
  CNavLink,
19
  CDropdown,
20
  CButton,
21
} from '@coreui/react'
22
import { DocsLink } from 'src/components'
23

24
const CNavbars = () => {
25
  const [visible, setVisible] = useState(false)
26
  const [isOpenDropdown, setIsOpenDropdown] = useState(false)
27
  const [navbarText, setNavbarText] = useState(false)
28

29
  return (
30
    <>
31
      <CCard className="mb-4">
32
        <CCardHeader>
33
          CNavbar
34
          <DocsLink name="CNavbar" />
35
        </CCardHeader>
36
        <CCardBody>
37
          <CNavbar expandable="sm" color="info">
38
            <CNavbarToggler onClick={() => setVisible(!visible)} />
39
            <CNavbarBrand>NavbarBrand</CNavbarBrand>
40
            <CCollapse show={visible} navbar>
41
              <CNavbarNav>
42
                <CNavLink>Home</CNavLink>
43
                <CNavLink>Link</CNavLink>
44
              </CNavbarNav>
45
              <CNavbarNav className="ms-auto">
46
                <CForm className="d-flex">
47
                  <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
48
                  <CButton color="light" className="my-2 my-sm-0" type="submit">
49
                    Search
50
                  </CButton>
51
                </CForm>
52
                <CDropdown inNav>
53
                  <CDropdownToggle color="primary">Lang</CDropdownToggle>
54
                  <CDropdownMenu>
55
                    <CDropdownItem>EN</CDropdownItem>
56
                    <CDropdownItem>ES</CDropdownItem>
57
                    <CDropdownItem>RU</CDropdownItem>
58
                    <CDropdownItem>FA</CDropdownItem>
59
                  </CDropdownMenu>
60
                </CDropdown>
61
                <CDropdown inNav>
62
                  <CDropdownToggle color="primary">User</CDropdownToggle>
63
                  <CDropdownMenu>
64
                    <CDropdownItem>Account</CDropdownItem>
65
                    <CDropdownItem>Settings</CDropdownItem>
66
                  </CDropdownMenu>
67
                </CDropdown>
68
              </CNavbarNav>
69
            </CCollapse>
70
          </CNavbar>
71
        </CCardBody>
72
      </CCard>
73

74
      <CCard className="mb-4">
75
        <CCardHeader>CNavbar brand</CCardHeader>
76
        <CCardBody>
77
          <CNavbar color="faded" light>
78
            <CNavbarBrand>
79
              <CImage
80
                src="https://placekitten.com/g/30/30"
81
                className="d-inline-block align-top"
82
                alt="CoreuiVue"
83
              />
84
              CoreUI React
85
            </CNavbarBrand>
86
          </CNavbar>
87
        </CCardBody>
88
      </CCard>
89

90
      <CCard className="mb-4">
91
        <CCardHeader>CNavbar text</CCardHeader>
92
        <CCardBody>
93
          <CNavbar toggleable="sm" light color="light">
94
            <CNavbarToggler
95
              inNavbar
96
              onClick={() => {
97
                setNavbarText(!navbarText)
98
              }}
99
            />
100
            <CNavbarBrand>NavbarBrand</CNavbarBrand>
101
            <CCollapse show={navbarText}>
102
              <CNavbarNav>
103
                <CNavbarText>Navbar text</CNavbarText>
104
              </CNavbarNav>
105
            </CCollapse>
106
          </CNavbar>
107
        </CCardBody>
108
      </CCard>
109

110
      <CCard className="mb-4">
111
        <CCardHeader>CNavbar dropdown</CCardHeader>
112
        <CCardBody>
113
          <CNavbar expandable="false" color="primary">
114
            <CNavbarToggler
115
              inNavbar
116
              onClick={() => {
117
                setIsOpenDropdown(!isOpenDropdown)
118
              }}
119
            />
120
            <CCollapse show={isOpenDropdown} navbar>
121
              <CNavbarNav>
122
                <CNavLink>Home</CNavLink>
123
                <CNavLink>Link</CNavLink>
124
                <CDropdown inNav>
125
                  <CDropdownToggle color="primary">Lang</CDropdownToggle>
126
                  <CDropdownMenu>
127
                    <CDropdownItem>EN</CDropdownItem>
128
                    <CDropdownItem>ES</CDropdownItem>
129
                    <CDropdownItem>RU</CDropdownItem>
130
                    <CDropdownItem>FA</CDropdownItem>
131
                  </CDropdownMenu>
132
                </CDropdown>
133
                <CDropdown inNav>
134
                  <CDropdownToggle color="primary">User</CDropdownToggle>
135
                  <CDropdownMenu>
136
                    <CDropdownItem>Account</CDropdownItem>
137
                    <CDropdownItem>Settings</CDropdownItem>
138
                  </CDropdownMenu>
139
                </CDropdown>
140
              </CNavbarNav>
141
            </CCollapse>
142
          </CNavbar>
143
        </CCardBody>
144
      </CCard>
145

146
      <CCard className="mb-4">
147
        <CCardHeader>CNavbar form</CCardHeader>
148
        <CCardBody>
149
          <CNavbar light color="light">
150
            <CForm className="d-flex">
151
              <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
152
              <CButton color="outline-success" className="my-2 my-sm-0" type="submit">
153
                Search
154
              </CButton>
155
            </CForm>
156
          </CNavbar>
157
        </CCardBody>
158
      </CCard>
159

160
      <CCard className="mb-4">
161
        <CCardHeader>CNavbar input group</CCardHeader>
162
        <CCardBody>
163
          <CNavbar light color="light">
164
            <CForm className="d-flex">
165
              <CFormInput className="me-sm-2" placeholder="Username" />
166
            </CForm>
167
          </CNavbar>
168
        </CCardBody>
169
      </CCard>
170
    </>
171
  )
172
}
173

174
export default CNavbars
175