AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change navbar

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-16 13:24:16 +02:00
parent bd59f0e241
commit 58ed786167
3 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/NotificationBell.svelte
View File

@ -3,6 +3,7 @@
import { goto } from '$app/navigation';
import { numberOfUnreadNotification } from '$lib/store';
import Bell from "lucide-svelte/icons/bell";
export let data;
export let hasUnreadElement;
@ -17,15 +18,13 @@ async function toggle() {
<!--Start Notification Bell-->
{#if data?.user}
<div on:click={toggle} class="relative ml-3 -mr-1">
<label class="sm:hover:text-[#756EFF] text-gray-300 hover:text-white cursor-pointer">
<svg class="w-7 h-7 inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.0196 2.91016C8.7096 2.91016 6.0196 5.60016 6.0196 8.91016V11.8002C6.0196 12.4102 5.7596 13.3402 5.4496 13.8602L4.2996 15.7702C3.5896 16.9502 4.0796 18.2602 5.3796 18.7002C9.6896 20.1402 14.3396 20.1402 18.6496 18.7002C19.8596 18.3002 20.3896 16.8702 19.7296 15.7702L18.5796 13.8602C18.2796 13.3402 18.0196 12.4102 18.0196 11.8002V8.91016C18.0196 5.61016 15.3196 2.91016 12.0196 2.91016Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M13.8699 3.19994C13.5599 3.10994 13.2399 3.03994 12.9099 2.99994C11.9499 2.87994 11.0299 2.94994 10.1699 3.19994C10.4599 2.45994 11.1799 1.93994 12.0199 1.93994C12.8599 1.93994 13.5799 2.45994 13.8699 3.19994Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path><path opacity="0.4" d="M15.0195 19.0601C15.0195 20.7101 13.6695 22.0601 12.0195 22.0601C11.1995 22.0601 10.4395 21.7201 9.89953 21.1801C9.35953 20.6401 9.01953 19.8801 9.01953 19.0601" stroke="currentColor" stroke-width="1" stroke-miterlimit="10"></path></svg>
</label>
<div on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
<Bell class="h-[20px] w-[20px]" />
{#if hasUnreadElement}
<div class="absolute top-2 -right-2 flex">
<div class="relative inline-flex text-xs text-white font-bold w-[18px] h-[18px] bg-red-500 border-[1px] border-gray-700 rounded-full -top-3 right-2">
<span class="m-auto -my-0.5">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
<div class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2">
<span class="m-auto">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
</div>
</div>

11
src/lib/components/Searchbar.svelte
View File

@ -3,6 +3,8 @@
import { userRegion, searchBarData, stockTicker, etfTicker, cryptoTicker, screenWidth} from '$lib/store';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import Search from "lucide-svelte/icons/search";
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
@ -321,13 +323,8 @@ $: {
<label on:click={loadSearchData} for="searchBarModal"
class="cursor-pointer w-8 h-8 flex-shrink-0 flex items-center justify-center bg-purple-600 rounded-full">
<span class="sr-only">Search</span>
<svg class="w-3.5 h-3.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-white" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path class="fill-current text-white" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
</svg>
<label on:click={loadSearchData} for="searchBarModal" class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-800 rounded-lg">
<Search class="h-[20px] w-[20px]" />
</label>

6
src/routes/+layout.svelte
View File

@ -649,11 +649,11 @@ $: {
</aside>
<div class="flex flex-col">
<header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" class="sm:xl bg-[#141417] hover:bg-[#141417] text-white sm:hover:bg-white sm:hover:text-black border-none">
<Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
<Button builders={[builder]} size="icon" class="sm:xl bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none">
<Menu class=" h-5.5 w-5.5 sm:w-7 sm:h-7" />
<span class="sr-only">Toggle Menu</span>
</Button>
</Sheet.Trigger>