forked from CSGOWTF/csgowtf
141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<template>
|
|
<nav class="navbar navbar-expand navbar-dark fixed-top">
|
|
<div class="container">
|
|
<button aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
|
|
data-bs-target="#navbar-collapse" data-bs-toggle="collapse" type="button">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse navbar-nav fs-5" id="navbar-collapse">
|
|
<router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
|
|
CSGO<span class="text-up text-white fw-bold">WTF</span>
|
|
</router-link>
|
|
|
|
<router-link class="nav-link" to="/explore">Explore</router-link>
|
|
</div>
|
|
|
|
<form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
|
|
<label for="search">
|
|
<svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
|
</svg>
|
|
</label>
|
|
|
|
<input id="search" v-model="data.searchInput" aria-label="Search"
|
|
class="form-control bg-transparent border-0"
|
|
placeholder="SteamID64, Profile Link or Custom URL"
|
|
type="search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import {reactive} from "vue";
|
|
import {useStore} from 'vuex'
|
|
import {sanitize} from 'string-sanitizer'
|
|
import router from "../router";
|
|
|
|
export default {
|
|
name: 'Nav',
|
|
setup() {
|
|
const store = useStore()
|
|
const data = reactive({
|
|
searchInput: ''
|
|
})
|
|
|
|
const parseSearch = () => {
|
|
const input = data.searchInput
|
|
const customUrlPattern = 'https://steamcommunity.com/id/'
|
|
const profileUrlPattern = 'https://steamcommunity.com/profiles/'
|
|
const id64Pattern = /^\d{17}$/
|
|
|
|
store.state.id64 = ''
|
|
store.state.vanityUrl = ''
|
|
|
|
if (id64Pattern.test(input)) {
|
|
store.state.id64 = input
|
|
} else if (input.match(customUrlPattern)) {
|
|
store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
|
|
} else if (input.match(profileUrlPattern)) {
|
|
const tmp = input.split('/')[4].split('?')[0]
|
|
if (id64Pattern.test(tmp)) {
|
|
store.state.id64 = tmp
|
|
}
|
|
} else {
|
|
store.state.vanityUrl = sanitize(input)
|
|
}
|
|
|
|
if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
|
|
data.searchInput = ''
|
|
|
|
if (store.state.id64) {
|
|
router.push(`/player/${store.state.id64}`)
|
|
} else if (store.state.vanityUrl) {
|
|
router.push(`/player/${store.state.vanityUrl}`)
|
|
}
|
|
}
|
|
|
|
document.activeElement.blur()
|
|
}
|
|
|
|
return {
|
|
data, parseSearch
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
nav {
|
|
max-width: 100vw;
|
|
height: 70px;
|
|
width: 100vw;
|
|
background: rgba(16, 18, 26, 1);
|
|
|
|
.text-up {
|
|
font-size: 40%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
label {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
input[type="search"] {
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
|
|
&:focus {
|
|
box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
|
|
transition: .2s ease-in-out;
|
|
transform: scale(.975);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: #aaa;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
nav {
|
|
input[type="search"] {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
//
|
|
//&:focus {
|
|
// min-width: 100%;
|
|
// max-width: 100%;
|
|
//}
|
|
}
|
|
}
|
|
}
|
|
</style> |