refactor: init packages
This commit is contained in:
liyasthomas
@@ -13,6 +13,7 @@
|
||||
:data-show-count="true"
|
||||
data-text="Star"
|
||||
aria-label="Star Hoppscotch on GitHub"
|
||||
data-size="large"
|
||||
/>
|
||||
</TranslateFade>
|
||||
</template>
|
||||
|
||||
82
components/app/Globe.vue
Normal file
82
components/app/Globe.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div id="globe" class="w-full"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThreeGlobe from "three-globe"
|
||||
import * as THREE from "three"
|
||||
import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson"
|
||||
import texture from "~/assets/images/texture.png"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
globe: null,
|
||||
cube: null,
|
||||
renderer: null,
|
||||
scene: null,
|
||||
camera: null,
|
||||
tbControls: null,
|
||||
arcsData: [...Array(40).keys()].map(() => ({
|
||||
startLat: (Math.random() - 0.5) * 180,
|
||||
startLng: (Math.random() - 0.5) * 360,
|
||||
endLat: (Math.random() - 0.5) * 180,
|
||||
endLng: (Math.random() - 0.5) * 360,
|
||||
color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
|
||||
Math.round(Math.random() * 3)
|
||||
],
|
||||
})),
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init()
|
||||
this.animate()
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
const container = document.getElementById("globe")
|
||||
|
||||
this.globe = new ThreeGlobe()
|
||||
.globeImageUrl(texture)
|
||||
.atmosphereColor("#aaaaaa")
|
||||
.arcsData(this.arcsData)
|
||||
.arcColor("color")
|
||||
.arcDashLength(1)
|
||||
.arcDashGap(5)
|
||||
.arcStroke(1)
|
||||
.arcDashInitialGap(() => Math.random() * 5)
|
||||
.arcDashAnimateTime(2000)
|
||||
.hexPolygonsData(geojson.features)
|
||||
.hexPolygonResolution(3)
|
||||
.hexPolygonMargin(0.5)
|
||||
.hexPolygonColor(() => `#aaaaaa`)
|
||||
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
alpha: true,
|
||||
})
|
||||
this.renderer.setSize(container.clientWidth, container.clientHeight)
|
||||
|
||||
container.appendChild(this.renderer.domElement)
|
||||
|
||||
this.scene = new THREE.Scene()
|
||||
this.scene.background = null
|
||||
this.scene.add(this.globe)
|
||||
this.scene.add(new THREE.AmbientLight(0xffffff))
|
||||
this.scene.add(new THREE.DirectionalLight(0xffffff, 0.8))
|
||||
|
||||
this.camera = new THREE.PerspectiveCamera()
|
||||
this.camera.aspect = container.clientWidth / container.clientHeight
|
||||
this.camera.updateProjectionMatrix()
|
||||
this.camera.position.z = 300
|
||||
},
|
||||
|
||||
animate() {
|
||||
this.renderer.render(this.scene, this.camera)
|
||||
requestAnimationFrame(this.animate)
|
||||
this.globe.rotation.y -= 0.005
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,129 +1,126 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="row-wrapper">
|
||||
<span class="slide-in">
|
||||
<nuxt-link :to="localePath('index')">
|
||||
<h1 class="heading logo">Hoppscotch</h1>
|
||||
</nuxt-link>
|
||||
<AppGitHubStarButton class="ml-8 hide-on-small-screen" />
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
id="installPWA"
|
||||
v-tooltip="$t('install_pwa')"
|
||||
class="icon button"
|
||||
@click.prevent="showInstallPrompt()"
|
||||
>
|
||||
<i class="material-icons">offline_bolt</i>
|
||||
<header class="flex container items-center justify-between p-2 flex-1">
|
||||
<div class="flex items-center relative ml-4">
|
||||
<nuxt-link :to="localePath('index')">
|
||||
<h1 class="heading logo">Hoppscotch</h1>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button
|
||||
id="installPWA"
|
||||
v-tooltip="$t('install_pwa')"
|
||||
class="icon button"
|
||||
@click.prevent="showInstallPrompt()"
|
||||
>
|
||||
<i class="material-icons">offline_bolt</i>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
rel="noopener"
|
||||
>
|
||||
<button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
rel="noopener"
|
||||
</a>
|
||||
<v-popover v-if="currentUser === null">
|
||||
<button v-tooltip="$t('login_with')" class="icon button">
|
||||
<i class="material-icons">login</i>
|
||||
</button>
|
||||
<template #popover>
|
||||
<FirebaseLogin @show-email="showEmail = true" />
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover v-else>
|
||||
<button
|
||||
v-tooltip="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
class="icon button"
|
||||
aria-label="Account"
|
||||
>
|
||||
<button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
alt="Profile image"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
</button>
|
||||
<template #popover>
|
||||
<div>
|
||||
<nuxt-link v-close-popover :to="localePath('settings')">
|
||||
<button class="icon button">
|
||||
<i class="material-icons">settings</i>
|
||||
<span>
|
||||
{{ $t("settings") }}
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<FirebaseLogout />
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover>
|
||||
<button v-tooltip="$t('more')" class="icon button">
|
||||
<i class="material-icons">drag_indicator</i>
|
||||
</button>
|
||||
<template #popover>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
@click="showExtensions = true"
|
||||
>
|
||||
<i class="material-icons">extension</i>
|
||||
<span>{{ $t("extensions") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
@click="showShortcuts = true"
|
||||
>
|
||||
<i class="material-icons">keyboard</i>
|
||||
<span>{{ $t("shortcuts") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Tweet</span>
|
||||
</button>
|
||||
</a>
|
||||
<v-popover v-if="currentUser === null">
|
||||
<button v-tooltip="$t('login_with')" class="icon button">
|
||||
<i class="material-icons">login</i>
|
||||
</button>
|
||||
<template #popover>
|
||||
<FirebaseLogin @show-email="showEmail = true" />
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover v-else>
|
||||
<button
|
||||
v-tooltip="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
v-if="navigatorShare"
|
||||
v-close-popover
|
||||
v-tooltip="$t('more')"
|
||||
class="icon button"
|
||||
aria-label="Account"
|
||||
@click="nativeShare"
|
||||
>
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
alt="Profile image"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<i class="material-icons">share</i>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
<template #popover>
|
||||
<div>
|
||||
<nuxt-link v-close-popover :to="localePath('settings')">
|
||||
<button class="icon button">
|
||||
<i class="material-icons">settings</i>
|
||||
<span>
|
||||
{{ $t("settings") }}
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<FirebaseLogout />
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover>
|
||||
<button v-tooltip="$t('more')" class="icon button">
|
||||
<i class="material-icons">drag_indicator</i>
|
||||
</button>
|
||||
<template #popover>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
@click="showExtensions = true"
|
||||
>
|
||||
<i class="material-icons">extension</i>
|
||||
<span>{{ $t("extensions") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
@click="showShortcuts = true"
|
||||
>
|
||||
<i class="material-icons">keyboard</i>
|
||||
<span>{{ $t("shortcuts") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-close-popover
|
||||
class="icon button"
|
||||
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||
<path
|
||||
d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Tweet</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="navigatorShare"
|
||||
v-close-popover
|
||||
v-tooltip="$t('more')"
|
||||
class="icon button"
|
||||
@click="nativeShare"
|
||||
>
|
||||
<i class="material-icons">share</i>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</template>
|
||||
</v-popover>
|
||||
</span>
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
<AppExtensions
|
||||
:show="showExtensions"
|
||||
|
||||
@@ -1,153 +1,38 @@
|
||||
<template>
|
||||
<TranslateSlideRight appear>
|
||||
<aside class="nav-first">
|
||||
<nav class="primary-nav">
|
||||
<!--
|
||||
We're using manual checks for linkActive because the query string
|
||||
seems to mess up the nuxt-link active class.
|
||||
-->
|
||||
<nuxt-link
|
||||
v-tooltip.right="$t('home')"
|
||||
:to="localePath('index')"
|
||||
:class="linkActive('index')"
|
||||
:aria-label="$t('home')"
|
||||
>
|
||||
<AppLogo alt class="material-icons" style="height: 24px" />
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-tooltip.right="$t('realtime')"
|
||||
:to="localePath('realtime')"
|
||||
:class="linkActive('realtime')"
|
||||
>
|
||||
<i class="material-icons">language</i>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-tooltip.right="$t('graphql')"
|
||||
:to="localePath('graphql')"
|
||||
:class="linkActive('graphql')"
|
||||
:aria-label="$t('graphql')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
width="24"
|
||||
viewBox="0 0 29.999 30"
|
||||
>
|
||||
<path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
|
||||
<path d="M2.727 20.53h24.538v1.272H2.727z" />
|
||||
<path
|
||||
d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
|
||||
/>
|
||||
<path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
|
||||
<path
|
||||
d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
|
||||
/>
|
||||
<path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
|
||||
<path
|
||||
d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
|
||||
/>
|
||||
</svg>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-tooltip.right="$t('documentation')"
|
||||
:to="localePath('doc')"
|
||||
:class="linkActive('doc')"
|
||||
:aria-label="$t('documentation')"
|
||||
>
|
||||
<i class="material-icons">topic</i>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-tooltip.right="$t('settings')"
|
||||
:to="localePath('settings')"
|
||||
:class="linkActive('settings')"
|
||||
:aria-label="$t('settings')"
|
||||
>
|
||||
<i class="material-icons">settings</i>
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<nav
|
||||
v-for="(link, index) in currentNavigation"
|
||||
:key="`link-${index}`"
|
||||
class="secondary-nav"
|
||||
<aside>
|
||||
<nav class="flex flex-col flex-nowrap">
|
||||
<nuxt-link
|
||||
v-for="(navigation, index) in primaryNavigation"
|
||||
:key="`navigation-${index}`"
|
||||
:to="localePath(navigation.target)"
|
||||
class="
|
||||
p-4
|
||||
text-xs
|
||||
flex-col flex-1
|
||||
hover:bg-primaryLight
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-for="(item, itemIndex) in link.secondary"
|
||||
:key="`item-${itemIndex}`"
|
||||
v-tooltip.right="$t(item.tooltip)"
|
||||
:href="item.target"
|
||||
>
|
||||
<i class="material-icons">{{ item.icon }}</i>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
</TranslateSlideRight>
|
||||
<i class="material-icons">{{ navigation.icon }}</i>
|
||||
<span class="mt-2">{{ navigation.title }}</span>
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navigation: [
|
||||
{
|
||||
primary: "index",
|
||||
secondary: [
|
||||
{ tooltip: "request", target: "#request", icon: "cloud_upload" },
|
||||
{ tooltip: "options", target: "#options", icon: "toc" },
|
||||
{
|
||||
tooltip: "response",
|
||||
target: "#response",
|
||||
icon: "cloud_download",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
primary: "realtime",
|
||||
secondary: [
|
||||
{ tooltip: "request", target: "#request", icon: "cloud_upload" },
|
||||
{
|
||||
tooltip: "communication",
|
||||
target: "#response",
|
||||
icon: "cloud_download",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
primary: "graphql",
|
||||
secondary: [
|
||||
{ tooltip: "endpoint", target: "#endpoint", icon: "cloud" },
|
||||
{
|
||||
tooltip: "schema",
|
||||
target: "#schema",
|
||||
icon: "assignment_returned",
|
||||
},
|
||||
{ tooltip: "query", target: "#query", icon: "cloud_upload" },
|
||||
{
|
||||
tooltip: "response",
|
||||
target: "#response",
|
||||
icon: "cloud_download",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
primary: "doc",
|
||||
secondary: [
|
||||
{ tooltip: "import", target: "#import", icon: "folder" },
|
||||
{
|
||||
tooltip: "documentation",
|
||||
target: "#documentation",
|
||||
icon: "insert_drive_file",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
primary: "settings",
|
||||
secondary: [
|
||||
{ tooltip: "account", target: "#account", icon: "person" },
|
||||
{ tooltip: "theme", target: "#theme", icon: "brush" },
|
||||
{ tooltip: "extensions", target: "#extensions", icon: "extension" },
|
||||
{ tooltip: "proxy", target: "#proxy", icon: "public" },
|
||||
],
|
||||
},
|
||||
primaryNavigation: [
|
||||
{ target: "index", icon: "home", title: "Home" },
|
||||
{ target: "api", icon: "home", title: "APIs" },
|
||||
{ target: "realtime", icon: "language", title: "Realtime" },
|
||||
{ target: "graphql", icon: "code", title: "GraphQL" },
|
||||
{ target: "doc", icon: "book", title: "Docs" },
|
||||
{ target: "profile", icon: "person", title: "Profile" },
|
||||
{ target: "settings", icon: "settings", title: "Settings" },
|
||||
],
|
||||
}
|
||||
},
|
||||
@@ -176,85 +61,10 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
linkActive(path) {
|
||||
return {
|
||||
"nuxt-link-exact-active": this.$route.name.includes(path),
|
||||
"nuxt-link-active": this.$route.name.includes(path),
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-first {
|
||||
@apply h-screen;
|
||||
@apply p-2;
|
||||
@apply bg-primaryDark;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
nav.primary-nav {
|
||||
@apply flex flex-col flex-nowrap;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply space-y-2;
|
||||
@apply w-full;
|
||||
|
||||
svg {
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply flex-shrink-0;
|
||||
@apply p-4;
|
||||
@apply rounded-full;
|
||||
@apply bg-primaryLight;
|
||||
@apply text-secondaryLight;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
border-radius: 50%;
|
||||
transition-property: all !important;
|
||||
|
||||
&:hover {
|
||||
@apply text-secondary;
|
||||
@apply fill-current;
|
||||
|
||||
svg {
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
@apply fill-current;
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
svg {
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.primary-nav::-webkit-scrollbar,
|
||||
.nav-first::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
@apply flex flex-col flex-nowrap;
|
||||
@apply items-center;
|
||||
@@ -289,47 +99,4 @@ nav.secondary-nav {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nav-first {
|
||||
@apply fixed;
|
||||
@apply z-10;
|
||||
@apply top-auto;
|
||||
@apply bottom-0;
|
||||
@apply h-auto;
|
||||
@apply p-0;
|
||||
@apply w-full;
|
||||
@apply bg-primary;
|
||||
@apply shadow-2xl;
|
||||
}
|
||||
|
||||
nav.primary-nav {
|
||||
@apply flex-row flex-nowrap;
|
||||
@apply overflow-auto;
|
||||
@apply bg-primaryDark;
|
||||
@apply space-y-0;
|
||||
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
a {
|
||||
@apply bg-transparent;
|
||||
@apply my-2;
|
||||
@apply flex-1;
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
@apply bg-transparent;
|
||||
@apply text-accent;
|
||||
@apply fill-current;
|
||||
|
||||
svg {
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user