Set alignment for Dropdown and update nav margin-left (#172)

- Define `align='center'` on `DropdownMenuContent` in `DropdownMenu.tsx`
- Update navbar `margin-left` to improve spacing between logo and buttons in `ReactHeader.astro`

Author: AVGVSTVS96

src/components/DropdownMenu.tsx

@@ -23,11 +23,11 @@ export const Dropdown: React.FC<DropdownProps> = ({ children, items }) => {
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          className="data-[state='open']:bg-accent group hidden h-9 px-2 text-muted-foreground hover:text-foreground/80 hover:no-underline data-[state='open']:text-foreground/80 sm:flex">
+          className="group hidden h-9 px-2 text-muted-foreground hover:text-foreground/80 hover:no-underline data-[state='open']:bg-accent data-[state='open']:text-foreground/80 sm:flex">
           {children}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-24 min-w-fit">
+      <DropdownMenuContent className="w-24 min-w-fit" align="center">
         {items.map((item) => (
           <DropdownMenuItem
             key={item.name}
@@ -39,4 +39,4 @@ export const Dropdown: React.FC<DropdownProps> = ({ children, items }) => {
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+};

src/components/ReactHeader.astro

@@ -20,7 +20,7 @@ const allPosts = await Astro.glob('@pages/posts/*.md');
       bassim
     </h1>
   </a>
-  <nav class="button-container flex w-full items-center justify-between pl-3">
+  <nav class="button-container flex w-full items-center justify-between ml-2">
     <span class="flex gap-2 px-4">
       {
         mainLinks.map((link, index) => (