Skip to content

Commit e6ac37a

Browse files
xdeqxdeq
committed
feat(Header): responsive header
1 parent 582e216 commit e6ac37a

File tree

3 files changed

+68
-15
lines changed

3 files changed

+68
-15
lines changed

‎assets/icons.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"close-circle": "M 23 12 C 23 18.075 18.075 23 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 Z M 14.293 8.293 L 12 10.586 L 9.707 8.293 C 9.315 7.914 8.691 7.919 8.305 8.305 C 7.919 8.691 7.914 9.315 8.293 9.707 L 10.586 12 L 8.293 14.293 C 7.914 14.685 7.919 15.309 8.305 15.695 C 8.691 16.081 9.315 16.086 9.707 15.707 L 12 13.414 L 14.293 15.707 C 14.685 16.086 15.309 16.081 15.695 15.695 C 16.081 15.309 16.086 14.685 15.707 14.293 L 13.414 12 L 15.707 9.707 C 16.097 9.317 16.097 8.683 15.707 8.293 C 15.317 7.903 14.683 7.903 14.293 8.293 Z",
1616
"check": "M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z",
1717
"message": "M22.2796 4.70732L22.2796 4.70729C21.9053 4.17284 21.396 3.73154 20.816 3.43598C20.3306 3.18868 19.8139 3.09012 19.2518 3.04419C18.7106 2.99998 18.0463 2.99999 17.2414 3H17.2413H6.75868H6.75858C5.95366 2.99999 5.28934 2.99998 4.74817 3.04419C4.18607 3.09012 3.66936 3.18868 3.18403 3.43598C2.60399 3.73152 2.09471 4.17279 1.72043 4.7072L1.72041 4.70723C1.61124 4.8631 1.55666 4.94104 1.53985 5.05959C1.52675 5.15199 1.5492 5.28082 1.59279 5.36333C1.64872 5.46921 1.74328 5.53596 1.9324 5.66945L10.7314 11.8805C11.4641 12.3977 11.6195 12.4875 11.7567 12.5219C11.9165 12.562 12.0837 12.562 12.2435 12.5219C12.3807 12.4875 12.5361 12.3977 13.2688 11.8805L22.0676 5.66953C22.2568 5.53604 22.3513 5.46929 22.4072 5.36341C22.4508 5.2809 22.4733 5.15207 22.4602 5.05968C22.4434 4.94113 22.3888 4.86319 22.2796 4.70732ZM2.0655 8.21146L2.06552 8.21147L6.74072 11.5116C7.01967 11.7085 7.15914 11.807 7.21513 11.9327C7.26421 12.043 7.27177 12.1673 7.23639 12.2826C7.19605 12.4142 7.06952 12.5289 6.81647 12.7581L1.62227 17.4634C1.40639 17.659 1.06792 17.5422 1.04419 17.2518C0.999978 16.7106 0.999988 16.0463 1 15.2413V8.75867C0.999996 8.46554 0.999994 8.31898 1.04248 8.22261C1.13609 8.01026 1.37159 7.88823 1.59906 7.93421C1.70229 7.95507 1.82336 8.04053 2.0655 8.21146ZM2.34556 19.6022C2.38587 19.4704 2.48768 19.3781 2.69131 19.1937L8.81101 13.6499C8.92801 13.5439 8.98652 13.4909 9.04986 13.4599C9.1697 13.4012 9.30804 13.3928 9.4341 13.4366C9.50073 13.4598 9.56521 13.5053 9.69416 13.5964L9.69477 13.5969C10.2418 13.9842 10.7222 14.3243 11.2701 14.4617C11.7495 14.582 12.2511 14.582 12.7305 14.4617C13.2784 14.3243 13.759 13.984 14.3062 13.5966L14.3064 13.5964L14.3068 13.5961L14.3069 13.5961C14.4353 13.5053 14.4997 13.4598 14.5663 13.4367C14.6924 13.3928 14.8308 13.4012 14.9507 13.46C15.0136 13.4909 15.0717 13.5435 15.1875 13.6483L15.1894 13.6499L21.3091 19.1937C21.5127 19.3781 21.6145 19.4704 21.6548 19.6022C21.6861 19.7044 21.6767 19.855 21.633 19.9526C21.5767 20.0784 21.4839 20.1436 21.2981 20.274C21.1451 20.3813 20.9842 20.4783 20.8162 20.5639C20.3308 20.8112 19.8141 20.9098 19.252 20.9557C18.7108 20.9999 18.0465 20.9999 17.2415 20.9999H6.75884C5.95388 20.9999 5.28953 20.9999 4.74834 20.9557C4.18624 20.9098 3.66953 20.8112 3.1842 20.5639C3.01621 20.4783 2.85523 20.3814 2.70223 20.274C2.5165 20.1436 2.42364 20.0784 2.36733 19.9526C2.32367 19.855 2.31432 19.7044 2.34556 19.6022ZM22.3777 17.4634C22.5936 17.659 22.9321 17.5421 22.9558 17.2518C23 16.7106 23 16.0463 23 15.2413V8.75867C23 8.46565 23 8.31915 22.9576 8.22281C22.864 8.01039 22.6284 7.88832 22.4009 7.93435C22.2977 7.95522 22.1766 8.04064 21.9346 8.21152L17.2594 11.5117L17.2589 11.512C16.9802 11.7087 16.8408 11.8071 16.785 11.9328C16.7359 12.043 16.7283 12.1673 16.7637 12.2827C16.8039 12.4141 16.9302 12.5286 17.1825 12.7572L17.1836 12.7582L22.3777 17.4634Z",
18+
"menu": "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H3Z",
1819
"globe": "M 12 1 C 18.075 1 23 5.925 23 12 C 23 18.075 18.075 23 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 Z M 7.05 11 C 7.273 8.245 8.194 5.592 9.725 3.29 C 6.121 4.234 3.47 7.298 3.055 11 Z M 3.055 13 C 3.47 16.702 6.121 19.766 9.725 20.71 C 8.194 18.408 7.273 15.755 7.05 13 Z M 14.275 20.71 C 17.879 19.766 20.53 16.702 20.945 13 L 16.95 13 C 16.726 15.755 15.805 18.408 14.274 20.71 Z M 14.274 3.29 C 15.805 5.592 16.726 8.245 16.95 11 L 20.945 11 C 20.53 7.298 17.878 4.233 14.274 3.29 Z M 9.058 11 L 14.942 11 C 14.691 8.287 13.67 5.702 12 3.55 C 10.33 5.702 9.309 8.287 9.058 11 Z M 14.942 13 L 9.058 13 C 9.309 15.713 10.33 18.298 12 20.45 C 13.67 18.298 14.691 15.713 14.942 13 Z",
1920
"block": "M 12.403 1.185 C 12.137 1.13 11.863 1.13 11.597 1.185 C 11.29 1.248 11.015 1.402 10.797 1.525 L 10.737 1.558 L 4.31 5.129 C 3.902 5.356 3.698 5.469 3.63 5.619 C 3.57 5.75 3.57 5.9 3.629 6.031 C 3.696 6.181 3.9 6.296 4.307 6.525 L 11.607 10.632 C 11.751 10.712 11.822 10.752 11.897 10.768 C 11.964 10.782 12.034 10.782 12.101 10.768 C 12.177 10.752 12.249 10.712 12.391 10.632 L 19.692 6.525 C 20.099 6.296 20.303 6.182 20.371 6.031 C 20.43 5.9 20.429 5.751 20.37 5.62 C 20.301 5.47 20.097 5.356 19.689 5.13 L 13.262 1.558 L 13.202 1.524 C 12.985 1.402 12.71 1.248 12.402 1.185 Z M 21.996 8.89 C 21.996 8.442 21.996 8.218 21.901 8.087 C 21.818 7.973 21.691 7.899 21.551 7.883 C 21.391 7.865 21.195 7.975 20.804 8.195 L 13.408 12.355 C 13.259 12.439 13.185 12.48 13.131 12.539 C 13.083 12.591 13.047 12.653 13.025 12.721 C 13 12.797 13 12.882 13 13.052 L 13 21.228 C 13 21.675 13 21.898 13.094 22.029 C 13.176 22.143 13.302 22.218 13.442 22.234 C 13.602 22.253 13.797 22.144 14.187 21.928 L 20.663 18.331 L 20.726 18.297 C 20.956 18.169 21.248 18.009 21.471 17.767 C 21.664 17.557 21.81 17.31 21.899 17.039 C 22.002 16.726 22.001 16.395 22 16.131 L 22 16.059 C 22 14.096 21.997 10.756 21.996 8.89 Z M 9.814 21.928 C 10.204 22.144 10.399 22.253 10.559 22.234 C 10.698 22.217 10.824 22.143 10.906 22.029 C 11 21.899 11 21.675 11 21.228 L 11 13.052 C 11 12.882 11 12.797 10.975 12.721 C 10.953 12.654 10.917 12.592 10.869 12.54 C 10.815 12.48 10.741 12.439 10.593 12.355 L 3.197 8.195 C 2.805 7.975 2.609 7.865 2.449 7.883 C 2.309 7.899 2.182 7.973 2.099 8.087 C 2.005 8.217 2.005 8.442 2.004 8.89 C 2.003 10.756 2 14.096 2 16.06 L 2 16.132 C 2 16.396 1.998 16.727 2.101 17.04 C 2.191 17.31 2.337 17.559 2.53 17.768 C 2.753 18.01 3.043 18.17 3.275 18.298 L 3.338 18.332 C 5.118 19.322 8.148 21.004 9.814 21.929 Z",
2021
"tx": "M 15.242 1 C 16.046 1 16.71 1 17.252 1.043 C 17.814 1.089 18.331 1.188 18.816 1.435 C 19.569 1.818 20.181 2.43 20.564 3.183 C 20.811 3.668 20.91 4.185 20.956 4.748 C 21 5.288 21 5.953 21 6.758 L 21 17.242 C 21 18.046 21 18.711 20.956 19.252 C 20.91 19.814 20.811 20.331 20.564 20.816 C 20.181 21.569 19.569 22.181 18.816 22.564 C 18.331 22.811 17.814 22.91 17.251 22.956 C 16.711 23 16.046 23 15.241 23 L 8.758 23 C 7.954 23 7.29 23 6.748 22.956 C 6.186 22.91 5.669 22.811 5.184 22.564 C 4.431 22.181 3.819 21.569 3.436 20.816 C 3.189 20.331 3.09 19.814 3.044 19.251 C 3 18.711 3 18.046 3 17.241 L 3 6.758 C 3 5.954 3 5.29 3.045 4.748 C 3.091 4.186 3.19 3.669 3.437 3.184 C 3.82 2.431 4.432 1.819 5.185 1.436 C 5.67 1.189 6.187 1.09 6.75 1.044 C 7.29 1 7.955 1 8.76 1 Z M 8 6 C 7.448 6 7 6.448 7 7 C 7 7.552 7.448 8 8 8 L 16 8 C 16.552 8 17 7.552 17 7 C 17 6.448 16.552 6 16 6 Z M 8 12 L 14 12 C 14.552 12 15 11.552 15 11 C 15 10.448 14.552 10 14 10 L 8 10 C 7.448 10 7 10.448 7 11 C 7 11.552 7.448 12 8 12 Z M 8 16 L 10 16 C 10.552 16 11 15.552 11 15 C 11 14.448 10.552 14 10 14 L 8 14 C 7.448 14 7 14.448 7 15 C 7 15.552 7.448 16 8 16 Z",

‎components/TheHeader.vue‎

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script setup>
22
const route = useRoute()
33
4+
const showPopup = ref(false)
5+
46
const isActive = (link) => {
57
const splittedPath = route.path.split("/").filter(Boolean)
68
@@ -26,11 +28,17 @@ const isActive = (link) => {
2628
<template>
2729
<Flex tag="header" justify="center" wide :class="$style.wrapper">
2830
<Flex align="center" justify="between" wide :class="$style.container">
29-
<NuxtLink to="/">
30-
<Flex align="center" gap="8" :class="$style.logo">
31-
<Icon name="logo" size="18" color="primary" />
31+
<Flex align="center" gap="8">
32+
<Flex @click="showPopup = !showPopup" align="center" gap="8" :class="[$style.button, $style.menu]">
33+
<Icon :name="!showPopup ? 'menu' : 'close'" size="16" color="secondary" />
3234
</Flex>
33-
</NuxtLink>
35+
36+
<NuxtLink to="/">
37+
<Flex align="center" gap="8" :class="$style.logo">
38+
<Icon name="logo" size="18" color="primary" />
39+
</Flex>
40+
</NuxtLink>
41+
</Flex>
3442

3543
<Flex justify="center" align="center" wrap="wrap" gap="8" :class="$style.links">
3644
<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
@@ -50,15 +58,35 @@ const isActive = (link) => {
5058
</NuxtLink>
5159
</Flex>
5260

53-
<Flex align="center" gap="8" :class="$style.command_button">
61+
<Flex align="center" gap="8" :class="$style.button">
5462
<Icon name="search" size="16" color="secondary" />
5563
</Flex>
5664
</Flex>
65+
66+
<Flex v-if="showPopup" direction="column" gap="8" :class="$style.menu_popup">
67+
<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
68+
<Text size="13" weight="600" color="tertiary">Explorer</Text>
69+
</NuxtLink>
70+
71+
<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
72+
<Text size="13" weight="600" color="tertiary">Transactions</Text>
73+
</NuxtLink>
74+
75+
<NuxtLink to="/blocks" :class="[$style.link, isActive('blocks') && $style.active]">
76+
<Text size="13" weight="600" color="tertiary">Blocks</Text>
77+
</NuxtLink>
78+
79+
<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
80+
<Text size="13" weight="600" color="tertiary">Namespaces</Text>
81+
</NuxtLink>
82+
</Flex>
5783
</Flex>
5884
</template>
5985

6086
<style module>
6187
.wrapper {
88+
position: relative;
89+
6290
height: 52px;
6391
}
6492
@@ -123,7 +151,24 @@ const isActive = (link) => {
123151
}
124152
}
125153
126-
.command_button {
154+
.menu_popup {
155+
position: absolute;
156+
top: 52px;
157+
left: 0;
158+
right: 0;
159+
160+
display: none;
161+
162+
background: var(--app-background);
163+
border-top: 2px solid var(--op-5);
164+
border-bottom: 2px solid var(--op-5);
165+
166+
padding: 16px;
167+
168+
z-index: 100;
169+
}
170+
171+
.button {
127172
height: 28px;
128173
129174
border-radius: 6px;
@@ -141,22 +186,29 @@ const isActive = (link) => {
141186
&:active {
142187
background: var(--op-10);
143188
}
189+
190+
&.menu {
191+
display: none;
192+
}
144193
}
145194
146195
@media (max-width: 600px) {
147-
.wrapper {
148-
height: initial;
196+
.links {
197+
display: none;
149198
}
150199
151-
.container {
152-
flex-direction: column;
153-
gap: 24px;
200+
.button.menu {
201+
display: flex;
202+
}
154203
155-
margin: 24px 12px 12px 12px;
204+
.menu_popup {
205+
display: flex;
156206
}
207+
}
157208
158-
.empty_icon {
159-
display: none;
209+
@media (max-width: 500px) {
210+
.container {
211+
margin: 0 12px;
160212
}
161213
}
162214
</style>

‎pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ appStore.latestBlocks = blocks.value
120120
padding-top: 32px;
121121
}
122122
123-
.container {
123+
.wrapper {
124124
padding: 0 12px;
125125
}
126126
}

0 commit comments

Comments
 (0)