hardlounge/client/components/Sidebar.vue

93 lines
2.0 KiB
Vue

<template>
<div>
<aside id="sidebar">
<div class="scrollable-area">
<div class="logo-container">
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
class="logo"
alt="The Lounge"
>
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
class="logo-inverted"
alt="The Lounge"
>
</div>
<NetworkList
:networks="networks"
:active-channel="activeChannel"
/>
</div>
<footer id="footer">
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Sign in"
><button
class="icon sign-in"
data-target="SignIn"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network"
><button
class="icon connect"
data-target="Connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Settings"
><button
class="icon settings"
data-target="Settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Help"
><button
class="icon help"
data-target="Help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
/></span>
</footer>
</aside>
<div
id="sidebar-overlay"
@click="$root.setSidebar(false)"
/>
</div>
</template>
<script>
import NetworkList from "./NetworkList.vue";
export default {
name: "Sidebar",
components: {
NetworkList,
},
props: {
activeChannel: Object,
networks: Array,
},
methods: {
isPublic: () => document.body.classList.contains("public"),
},
};
</script>