123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <script>
- import { stores } from "@sapper/app";
- let { session } = stores();
- export let segment;
- </script>
- <style lang="css">
- nav {
- @apply .w-2/12 .bg-gray-800 .rounded-l-sm .overflow-y-auto .flex .flex-col;
- }
- .user-box {
- @apply .flex .items-center p-2 bg-gray-dark;
- & > img {
- @apply .w-1/5 .rounded-full;
- }
- & > div {
- @apply .m-2 .font-bold .text-gray-100;
- }
- }
- .button-list {
- @apply .flex .flex-col .m-2 p-2;
- & > h2 {
- @apply .text-lg .my-1 .text-white .font-bold .uppercase .mt-2;
- }
- & > a {
- @apply .bg-gray-800 .px-2 .py-1 .rounded-sm .font-medium;
- &:hover {
- @apply .bg-gray-700;
- }
- &[data-active="true"] {
- @apply .bg-blue-800;
- }
- }
- }
- </style>
- <nav role="navigation">
- <div class="user-box">
- <img alt="User Avatar" src={$session.user.avatarURL} />
- <div>{$session.user.username}</div>
- </div>
- <div class="button-list">
- <h2>Features</h2>
- <a data-active={segment === 'contest'} href="dashboard/contest">Contest</a>
- </div>
- </nav>
|