iceshrimp-161sh/packages/client/src/ui/visitor/header.vue

311 lines
6.1 KiB
Vue
Raw Normal View History

2020-11-28 16:18:54 +01:00
<template>
2023-04-08 02:01:42 +02:00
<div class="sqxihjet">
<div v-if="narrow === false" class="wide">
<div class="content">
<MkA to="/" class="link" active-class="active"
><i class="ph-house ph-bold ph-lg icon"></i
>{{ i18n.ts.home }}</MkA
>
<MkA
v-if="isTimelineAvailable"
to="/timeline"
class="link"
active-class="active"
><i class="ph-chats-circle ph-bold ph-lg icon"></i
>{{ i18n.ts.timeline }}</MkA
>
<MkA to="/explore" class="link" active-class="active"
><i class="ph-compass ph-bold ph-lg icon"></i
>{{ i18n.ts.explore }}</MkA
>
<MkA to="/channels" class="link" active-class="active"
><i class="ph-television ph-bold ph-lg icon"></i
>{{ i18n.ts.channel }}</MkA
>
<MkA to="/pages" class="link" active-class="active"
><i class="ph-file-text ph-bold ph-lg icon"></i
>{{ i18n.ts.pages }}</MkA
>
<MkA to="/gallery" class="link" active-class="active"
><i class="ph-image-square ph-bold ph-lg icon"></i
>{{ i18n.ts.gallery }}</MkA
>
<div v-if="info" class="page active link">
<div class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar
v-else-if="info.avatar"
class="avatar"
:user="info.avatar"
:disable-preview="true"
:show-indicator="true"
/>
<span v-if="info.title" class="text">{{
info.title
}}</span>
<MkUserName
v-else-if="info.userName"
:user="info.userName"
:nowrap="false"
class="text"
/>
</div>
<button
v-if="info.action"
class="_button action"
@click.stop="info.action.handler"
>
<!-- TODO -->
</button>
</div>
<div class="right">
<button class="_button search" @click="search()">
<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
><span>{{ i18n.ts.search }}</span>
</button>
<button class="_buttonPrimary signup" @click="signup()">
{{ i18n.ts.signup }}
</button>
<button class="_button login" @click="signin()">
{{ i18n.ts.login }}
</button>
2020-11-29 03:25:43 +01:00
</div>
2020-11-28 16:18:54 +01:00
</div>
</div>
2023-04-08 02:01:42 +02:00
<div v-else-if="narrow === true" class="narrow">
<button class="menu _button" @click="$parent.showMenu = true">
<i class="ph-list ph-bold ph-lg icon"></i>
</button>
<div v-if="info" class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar
v-else-if="info.avatar"
class="avatar"
:user="info.avatar"
:disable-preview="true"
:show-indicator="true"
/>
<span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName
v-else-if="info.userName"
:user="info.userName"
:nowrap="false"
class="text"
/>
</div>
<button
v-if="info && info.action"
class="action _button"
@click.stop="info.action.handler"
>
<!-- TODO -->
</button>
2020-11-28 16:18:54 +01:00
</div>
</div>
</template>
<script lang="ts">
2023-04-08 02:01:42 +02:00
import { defineComponent } from "vue";
import XSigninDialog from "@/components/MkSigninDialog.vue";
import XSignupDialog from "@/components/MkSignupDialog.vue";
import * as os from "@/os";
import { instance } from "@/instance";
import { search } from "@/scripts/search";
import { i18n } from "@/i18n";
2020-11-28 16:18:54 +01:00
export default defineComponent({
props: {
info: {
2023-04-08 02:01:42 +02:00
required: true,
2020-11-28 16:18:54 +01:00
},
},
data() {
return {
2020-11-29 03:25:43 +01:00
narrow: null,
showMenu: false,
2022-11-11 09:41:34 +01:00
i18n,
2023-04-08 02:01:42 +02:00
isTimelineAvailable:
!instance.disableLocalTimeline ||
!instance.disableRecommendedTimeline ||
!instance.disableGlobalTimeline,
2020-11-28 16:18:54 +01:00
};
},
2020-11-29 03:25:43 +01:00
mounted() {
this.narrow = this.$el.clientWidth < 1300;
},
2020-11-28 16:18:54 +01:00
methods: {
signin() {
2023-04-08 02:01:42 +02:00
os.popup(
XSigninDialog,
{
autoSet: true,
},
{},
"closed"
);
2020-11-28 16:18:54 +01:00
},
signup() {
2023-04-08 02:01:42 +02:00
os.popup(
XSignupDialog,
{
autoSet: true,
},
{},
"closed"
);
2020-11-28 16:18:54 +01:00
},
2023-04-08 02:01:42 +02:00
search,
},
2020-11-28 16:18:54 +01:00
});
</script>
<style lang="scss" scoped>
.sqxihjet {
$height: 60px;
2020-11-29 03:25:43 +01:00
position: sticky;
top: 0;
left: 0;
z-index: 1000;
2020-11-28 16:18:54 +01:00
line-height: $height;
2021-08-11 15:34:45 +02:00
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
2020-11-29 03:25:43 +01:00
background-color: var(--X16);
> .wide {
> .content {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
> .link {
$line: 3px;
2020-11-28 16:18:54 +01:00
display: inline-block;
2020-11-29 03:25:43 +01:00
padding: 0 16px;
line-height: $height - ($line * 2);
border-top: solid $line transparent;
border-bottom: solid $line transparent;
> .icon {
margin-right: 0.5em;
2020-11-28 16:18:54 +01:00
}
2020-11-29 03:25:43 +01:00
&.page {
border-bottom-color: var(--accent);
2020-11-28 16:18:54 +01:00
}
2020-11-29 03:25:43 +01:00
}
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
> .page {
> .title {
2020-11-28 16:18:54 +01:00
display: inline-block;
2020-11-29 03:25:43 +01:00
vertical-align: bottom;
white-space: nowrap;
overflow: hidden;
2020-11-29 03:25:43 +01:00
text-overflow: ellipsis;
position: relative;
> .icon + .text {
margin-left: 8px;
}
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: middle;
margin-right: 8px;
pointer-events: none;
}
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
&._button {
&:hover {
color: var(--fgHighlighted);
}
}
&.selected {
box-shadow: 0 -2px 0 0 var(--accent) inset;
2020-11-28 16:18:54 +01:00
color: var(--fgHighlighted);
}
}
2020-11-29 03:25:43 +01:00
> .action {
padding: 0 0 0 16px;
2020-11-28 16:18:54 +01:00
}
}
2020-11-29 03:25:43 +01:00
> .right {
margin-left: auto;
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
> .search {
background: var(--bg);
border-radius: 999px;
width: 230px;
line-height: $height - 20px;
margin-right: 16px;
text-align: left;
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
> * {
opacity: 0.7;
}
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
> .icon {
padding: 0 16px;
}
2020-11-28 16:18:54 +01:00
}
2020-11-29 03:25:43 +01:00
> .signup {
border-radius: 999px;
padding: 0 24px;
line-height: $height - 20px;
}
> .login {
2020-11-28 16:18:54 +01:00
padding: 0 16px;
}
}
2020-11-29 03:25:43 +01:00
}
}
2020-11-28 16:18:54 +01:00
2020-11-29 03:25:43 +01:00
> .narrow {
display: flex;
> .menu,
> .action {
width: $height;
height: $height;
font-size: 20px;
}
> .title {
flex: 1;
white-space: nowrap;
overflow: hidden;
2020-11-29 03:25:43 +01:00
text-overflow: ellipsis;
position: relative;
text-align: center;
> .icon + .text {
margin-left: 8px;
2020-11-28 16:18:54 +01:00
}
2020-11-29 03:25:43 +01:00
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: middle;
margin-right: 8px;
pointer-events: none;
2020-11-28 16:18:54 +01:00
}
}
}
}
</style>