ui fix

src/lib/components/shadcn/accordion/accordion-trigger.svelte

@@ -21,6 +21,6 @@
 		on:click
 	>
 		<slot />
-		<ChevronDown class="h-4 w-4 absolute right-16 transition-transform duration-200 " />
+		<ChevronDown class="h-4 w-4 absolute right-40 sm:right-16 transition-transform duration-200 " />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte

@@ -17,7 +17,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		"z-50 min-w-[8rem] rounded-md border border-gray-800 bg-[#09090B] p-1 text-white shadow-md focus:outline-none",
 		className
 	)}
 	{...$$restProps}

src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte

@@ -9,6 +9,6 @@
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	class={cn("-mx-1 my-1 h-px bg-gray-800", className)}
 	{...$$restProps}
 />

src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -18,7 +18,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		"z-50 min-w-[8rem] rounded-md border bg-[#09090B] p-1 text-white shadow-lg focus:outline-none",
 		className
 	)}
 	{...$$restProps}

src/lib/components/shadcn/sheet/index.ts

@@ -43,7 +43,7 @@ export const sheetVariants = tv({
 		side: {
 			top: "inset-x-0 top-0 border-b",
 			bottom: "inset-x-0 bottom-0 border-t",
-			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+			left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
 			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
 		},
 	},
@@ -56,48 +56,48 @@ export const sheetTransitions = {
 	top: {
 		in: {
 			y: "-100%",
-			duration: 500,
+			duration: 100,
 			opacity: 1,
 		},
 		out: {
 			y: "-100%",
-			duration: 300,
+			duration: 100,
 			opacity: 1,
 		},
 	},
 	bottom: {
 		in: {
 			y: "100%",
-			duration: 500,
+			duration: 100,
 			opacity: 1,
 		},
 		out: {
 			y: "100%",
-			duration: 300,
+			duration: 100,
 			opacity: 1,
 		},
 	},
 	left: {
 		in: {
 			x: "-100%",
-			duration: 500,
+			duration: 100,
 			opacity: 1,
 		},
 		out: {
 			x: "-100%",
-			duration: 300,
+			duration: 100,
 			opacity: 1,
 		},
 	},
 	right: {
 		in: {
 			x: "100%",
-			duration: 500,
+			duration: 100,
 			opacity: 1,
 		},
 		out: {
 			x: "100%",
-			duration: 300,
+			duration: 100,
 			opacity: 1,
 		},
 	},

src/lib/components/shadcn/sheet/sheet-content.svelte

@@ -37,8 +37,7 @@
 		{...$$restProps}
 	>
 		<slot />
-		<SheetPrimitive.Close
+		<SheetPrimitive.Close id="close-sheet" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
 		>
 			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>

src/routes/+layout.svelte

@@ -53,6 +53,7 @@
   import Box from "lucide-svelte/icons/box";
   import Boxes from "lucide-svelte/icons/boxes";
   import Newspaper from "lucide-svelte/icons/newspaper";
+  import MessageCircle from "lucide-svelte/icons/message-circle";
 
 
   export let data;
@@ -398,13 +399,13 @@ $: {
     <nav class="flex flex-col items-center mr-auto gap-y-4 sm:py-5 w-full">
       <a
         href="/"
-        class="mr-14 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        class="mr-12 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
       >
       <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
         <span class="text-white text-xl">Stocknear</span>
       </a>
       
-      <a href="/" class="flex flex-row items-center ml-4 mr-auto">
+      <a href="/" class="flex flex-row items-center ml-5 mr-auto">
         <div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
           <Home class="h-5.5 w-5.5" />  
         </div>
@@ -412,7 +413,7 @@ $: {
         </a>
 
 
-        <div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
+        <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
 
           <Accordion.Root class="w-fit">
 
@@ -437,7 +438,7 @@ $: {
                   
         </div>
        
-        <div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
+        <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
 
           <Accordion.Root class="w-fit">
 
@@ -462,7 +463,7 @@ $: {
                   
         </div>
 
-        <div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
+        <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
 
           <Accordion.Root class="w-fit">
 
@@ -487,7 +488,7 @@ $: {
                   
         </div>
 
-        <div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
+        <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
 
           <Accordion.Root class="w-fit">
 
@@ -511,7 +512,7 @@ $: {
         </div>
 
 
-        <div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
+        <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
 
           <Accordion.Root class="w-fit">
 
@@ -536,7 +537,7 @@ $: {
                   
         </div>
 
-        <a href="/dark-pool-flow" class="flex flex-row items-center ml-4 mt-2 mr-auto">
+        <a href="/dark-pool-flow" class="flex flex-row items-center ml-5 mt-3 mr-auto">
           <div
             class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
           >
@@ -546,7 +547,7 @@ $: {
           <span class="ml-3 text-white">Dark Pool</span>
         </a>
 
-        <a href="/hedge-funds" class="flex flex-row items-center ml-4 mt-2 mr-auto">
+        <a href="/hedge-funds" class="flex flex-row items-center ml-5 mt-3 mr-auto">
           <div
             class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
           >
@@ -556,7 +557,7 @@ $: {
           <span class="ml-3 text-white">Hedge Funds</span>
         </a>
 
-        <a href="/market-news" class="flex flex-row items-center ml-4 mt-2 mr-auto">
+        <a href="/market-news" class="flex flex-row items-center ml-5 mt-3 mr-auto">
           <div
             class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
           >
@@ -566,13 +567,21 @@ $: {
           <span class="ml-3 text-white">Newspaper</span>
         </a>
 
+        <a href="/community" class="flex flex-row items-center ml-5 mt-3 mr-auto">
+          <div
+            class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
+          >
+            <MessageCircle class="h-5.5 w-5.5" />
+            
+          </div>
+          <span class="ml-3 text-white">Community</span>
+        </a>
+            
     </nav>
    
   </aside>
   <div class="flex flex-col sm:pl-14">
-    <header
+    <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">
-      class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 sm:border-b sm:border-gray-800 px-4 sm:h-auto sm:px-6"
-    >
       <Sheet.Root>
         <Sheet.Trigger asChild let:builder>
           <Button builders={[builder]} size="icon" class="sm:hidden bg-[#141417] border-none">
@@ -583,37 +592,92 @@ $: {
         <Sheet.Content side="left" class="sm:max-w-xs bg-[#141417]">
           <nav class="grid gap-6 text-lg font-medium bg-[#141417]">
             <a
-            href="##"
+            href="/"
-            class="flex items-center gap-4 px-2.5 text-white"
+            class="flex items-center gap-4 px-0.5 text-white"
           >
           <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
             Stocknear
           </a>
-          <a
+
-            href="##"
+          <Sheet.Close asChild let:builder>
-            class="flex items-center gap-4 px-2.5 text-white"
+            <Button builders={[builder]} type="submit" class="bg-[#141417] -ml-4 mr-auto">
-          >
+              <a href="/" class="flex flex-row items-center mr-auto mt-5">
+                <div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
                   <Home class="h-5.5 w-5.5" />  
-            Dashboard
+                </div>
+                <span class="ml-1.5 text-white text-[1rem]">Home</span>
               </a>
-          <a
+            </Button>
-            href="##"
+          </Sheet.Close>
-            class="flex items-center gap-4 px-2.5 text-white"
+          
+          
+          <div class="flex flex-row items-center mr-auto">
+
+            <Accordion.Root class="w-fit">
+  
+              <Accordion.Item value="item-1">
+  
+                <Accordion.Trigger class="w-fit">
+                  <Stock class="h-5.5 w-5.5 mr-3 text-white ml-1"/>  
+                  <span class="text-white mr-auto">Stocks</span>
+                </Accordion.Trigger>
+                <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
+                  <Sheet.Close asChild let:builder>
+                    <div class="flex flex-col items-start">
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">Top Analyst</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
+                      </Button>
+                    </div>
+
+                  </Sheet.Close>
+                  
+                </Accordion.Content
                 >
-            <ShoppingCart class="h-5.5 w-5.5" />
+              </Accordion.Item>
-            Orders
+            </Accordion.Root>
-          </a>
+                    
-          <a href="##" class="flex items-center gap-4 px-2.5 text-white">
+          </div>
-            <Package class="h-5.5 w-5.5" />
+
-            Products
+          <div class="flex flex-row items-center mr-auto  w-3/4">
-          </a>
+
-          <a
+            <Accordion.Root class="w-fit">
-            href="##"
+  
-            class="flex items-center gap-4 px-2.5 text-white"
+              <Accordion.Item value="item-1">
+  
+                <Accordion.Trigger class="">
+                  <Layers class="h-5.5 w-5.5 mr-3 text-white ml-1"/>  
+                  <span class="text-white mr-auto">ETFs</span>
+                </Accordion.Trigger>
+                <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
+
+                  <Sheet.Close asChild let:builder>
+                    <div class="flex flex-col items-start">
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">New Launches</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
+                      </Button>
+                    </div>
+
+                  </Sheet.Close>
+
+                  
+                </Accordion.Content
                 >
-            <UsersRound class="h-5.5 w-5.5" />
+              </Accordion.Item>
-            Customers
+            </Accordion.Root>
-          </a>
+                    
+          </div>
          
 
           </nav>
@@ -647,12 +711,30 @@ $: {
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end">
-          <DropdownMenu.Label>My Account</DropdownMenu.Label>
+          <DropdownMenu.Item>
+            <a href="/community/profile">
+              My Account
+            </a>
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
-          <DropdownMenu.Item>Settings</DropdownMenu.Item>
+          <DropdownMenu.Item>
-          <DropdownMenu.Item>Support</DropdownMenu.Item>
+            <a href="/watchlist">
+              Watchlist
+            </a>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            <a href="/price-alert">
+             Price Alert
+            </a>
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
-          <DropdownMenu.Item>Logout</DropdownMenu.Item>
+          <DropdownMenu.Item>
+            <form class="cursor-pointer" action="/logout" method="POST">
+              <button type="submit" class="w-full text-start">
+                  <span class="text-start">Logout</span>
+              </button>
+            </form>
+          </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
     </header>