mobilny navbar updatnuty

cansat/components/navbar.tsx

@@ -14,6 +14,7 @@ import { Input } from "@heroui/input";
 import { link as linkStyles } from "@heroui/theme";
 import NextLink from "next/link";
 import clsx from "clsx";
+import { Image } from "@heroui/image";
 
 import { siteConfig } from "@/config/site";
 import { ThemeSwitch } from "@/components/theme-switch";
@@ -23,9 +24,8 @@ import {
   DiscordIcon,
   HeartFilledIcon,
   SearchIcon,
-  Logo,
+  InstagramIcon,
 } from "@/components/icons";
-import {Image} from "@heroui/image";
 
 export const Navbar = () => {
   const searchInput = (
@@ -54,11 +54,7 @@ export const Navbar = () => {
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
         <NavbarBrand className="gap-3 max-w-fit">
           <NextLink className="flex justify-start items-center gap-1" href="/">
-              <Image
-                  src="/coloradl.svg"
-                  className="size-7"
-              >
-              </Image>
+            <Image className="size-7" src="/coloradl.svg" />
             <p className="font-bold text-inherit">Adlerka Space Program</p>
           </NextLink>
         </NavbarBrand>
@@ -68,7 +64,7 @@ export const Navbar = () => {
               <NextLink
                 className={clsx(
                   linkStyles({ color: "foreground" }),
-                  "data-[active=true]:text-primary data-[active=true]:font-medium"
+                  "data-[active=true]:text-primary data-[active=true]:font-medium",
                 )}
                 color="foreground"
                 href={item.href}
@@ -91,9 +87,9 @@ export const Navbar = () => {
           <Link isExternal href={siteConfig.links.github} title="GitHub">
             <GithubIcon className="text-default-500" />
           </Link>
-            <Link isExternal href={siteConfig.links.discord} title="Discord">
+          <Link isExternal href={siteConfig.links.discord} title="Discord">
             <DiscordIcon className="text-default-500" />
-        </Link>
+          </Link>
           <ThemeSwitch />
         </NavbarItem>
         <NavbarItem className="hidden md:flex">
@@ -102,8 +98,8 @@ export const Navbar = () => {
             as={Link}
             className="text-sm font-normal text-default-600 bg-default-100"
             href={siteConfig.links.sponsor}
-            target="_self"
             startContent={<HeartFilledIcon className="text-danger" />}
+            target="_self"
             variant="flat"
           >
             Sponsor
@@ -112,26 +108,28 @@ export const Navbar = () => {
       </NavbarContent>
 
       <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
-        <Link isExternal href={siteConfig.links.github}>
-          <GithubIcon className="text-default-500" />
+        <Link isExternal href={siteConfig.links.instagram}>
+          <InstagramIcon className="text-default-500" />
         </Link>
         <ThemeSwitch />
         <NavbarMenuToggle />
       </NavbarContent>
 
       <NavbarMenu>
-        <div className="mx-4 mt-2 flex flex-col gap-2">
+        <div className="mx-4 mt-2 flex flex-col gap-5">
           {siteConfig.navMenuItems.map((item, index) => (
             <NavbarMenuItem key={`${item}-${index}`}>
               <Link
                 color={
-                  index === 2
+                  index === 1 || index === 2
                     ? "primary"
-                    : index === siteConfig.navMenuItems.length - 1
+                    : index === 3
                       ? "danger"
-                      : "foreground"
+                      : index >= 4 && index <= 6
+                        ? "secondary"
+                        : "foreground"
                 }
-                href="#"
+                href={item.href}
                 size="lg"
               >
                 {item.label}