-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigation.html
129 lines (129 loc) · 5.48 KB
/
navigation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="dist/css/main.min.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Cabin&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
crossorigin="anonymous"
/>
<title>Navbar</title>
</head>
<body>
<input type="checkbox" class="toggle__checkbox" id="navi-toggle" />
<label for="navi-toggle" class="toggle__button"></label>
<nav class="navigation">
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item">
<a href="#" class="navigation__link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="columns"
class="svg-inline--fa fa-columns fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z"
></path>
</svg>
<span class="navigation__link--text">Dashboard</span>
</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="folder"
class="svg-inline--fa fa-folder fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
></path>
</svg>
<span class="navigation__link--text">Projects</span>
</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="user-friends"
class="svg-inline--fa fa-user-friends fa-w-20"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
fill="currentColor"
d="M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z"
></path>
</svg>
<span class="navigation__link--text">People</span>
</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="user"
class="svg-inline--fa fa-user fa-w-14"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
></path>
</svg>
<span class="navigation__link--text">Profile</span>
</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="sign-out-alt"
class="svg-inline--fa fa-sign-out-alt fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"
></path>
</svg>
<span class="navigation__link--text">Logout</span>
</a>
</li>
</ul>
</nav>
</nav>
</body>
</html>