web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

navigation-tabs.svelte (3637B)

      1 <script lang="ts">
      2     import { goto } from "$app/navigation";
      3     import { page } from "$app/state";
      4     import { app_lo } from "$lib/stores/app";
      5     import { Flex, Glyph } from "@radroots/apps-lib";
      6 </script>
      7 
      8 <div
      9     class={`fixed bottom-0 left-0 h-nav_tabs_${$app_lo} flex flex-row w-full pt-2 justify-center items-start`}
     10 >
     11     <div class={`flex flex-row justify-between gap-10 items-center`}>
     12         <div
     13             class={`grid grid-cols-4 flex flex-row h-[3.1rem] px-6 gap-6 justify-start items-center bg-ly1 rounded-full backdrop-blur-lg`}
     14         >
     15             <button
     16                 class={`col-span-1 flex flex-row justify-center items-center`}
     17                 onclick={async () => {
     18                     await goto(`/`);
     19                 }}
     20             >
     21                 <Glyph
     22                     basis={{
     23                         classes: `text-[26px] text-ly0-gl/80 rotate-90`,
     24                         key: `columns`,
     25                         weight: page.url.pathname === `/` ? `fill` : `bold`,
     26                     }}
     27                 />
     28             </button>
     29             <button
     30                 class={`relative col-span-1 flex flex-row justify-center items-center`}
     31                 onclick={async () => {
     32                     await goto(`/search`);
     33                 }}
     34             >
     35                 <Glyph
     36                     basis={{
     37                         classes: `text-[24px] text-ly0-gl/80`,
     38                         key: `magnifying-glass`,
     39                         weight: page.url.pathname.includes(`search`)
     40                             ? `fill`
     41                             : `bold`,
     42                     }}
     43                 />
     44             </button>
     45             <button
     46                 class={`relative col-span-1 flex flex-row justify-center items-center`}
     47                 onclick={async () => {
     48                     goto(`/profile`);
     49                 }}
     50             >
     51                 <Glyph
     52                     basis={{
     53                         classes: `text-[24px] text-ly0-gl/80`,
     54                         key: `user`,
     55                         weight: page.url.pathname.includes(`profile`)
     56                             ? `fill`
     57                             : `bold`,
     58                     }}
     59                 />
     60             </button>
     61             <button
     62                 class={`relative col-span-1 flex flex-row h-full justify-center items-center`}
     63                 onclick={async () => {
     64                     await goto(`/notifications`);
     65                 }}
     66             >
     67                 <Glyph
     68                     basis={{
     69                         classes: `text-[24px] text-ly0-gl/80`,
     70                         key: `bell`,
     71                         weight: page.url.pathname.includes(`notifications`)
     72                             ? `fill`
     73                             : `bold`,
     74                     }}
     75                 />
     76                 <div
     77                     class={`absolute top-2 -right-1 flex flex-row justify-start items-center`}
     78                 >
     79                     <div
     80                         class={`flex flex-row h-2 w-2 justify-start items-center bg-yellow-400 rounded-full`}
     81                     >
     82                         <Flex />
     83                     </div>
     84                 </div>
     85             </button>
     86         </div>
     87         <button
     88             class={`flex flex-row h-[3.1rem] w-[3.1rem] justify-center items-center bg-ly1 rounded-full backdrop-blur-lg`}
     89             onclick={async () => {}}
     90         >
     91             <Glyph
     92                 basis={{
     93                     classes: `text-[22px] text-ly0-gl/80`,
     94 
     95                     key: `plus`,
     96                 }}
     97             />
     98         </button>
     99     </div>
    100 </div>