├── images
    └── preview.png
├── js
    └── script.js
├── Readme.md
├── css
    ├── style.css.map
    └── style.css
├── scss
    └── style.scss
└── index.html


/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendfunn/semantic-ui-admin-dashboard-template/HEAD/images/preview.png


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function() {
 2 |   $('.ui.dropdown').dropdown();
 3 |   $('.sidebar-menu-toggler').on('click', function() {
 4 |     var target = $(this).data('target');
 5 |     $(target)
 6 |       .sidebar({
 7 |         dinPage: true,
 8 |         transition: 'overlay',
 9 |         mobileTransition: 'overlay'
10 |       })
11 |       .sidebar('toggle');
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # 🙈 🙉 🙊 Semantic UI - Sample Admin Dashboard Template
 2 | 
 3 | ## 😃 Click here for the 👉 [💥LIVE DEMO](https://frontendfunn.github.io/semantic-ui-admin-dashboard-template/)
 4 | 
 5 | ---
 6 | 
 7 | ![preview](./images/preview.png)
 8 | 
 9 | # 👉 Subscribe to My Channel [💙❤️Youtube❤️💙](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1)
10 | 
11 | Made with ❤️ - by [FrontEndFunn](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1)
12 | 


--------------------------------------------------------------------------------
/css/style.css.map:
--------------------------------------------------------------------------------
1 | {
2 |     "version": 3,
3 |     "mappings": "AAAA,OAAO,CAAC,6EAAI;AAEZ,AAAA,KAAK,CAAC;EACJ,QAAQ,CAAA,MAAC;EACT,cAAc,CAAA,MAAC;EACf,cAAc,CAAA,OAAC;EACf,aAAa,CAAA,wBAAC;CACf;;AACD,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,kBAAkB,CAAC,UAAU;CAC3C;;AACD,AAAA,IAAI,CAAC,mBAAmB,CAAC;EACvB,KAAK,EAAE,GAAG;CACX;;AACD,AAAA,GAAG,AAAA,SAAS,AAAA,KAAK,AAAA,aAAa,CAAC;EAC7B,UAAU,EAAE,eAAe;EAC3B,UAAU,EAAE,iBAAiB,CAAC,UAAU;EACxC,MAAM,EAAE,iBAAiB,CAAC,UAAU;CACrC;;AACD,AAAA,GAAG,AAAA,SAAS,AAAA,KAAK,AAAA,aAAa,CAAC,KAAK,CAAC,CAAC,AAAA,KAAK,CAAC;EAC1C,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,iBAAiB;CAC1B;;AACD,AAAA,aAAa,CAAC;EACZ,UAAU,EAAE,IAAI;CACjB;;AACD,MAAM,EAAE,SAAS,EAAE,KAAK;EACtB,AAAA,GAAG,AAAA,SAAS,AAAA,KAAK,AAAA,aAAa,CAAC;IAC7B,UAAU,EAAE,OAAO;IACnB,SAAS,EAAE,oBAAoB;IAC/B,KAAK,EAAE,gBAAgB;GACxB;EACD,AAAA,aAAa,CAAC;IACZ,WAAW,EAAE,KAAK;GACnB;EACD,AAAA,qBAAqB,CAAC;IACpB,OAAO,EAAE,eAAe;GACzB",
4 |     "sources": [
5 |         "../scss/style.scss"
6 |     ],
7 |     "names": [],
8 |     "file": "style.css"
9 | }


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
 2 | 
 3 | :root {
 4 |   --tablet: 768px;
 5 |   --smallMonitor: 992px;
 6 |   --largeMonitor: 1200px;
 7 |   --font-family: 'Open Sans', sans-serif;
 8 | }
 9 | body {
10 |   font-family: var(--font-family) !important;
11 | }
12 | body ::-webkit-scrollbar {
13 |   width: 6px;
14 | }
15 | .ui.vertical.menu.sidebar-menu {
16 |   margin-top: 40px !important;
17 |   max-height: calc(100% - 40px) !important;
18 |   height: calc(100% - 40px) !important;
19 | }
20 | .ui.vertical.menu.sidebar-menu .item i.icon {
21 |   float: left;
22 |   margin: 0em 0.5em 0em 0em;
23 | }
24 | .main-content {
25 |   margin-top: 40px;
26 | }
27 | @media (min-width: 768px) {
28 |   .ui.vertical.menu.sidebar-menu {
29 |     visibility: visible;
30 |     transform: translate3d(0, 0, 0);
31 |     width: 15rem !important;
32 |   }
33 |   .main-content {
34 |     margin-left: 15rem;
35 |   }
36 |   .sidebar-menu-toggler {
37 |     display: none !important;
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
 2 | :root {
 3 |   --tablet: 768px;
 4 |   --smallMonitor: 992px;
 5 |   --largeMonitor: 1200px;
 6 |   --font-family: 'Open Sans', sans-serif;
 7 | }
 8 | 
 9 | body {
10 |   font-family: var(--font-family) !important;
11 | }
12 | 
13 | body ::-webkit-scrollbar {
14 |   width: 6px;
15 | }
16 | 
17 | .ui.vertical.menu.sidebar-menu {
18 |   margin-top: 40px !important;
19 |   max-height: calc(100% - 40px) !important;
20 |   height: calc(100% - 40px) !important;
21 | }
22 | 
23 | .ui.vertical.menu.sidebar-menu .item i.icon {
24 |   float: left;
25 |   margin: 0em 0.5em 0em 0em;
26 | }
27 | 
28 | .main-content {
29 |   margin-top: 40px;
30 | }
31 | 
32 | @media (min-width: 768px) {
33 |   .ui.vertical.menu.sidebar-menu {
34 |     visibility: visible;
35 |     -webkit-transform: translate3d(0, 0, 0);
36 |             transform: translate3d(0, 0, 0);
37 |     width: 15rem !important;
38 |   }
39 |   .main-content {
40 |     margin-left: 15rem;
41 |   }
42 |   .sidebar-menu-toggler {
43 |     display: none !important;
44 |   }
45 | }
46 | /*# sourceMappingURL=style.css.map */


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>FrontendFunn - Semantic UI - Sample Admin Dashboard Template</title>
  8 | 
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
 12 |       integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q="
 13 |       crossorigin="anonymous"
 14 |     />
 15 | 
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
 19 |       integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="css/style.css" />
 23 |   </head>
 24 | 
 25 |   <body>
 26 |     <!-- sidebar -->
 27 |     <div class="ui sidebar inverted vertical menu sidebar-menu" id="sidebar">
 28 |       <div class="item">
 29 |         <div class="header">General</div>
 30 |         <div class="menu">
 31 |           <a class="item">
 32 |             <div>
 33 |               <i class="icon tachometer alternate"></i>
 34 |               Dashboard
 35 |             </div>
 36 |           </a>
 37 |         </div>
 38 |       </div>
 39 |       <div class="item">
 40 |         <div class="header">
 41 |           Administration
 42 |         </div>
 43 |         <div class="menu">
 44 |           <a class="item">
 45 |             <div><i class="cogs icon"></i>Settings</div>
 46 |           </a>
 47 |           <a class="item">
 48 |             <div><i class="users icon"></i>Team</div>
 49 |           </a>
 50 |         </div>
 51 |       </div>
 52 | 
 53 |       <a href="#" class="item">
 54 |         <div>
 55 |           <i class="icon chart line"></i>
 56 |           Charts
 57 |         </div>
 58 |       </a>
 59 | 
 60 |       <a class="item">
 61 |         <div>
 62 |           <i class="icon lightbulb"></i>
 63 |           Apps
 64 |         </div>
 65 |       </a>
 66 |       <div class="item">
 67 |         <div class="header">Other</div>
 68 |         <div class="menu">
 69 |           <a href="#" class="item">
 70 |             <div>
 71 |               <i class="icon envelope"></i>
 72 |               Messages
 73 |             </div>
 74 |           </a>
 75 | 
 76 |           <a href="#" class="item">
 77 |             <div>
 78 |               <i class="icon calendar alternate"></i>
 79 |               Calendar
 80 |             </div>
 81 |           </a>
 82 |         </div>
 83 |       </div>
 84 | 
 85 |       <div class="item">
 86 |         <form action="#">
 87 |           <div class="ui mini action input">
 88 |             <input type="text" placeholder="Search..." />
 89 |             <button class="ui mini icon button">
 90 |               <i class=" search icon"></i>
 91 |             </button>
 92 |           </div>
 93 |         </form>
 94 |       </div>
 95 |       <div class="ui segment inverted">
 96 |         <div class="ui tiny olive inverted progress">
 97 |           <div class="bar" style="width: 54%"></div>
 98 |           <div class="label">Monthly Bandwidth</div>
 99 |         </div>
100 | 
101 |         <div class="ui tiny teal inverted progress">
102 |           <div class="bar" style="width:78%"></div>
103 |           <div class="label">Disk Usage</div>
104 |         </div>
105 |       </div>
106 |     </div>
107 | 
108 |     <!-- sidebar -->
109 |     <!-- top nav -->
110 | 
111 |     <nav class="ui top fixed inverted menu">
112 |       <div class="left menu">
113 |         <a href="#" class="sidebar-menu-toggler item" data-target="#sidebar">
114 |           <i class="sidebar icon"></i>
115 |         </a>
116 |         <a href="#" class="header item">
117 |           Semantic UI
118 |         </a>
119 |       </div>
120 | 
121 |       <div class="right menu">
122 |         <a href="#" class="item">
123 |           <i class="bell icon"></i>
124 |         </a>
125 |         <div class="ui dropdown item">
126 |           <i class="user cirlce icon"></i>
127 |           <div class="menu">
128 |             <a href="#" class="item">
129 |               <i class="info circle icon"></i> Profile</a
130 |             >
131 |             <a href="#" class="item">
132 |               <i class="wrench icon"></i>
133 |               Settings</a
134 |             >
135 |             <a href="#" class="item">
136 |               <i class="sign-out icon"></i>
137 |               Logout
138 |             </a>
139 |           </div>
140 |         </div>
141 |       </div>
142 |     </nav>
143 | 
144 |     <!-- top nav -->
145 | 
146 |     <div class="pusher">
147 |       <div class="main-content">
148 |         <div class="ui grid stackable padded">
149 |           <div
150 |             class="four wide computer eight wide tablet sixteen wide mobile column"
151 |           >
152 |             <div class="ui fluid card">
153 |               <div class="content">
154 |                 <div class="ui right floated header red">
155 |                   <i class="icon shopping cart"></i>
156 |                 </div>
157 |                 <div class="header">
158 |                   <div class="ui red header">
159 |                     3958
160 |                   </div>
161 |                 </div>
162 |                 <div class="meta">
163 |                   orders
164 |                 </div>
165 |                 <div class="description">
166 |                   Elliot requested permission to view your contact details
167 |                 </div>
168 |               </div>
169 |               <div class="extra content">
170 |                 <div class="ui two buttons">
171 |                   <div class="ui red button">More Info</div>
172 |                 </div>
173 |               </div>
174 |             </div>
175 |           </div>
176 |           <div
177 |             class="four wide computer eight wide tablet sixteen wide mobile column"
178 |           >
179 |             <div class="ui fluid card">
180 |               <div class="content">
181 |                 <div class="ui right floated header green">
182 |                   <i class="icon clock"></i>
183 |                 </div>
184 |                 <div class="header">
185 |                   <div class="ui header green">57.6%</div>
186 |                 </div>
187 |                 <div class="meta">
188 |                   Time
189 |                 </div>
190 |                 <div class="description">
191 |                   Elliot requested permission to view your contact details
192 |                 </div>
193 |               </div>
194 |               <div class="extra content">
195 |                 <div class="ui two buttons">
196 |                   <div class="ui green button">More Info</div>
197 |                 </div>
198 |               </div>
199 |             </div>
200 |           </div>
201 |           <div
202 |             class="four wide computer eight wide tablet sixteen wide mobile column"
203 |           >
204 |             <div class="ui fluid card">
205 |               <div class="content">
206 |                 <div class="ui right floated header teal">
207 |                   <i class="icon briefcase"></i>
208 |                 </div>
209 |                 <div class="header">
210 |                   <div class="ui teal header">3112</div>
211 |                 </div>
212 |                 <div class="meta">
213 |                   Saves
214 |                 </div>
215 |                 <div class="description">
216 |                   Elliot requested permission to view your contact details
217 |                 </div>
218 |               </div>
219 |               <div class="extra content">
220 |                 <div class="ui two buttons">
221 |                   <div class="ui teal button">More Info</div>
222 |                 </div>
223 |               </div>
224 |             </div>
225 |           </div>
226 |           <div
227 |             class="four wide computer eight wide tablet sixteen wide mobile column"
228 |           >
229 |             <div class="ui fluid card">
230 |               <div class="content">
231 |                 <div class="ui right floated header purple">
232 |                   <i class="icon trophy"></i>
233 |                 </div>
234 |                 <div class="header">
235 |                   <div class="ui purple header">9805</div>
236 |                 </div>
237 |                 <div class="meta">
238 |                   Views
239 |                 </div>
240 |                 <div class="description">
241 |                   Elliot requested permission to view your contact details
242 |                 </div>
243 |               </div>
244 |               <div class="extra content">
245 |                 <div class="ui two buttons">
246 |                   <div class="ui purple button">More Info</div>
247 |                 </div>
248 |               </div>
249 |             </div>
250 |           </div>
251 |         </div>
252 |         <div class="ui grid stackable padded">
253 |           <div class="column">
254 |             <table class="ui celled striped table">
255 |               <thead>
256 |                 <tr>
257 |                   <th colspan="3">
258 |                     Git Repository
259 |                   </th>
260 |                 </tr>
261 |               </thead>
262 |               <tbody>
263 |                 <tr>
264 |                   <td class="collapsing">
265 |                     <i class="folder icon"></i> node_modules
266 |                   </td>
267 |                   <td>Initial commit</td>
268 |                   <td class="right aligned collapsing">10 hours ago</td>
269 |                 </tr>
270 |                 <tr>
271 |                   <td><i class="folder icon"></i> test</td>
272 |                   <td>Initial commit</td>
273 |                   <td class="right aligned">10 hours ago</td>
274 |                 </tr>
275 |                 <tr>
276 |                   <td><i class="folder icon"></i> build</td>
277 |                   <td>Initial commit</td>
278 |                   <td class="right aligned">10 hours ago</td>
279 |                 </tr>
280 |                 <tr>
281 |                   <td><i class="file outline icon"></i> package.json</td>
282 |                   <td>Initial commit</td>
283 |                   <td class="right aligned">10 hours ago</td>
284 |                 </tr>
285 |                 <tr>
286 |                   <td><i class="file outline icon"></i> Gruntfile.js</td>
287 |                   <td>Initial commit</td>
288 |                   <td class="right aligned">10 hours ago</td>
289 |                 </tr>
290 |               </tbody>
291 |             </table>
292 |           </div>
293 |         </div>
294 |         <div class="ui grid stackable padded">
295 |           <div
296 |             class="four wide computer eight wide tablet sixteen wide mobile  center aligned column"
297 |           >
298 |             <div class="ui teal statistic">
299 |               <div class="value">
300 |                 5,550
301 |               </div>
302 |               <div class="label">
303 |                 Downloads
304 |               </div>
305 |             </div>
306 |           </div>
307 |           <div
308 |             class="four wide computer eight wide tablet sixteen wide mobile  center aligned column"
309 |           >
310 |             <div class="ui purple statistic">
311 |               <div class="value">
312 |                 50+
313 |               </div>
314 |               <div class="label">
315 |                 Developers
316 |               </div>
317 |             </div>
318 |           </div>
319 |           <div
320 |             class="four wide computer eight wide tablet sixteen wide mobile  center aligned column"
321 |           >
322 |             <div class="ui green statistic">
323 |               <div class="value">
324 |                 800+
325 |               </div>
326 |               <div class="label">
327 |                 Commits
328 |               </div>
329 |             </div>
330 |           </div>
331 |           <div
332 |             class="four wide computer eight wide tablet sixteen wide mobile  center aligned column"
333 |           >
334 |             <div class="ui purple statistic">
335 |               <div class="value">
336 |                 1000+
337 |               </div>
338 |               <div class="label">
339 |                 Cups of Coffee
340 |               </div>
341 |             </div>
342 |           </div>
343 |         </div>
344 |       </div>
345 |     </div>
346 | 
347 |     <script
348 |       src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
349 |       integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
350 |       crossorigin="anonymous"
351 |     ></script>
352 |     <script
353 |       src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
354 |       integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI="
355 |       crossorigin="anonymous"
356 |     ></script>
357 |     <script src="./js/script.js"></script>
358 |   </body>
359 | </html>
360 | 


--------------------------------------------------------------------------------