feat: add login navbar link, hide some nav links on mobile

app/components/Navbar/Navbar.jsx

@@ -4,6 +4,8 @@ import { usePathname } from "next/navigation";
 
 export const Navbar = () => {
   const pathname = usePathname();
+
+  const isNotAuthorizedStyle = "text-gray-700"
   const navLinks = [
     {
       id: 1,
@@ -11,6 +13,8 @@ export const Navbar = () => {
       iconActive: "material-symbols--home",
       title: "Домашняя",
       href: "/",
+      withAuthOnly: false,
+      mobileMenu: false
     },
     {
       id: 2,
@@ -18,6 +22,8 @@ export const Navbar = () => {
       iconActive: "material-symbols--search",
       title: "Поиск",
       href: "/search",
+      withAuthOnly: false,
+      mobileMenu: false
     },
     {
       id: 3,
@@ -25,6 +31,8 @@ export const Navbar = () => {
       iconActive: "material-symbols--bookmarks",
       title: "Закладки",
       href: "/bookmarks",
+      withAuthOnly: true,
+      mobileMenu: true
     },
     {
       id: 4,
@@ -32,6 +40,8 @@ export const Navbar = () => {
       iconActive: "material-symbols--favorite",
       title: "Избранное",
       href: "/favorites",
+      withAuthOnly: true,
+      mobileMenu: true
     },
     {
       id: 5,
@@ -39,17 +49,23 @@ export const Navbar = () => {
       iconActive: "material-symbols--history",
       title: "История",
       href: "/history",
+      withAuthOnly: true,
+      mobileMenu: true
     },
   ];
 
   return (
     <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
-      <div className="px-4 py-4">
+      <div className="flex items-center justify-between px-4 py-4">
         <nav className="flex gap-4">
           {navLinks.map((link) => {
-            return <Link key={link.id} href={link.href} className="flex flex-col items-center sm:flex-row"><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;
+            return <Link key={link.id} href={link.href} className={`flex-col items-center sm:flex-row ${link.mobileMenu ? "hidden sm:flex" : "flex"}`}><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;
           })}
         </nav>
+        <Link href="/login" className="flex flex-col items-center gap-1 justify-cen ter sm:flex-row">
+          <span className={`w-6 h-6 iconify ${pathname == "/login" ? "mdi--user-circle" : "mdi--user-circle-outline"}`}></span>
+          <span className={`${pathname == "/login" ? "font-bold" : ""} text-xs sm:text-base`}>Войти</span>
+        </Link>
       </div>
     </header>
   );