logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

side_drawer.vue (9621B)

    

  1. <template>
  2.   <div
  3.     class="side-drawer-container mobile-drawer"
  4.     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
  5.   >
  6.     <div
  7.       class="side-drawer-darken"
  8.       :class="{ 'side-drawer-darken-closed': closed}"
  9.     />
  10.     <div
  11.       class="side-drawer"
  12.       :class="{'side-drawer-closed': closed}"
  13.       @touchstart="touchStart"
  14.       @touchmove="touchMove"
  15.     >
  16.       <div
  17.         class="side-drawer-heading"
  18.         @click="toggleDrawer"
  19.       >
  20.         <UserCard
  21.           v-if="currentUser"
  22.           :user-id="currentUser.id"
  23.           :hide-bio="true"
  24.         />
  25.         <div
  26.           v-else
  27.           class="side-drawer-logo-wrapper"
  28.         >
  29.           <img :src="logo">
  30.           <span v-if="!hideSitename">{{ sitename }}</span>
  31.         </div>
  32.       </div>
  33.       <ul>
  34.         <li
  35.           v-if="!currentUser"
  36.           @click="toggleDrawer"
  37.         >
  38.           <router-link
  39.             :to="{ name: 'login' }"
  40.             class="menu-item"
  41.           >
  42.             <FAIcon
  43.               fixed-width
  44.               class="fa-scale-110 fa-old-padding"
  45.               icon="sign-in-alt"
  46.             /> {{ $t("login.login") }}
  47.           </router-link>
  48.         </li>
  49.         <li
  50.           v-if="currentUser || !privateMode"
  51.           @click="toggleDrawer"
  52.         >
  53.           <router-link
  54.             :to="timelinesRoute"
  55.             class="menu-item"
  56.           >
  57.             <FAIcon
  58.               fixed-width
  59.               class="fa-scale-110 fa-old-padding"
  60.               icon="home"
  61.             /> {{ $t("nav.timelines") }}
  62.           </router-link>
  63.         </li>
  64.         <li
  65.           v-if="currentUser"
  66.           @click="toggleDrawer"
  67.         >
  68.           <router-link
  69.             :to="{ name: 'lists' }"
  70.             class="menu-item"
  71.           >
  72.             <FAIcon
  73.               fixed-width
  74.               class="fa-scale-110 fa-old-padding"
  75.               icon="list"
  76.             /> {{ $t("nav.lists") }}
  77.           </router-link>
  78.         </li>
  79.         <li
  80.           v-if="currentUser && pleromaChatMessagesAvailable"
  81.           @click="toggleDrawer"
  82.         >
  83.           <router-link
  84.             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
  85.             style="position: relative;"
  86.             class="menu-item"
  87.           >
  88.             <FAIcon
  89.               fixed-width
  90.               class="fa-scale-110 fa-old-padding"
  91.               icon="comments"
  92.             /> {{ $t("nav.chats") }}
  93.             <span
  94.               v-if="unreadChatCount"
  95.               class="badge -notification"
  96.             >
  97.               {{ unreadChatCount }}
  98.             </span>
  99.           </router-link>
  100.         </li>
  101.       </ul>
  102.       <ul v-if="currentUser">
  103.         <li @click="toggleDrawer">
  104.           <router-link
  105.             :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
  106.             class="menu-item"
  107.           >
  108.             <FAIcon
  109.               fixed-width
  110.               class="fa-scale-110 fa-old-padding"
  111.               icon="bell"
  112.             /> {{ $t("nav.interactions") }}
  113.           </router-link>
  114.         </li>
  115.         <li
  116.           v-if="currentUser.locked"
  117.           @click="toggleDrawer"
  118.         >
  119.           <router-link
  120.             to="/friend-requests"
  121.             class="menu-item"
  122.           >
  123.             <FAIcon
  124.               fixed-width
  125.               class="fa-scale-110 fa-old-padding"
  126.               icon="user-plus"
  127.             /> {{ $t("nav.friend_requests") }}
  128.             <span
  129.               v-if="followRequestCount > 0"
  130.               class="badge -notification"
  131.             >
  132.               {{ followRequestCount }}
  133.             </span>
  134.           </router-link>
  135.         </li>
  136.         <li
  137.           v-if="shout"
  138.           @click="toggleDrawer"
  139.         >
  140.           <router-link
  141.             :to="{ name: 'shout-panel' }"
  142.             class="menu-item"
  143.           >
  144.             <FAIcon
  145.               fixed-width
  146.               class="fa-scale-110 fa-old-padding"
  147.               icon="bullhorn"
  148.             /> {{ $t("shoutbox.title") }}
  149.           </router-link>
  150.         </li>
  151.       </ul>
  152.       <ul>
  153.         <li
  154.           v-if="currentUser || !privateMode"
  155.           @click="toggleDrawer"
  156.         >
  157.           <router-link
  158.             :to="{ name: 'search' }"
  159.             class="menu-item"
  160.           >
  161.             <FAIcon
  162.               fixed-width
  163.               class="fa-scale-110 fa-old-padding"
  164.               icon="search"
  165.             /> {{ $t("nav.search") }}
  166.           </router-link>
  167.         </li>
  168.         <li
  169.           v-if="currentUser && suggestionsEnabled"
  170.           @click="toggleDrawer"
  171.         >
  172.           <router-link
  173.             :to="{ name: 'who-to-follow' }"
  174.             class="menu-item"
  175.           >
  176.             <FAIcon
  177.               fixed-width
  178.               class="fa-scale-110 fa-old-padding"
  179.               icon="user-plus"
  180.             /> {{ $t("nav.who_to_follow") }}
  181.           </router-link>
  182.         </li>
  183.         <li @click="toggleDrawer">
  184.           <button
  185.             class="menu-item"
  186.             @click="openSettingsModal"
  187.           >
  188.             <FAIcon
  189.               fixed-width
  190.               class="fa-scale-110 fa-old-padding"
  191.               icon="cog"
  192.             /> {{ $t("settings.settings") }}
  193.           </button>
  194.         </li>
  195.         <li @click="toggleDrawer">
  196.           <router-link
  197.             :to="{ name: 'about'}"
  198.             class="menu-item"
  199.           >
  200.             <FAIcon
  201.               fixed-width
  202.               class="fa-scale-110 fa-old-padding"
  203.               icon="info-circle"
  204.             /> {{ $t("nav.about") }}
  205.           </router-link>
  206.         </li>
  207.         <li
  208.           v-if="currentUser && currentUser.role === 'admin'"
  209.           @click="toggleDrawer"
  210.         >
  211.           <button
  212.             class="menu-item"
  213.             @click.stop="openAdminModal"
  214.           >
  215.             <FAIcon
  216.               fixed-width
  217.               class="fa-scale-110 fa-old-padding"
  218.               icon="tachometer-alt"
  219.             /> {{ $t("nav.administration") }}
  220.           </button>
  221.         </li>
  222.         <li
  223.           v-if="currentUser && supportsAnnouncements"
  224.           @click="toggleDrawer"
  225.         >
  226.           <router-link
  227.             :to="{ name: 'announcements' }"
  228.             class="menu-item"
  229.           >
  230.             <FAIcon
  231.               fixed-width
  232.               class="fa-scale-110 fa-old-padding"
  233.               icon="bullhorn"
  234.             /> {{ $t("nav.announcements") }}
  235.             <span
  236.               v-if="unreadAnnouncementCount"
  237.               class="badge -notification"
  238.             >
  239.               {{ unreadAnnouncementCount }}
  240.             </span>
  241.           </router-link>
  242.         </li>
  243.         <li
  244.           v-if="currentUser"
  245.           @click="toggleDrawer"
  246.         >
  247.           <router-link
  248.             :to="{ name: 'edit-navigation' }"
  249.             class="menu-item"
  250.           >
  251.             <FAIcon
  252.               fixed-width
  253.               class="fa-scale-110 fa-old-padding"
  254.               icon="compass"
  255.             /> {{ $t("nav.edit_nav_mobile") }}
  256.           </router-link>
  257.         </li>
  258.         <li
  259.           v-if="currentUser"
  260.           @click="toggleDrawer"
  261.         >
  262.           <button
  263.             class="menu-item"
  264.             @click="doLogout"
  265.           >
  266.             <FAIcon
  267.               fixed-width
  268.               class="fa-scale-110 fa-old-padding"
  269.               icon="sign-out-alt"
  270.             /> {{ $t("login.logout") }}
  271.           </button>
  272.         </li>
  273.       </ul>
  274.     </div>
  275.     <div
  276.       class="side-drawer-click-outside"
  277.       :class="{'side-drawer-click-outside-closed': closed}"
  278.       @click.stop.prevent="toggleDrawer"
  279.     />
  280.   </div>
  281. </template>
  283. <script src="./side_drawer.js"></script>
  285. <style lang="scss">
  286. .side-drawer-container {
  287.   position: fixed;
  288.   z-index: var(--ZI_navbar);
  289.   top: 0;
  290.   left: 0;
  291.   width: 100%;
  292.   height: 100%;
  293.   display: flex;
  294.   align-items: stretch;
  295.   transition-duration: 0s;
  296.   transition-property: transform;
  297. }
  299. .side-drawer-container-open {
  300.   transform: translate(0%);
  301. }
  303. .side-drawer-container-closed {
  304.   transition-delay: 0.35s;
  305.   transform: translate(-100%);
  306. }
  308. .side-drawer-darken {
  309.   top: 0;
  310.   left: 0;
  311.   width: 100vw;
  312.   height: 100vh;
  313.   position: fixed;
  314.   z-index: -1;
  315.   transition: 0.35s;
  316.   transition-property: background-color;
  317.   background-color: rgb(0 0 0 / 50%);
  318. }
  320. .side-drawer-darken-closed {
  321.   background-color: rgb(0 0 0 / 0%);
  322. }
  324. .side-drawer-click-outside {
  325.   flex: 1 1 100%;
  326. }
  328. .side-drawer {
  329.   overflow-x: hidden;
  330.   transition: 0.35s;
  331.   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  332.   transition-property: transform;
  333.   margin: 0 0 0 -100px;
  334.   padding: 0 0 1em 100px;
  335.   width: 80%;
  336.   max-width: 20em;
  337.   flex: 0 0 80%;
  338.   box-shadow: var(--shadow);
  339.   background-color: var(--background);
  341.   .badge {
  342.     margin-left: 10px;
  343.   }
  344. }
  346. .side-drawer-logo-wrapper {
  347.   display: flex;
  348.   align-items: center;
  349.   padding: 0.85em;
  351.   img {
  352.     flex: none;
  353.     height: 50px;
  354.     margin-right: 0.85em;
  355.   }
  357.   span {
  358.     overflow: hidden;
  359.     text-overflow: ellipsis;
  360.     white-space: nowrap;
  361.   }
  362. }
  364. .side-drawer-click-outside-closed {
  365.   flex: 0 0 0;
  366. }
  368. .side-drawer-closed {
  369.   transform: translate(-100%);
  370. }
  372. .side-drawer-heading {
  373.   background: transparent;
  374.   flex-direction: column;
  375.   align-items: stretch;
  376.   display: flex;
  377.   padding: 0;
  378.   margin: 0;
  379. }
  381. .side-drawer ul {
  382.   list-style: none;
  383.   margin: 0;
  384.   padding: 0;
  385.   border-bottom: 1px solid;
  386.   border-color: var(--border);
  387. }
  389. .side-drawer ul:last-child {
  390.   border: 0;
  391. }
  393. .side-drawer li {
  394.   padding: 0;
  396.   a,
  397.   button {
  398.     box-sizing: border-box;
  399.     display: block;
  400.     height: 3em;
  401.     line-height: 3em;
  402.     padding: 0 0.7em;
  403.   }
  404. }
  405. </style>