TMP: پلت فرم یادگیرنده Gclient – فاز 1: ساختن یک ناوبر پویا با Next.js ، TypeScript و Tailwind CSS (بروزرسانی 3)

تصویر از “Next/Image”: مؤلفه تصویر را از Next.js. وارد می کند. این مؤلفه برای ارائه بهینه سازی تصویر ، از جمله ویژگی هایی مانند بارگذاری تنبل و اندازه پاسخگو استفاده می شود.

{ورود به سیستم ، شورونداون} از “Lucide-reation”: دو نماد ، ورود به سیستم و شورونداون را از کتابخانه نماد-واکنش Lucide وارد می کند. اینها احتمالاً برای عناصر بصری در نوار ناوبری استفاده می شوند.

3. تعریف مؤلفه:

const Navbar = () => { ... }

این خط یک مؤلفه React عملکردی به نام NAVBAR را تعریف می کند. مؤلفه های عملکردی یک روش مشترک برای ایجاد عناصر UI در React هستند.

4. متغیرهای حالت:

const [showLogin, setShowLogin] = useState(false);
const [showSignup, setShowSignup] = useState(false);
const [showResetPassword, setShowResetPassword] = useState(false);
const [user, setUser] = useState<{ name: string; email: string } | null>(null);
const [dropdownOpen, setDropdownOpen] = useState(false);

• Showlogin ، SetShowlogin: یک متغیر حالت برای کنترل دید معین ورود به سیستم. showLogin دارای یک مقدار بولی (در ابتدا نادرست) ، و setShowLogin تابعی برای به روزرسانی این مقدار است. کی showLogin درست است ، معین ورود به سیستم نمایش داده می شود.
• showsignup ، setShowsignup: شبیه به showLogin، این امکان مشاهده مدال ثبت نام را کنترل می کند.
• whowResetPassword ، setShowResetPassword: قابلیت تنظیم مجدد رمز عبور را کنترل می کند.
• کاربر ، setUser: اطلاعات کاربر ورود به سیستم را ذخیره می کند. نوع useState<{ name: string; email: string } | null>(null) مشخص می کند که user می تواند یک شیء را با خصوصیات نام و ایمیل (هر دو رشته) یا NULL نگه دارد (در صورت عدم ورود کاربر). این به NULL آغاز می شود.
• Dropdownopen ، setDropdownopen: کنترل می کند که منوی کشویی پروفایل کاربر باز یا بسته است. این یک کشور بولی است ، در ابتدا نادرست.

5. HOOK USEEFFECT:

useEffect(() => {
    // Load user from localStorage
    const storedUser = localStorage.getItem("user");
    if (storedUser) {
        setUser(JSON.parse(storedUser));
    }
}, []);

• یک بار بعد از نصب مؤلفه اجرا می شود (به دلیل آرایه وابستگی خالی []).
• localStorage.getItem("user"): داده های کاربر را از LocalStorage مرورگر با استفاده از کلید “کاربر” بازیابی کنید.
• if (storedUser): بررسی می کند که آیا داده های کاربر در LocalStorage پیدا شده است.
• setUser(JSON.parse(storedUser)): تبدیل های JSON را به یک شی تبدیل کرده و به روز می کند user دولت

6. دستگیرندگان معین:

const handleCloseModals = () => {
    setShowLogin(false);
    setShowSignup(false);
    setShowResetPassword(false);
};

const handleForgotPassword = () => {
    setShowLogin(false);
    setShowSignup(false);
    setShowResetPassword(true);
};

const handleSwitchToSignup = () => {
    setShowLogin(false);
    setShowResetPassword(false);
    setShowSignup(true);
};

const handleSwitchToLogin = () => {
    setShowSignup(false);
    setShowResetPassword(false);
    setShowLogin(true);
};

• دستبند: تمام مدالها را می بندد (ورود ، ثبت نام ، تنظیم مجدد رمز عبور).
• HandleforgotPassword: ورود به سیستم و ورود به سیستم را می بندد و بازنشانی رمز عبور را باز می کند.
• دستگیره: ورود به سیستم و بازنشانی مدال های رمز عبور را بسته و مودال ثبت نام را باز می کند.
• دستگیره: سیستم های ثبت نام را ببندد و بازنشانی را بازنشانی می کند و معین ورود به سیستم را باز می کند.

7. دستگیرندگان احراز هویت:

const handleLoginSuccess = (userData: { name: string; email: string }) => {
    setUser(userData);
};

const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    setUser(null);
    setDropdownOpen(false);
};

• HandleLogInsuccess (UserData): به روزرسانی ها user حالت با داده های کاربر دریافت شده (نام و ایمیل).
• Handlelogout ():
  • “توکن” و “کاربر” را از LocalStorage حذف می کند.
  • مجموعه user بازگشت به تهی.
  • منوی کشویی را می بندد.

8. ساختار JSX (بیانیه بازگشت):

return (
    <nav className="flex justify-between items-center px-xl py-4 bg-white font-sans mx-auto rounded box-border width-full">
      <div className="flex items-center gap-6 space-y-2 m-2">
        <Link href="#" className="link">
          <Image className="max-h-8" src="/Azubi-Logo.svg" alt="logo" width={100} height={100} />
        </Link>
        <Link href="/" className="link m-0 block pb-2 text-black text-[16px] font-inter">Home</Link>
        <Link href="/courses" className="link m-0 block pb-2 text-black text-[16px] font-inter">Courses</Link>
      </div>


      <div className="relative">
        {user ? (
          // Logged-in UI (Profile Dropdown)
          <div className="relative flex items-center  cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)}>
            <div className="w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold">
            {user?.name
              ? user.name
                  .split(" ") // Split by space into words
                  .map((word) => word.charAt(0).toUpperCase()) // Get first letter of each word
                  .slice(0, 2) // Take only first two words (if available)
                  .join("") // Combine letters
              : "U"}

            </div>
            <span className="text-black font-medium">{user.name}</span>
            <ChevronDown className="text-black ml-[48px]" />

            {/* Dropdown Menu */}
            {dropdownOpen && (
              <div className="absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20">
                <nav className="w-full text-left px-4 py-2 hover:bg-white text-black">
                  <Link href="/" className="block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200">Portal</Link>
                  <Link
                    href="/"
                    onClick={handleLogout}
                    className="block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200"
                  >
                    Logout
                  </Link>
                </nav>
              </div>


            )}
          </div>
        ) : (
          // Login Button
          <button
            className="link bg-transparent text-blue-700 py-3 px-6 border border-blue-700 rounded-md flex items-center gap-3 text-base font-medium transition-colors duration-300 ease-in-out hover:bg-hero-bg hover:text-white font-inter"
            onClick={() => setShowLogin(true)}
          >
            <span className="font-inter">Login</span>
            <LogIn />
          </button>
        )}


        {/* LOGIN / SIGNUP / RESET PASSWORD MODALS */}
        {showLogin || showSignup || showResetPassword ? (
          <div className="absolute top-[70px] right-[0px] z-10">
            {showLogin && (
              <LoginClient
                onClose={handleCloseModals}
                onForgotPassword={handleForgotPassword}
                onSignup={handleSwitchToSignup}
                onLoginSuccess={handleLoginSuccess}
              />
            )}
            {showSignup && (
              <SignupClient
                onClose={handleCloseModals}
                onLogin={handleSwitchToLogin}
              />
            )}
            {showResetPassword && (
  <ResetPassword onClose={handleCloseModals} onSignup={handleSwitchToSignup} />
)}




          </div>
        ) : null}
      </div>
    </nav>
  );
};


export default Navbar;

عنصر ریشه نشان دهنده نوار ناوبریبشر استفاده می کند Tailwind CSS کلاس برای یک ظاهر طراحی شده (به عنوان مثال ، flexبا justify-betweenبا items-centerبا bg-white).

اولی

(Logo and Nav Links)

 className="flex items-center gap-6 space-y-2 m-2">
     href="#"> ... 
     ... src="https://dev.to/Azubi-Logo.svg" ... />
     href="https://dev.to/">Home
     href="/courses">Courses

توضیح:

• className="flex items-center gap-6 space-y-2 m-2": استفاده می کند جعبه فلزی برای ترتیب موارد به صورت افقی ، با فاصله و حاشیه.
• ... : الف بعد. js Link مؤلفه برای آرم. href="#" ممکن است یک مکان نگهدارنده باشد ، و ممکن است بخواهید آن را به مسیر صفحه اصلی تغییر دهید (/).
• : تصویر آرم را با استفاده از بعد. js Image مؤلفه ، مراجعه به یک فایل تصویری در public دایرکتوری (/Azubi-Logo.svg).
• دو مورد دیگر مؤلفه های "خانه" وت "دوره ها" پیوندهای ناوبری ، با اشاره به مسیر ریشه (/) /courses به ترتیب مسیر.

---

دوم

(User Authentication and Dropdown)

 className="relative">
    {user ? (
        
 className="relative flex items-center cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)}>
            
 className="w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold">
                {user?.name
                    ? user.name
                        .split(" ")
                        .map((word) => word.charAt(0).toUpperCase())
                        .slice(0, 2)
                        .join("")
                    : "U"}
            
             className="text-black font-medium">{user.name}
             className="text-black ml-[48px]" />
        
    ) : (
         className="link bg-transparent" onClick={() => setShowLogin(true)}>
             className="font-inter">Login
             />
        
    )}

توضیح:

• className="relative": زمینه موقعیت یابی را برای موقعیت یابی مطلق منوی کشویی بعداً تنظیم می کند.
• ارائه مشروط ({user ? (...) : (...) }):
  • اگر کاربر وارد شده باشد (user حقیقت است) ، آن را نمایش می دهد UI وارد شدهبشر
  • اگر هیچ کاربر وارد نشده باشد ، نمایش داده می شود UI از سیستم خارج شدهبشر

UI ورود به سیستم (user ? (...)):

• setDropdownOpen(!dropdownOpen)}>: A clickable div که dropdownOpen هنگام کلیک ، باز کردن یا بسته شدن منوی کشویی.

• نماد مشخصات

  :

  • className="w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold": ظروف نماد پروفایل (دایره ای ، پس زمینه رنگی و غیره) را سبک کنید.
  • منطق اولیه کاربر:

  {user?.name
      ? user.name
          .split(" ") // Split by space into words
          .map((word) => word.charAt(0).toUpperCase()) // Get first letter of each word
          .slice(0, 2) // Take only first two words (if available)
          .join("") // Combine letters
      : "U"}
  

  این کد حرف اول دو کلمه اول نام کاربر را برای نمایش به صورت اولیه در نماد پروفایل استخراج می کند. اگر نامی وجود نداشته باشد ، به طور پیش فرض به "U"بشر

• {user.name}: نام کاربر را در کنار نماد نمایش می دهد.

• : یک نماد پایین شورون را نشان می دهد ، که منوی کشویی را نشان می دهد.

UI وارد شده (: (...)):


• setShowLogin(true)}>: یک عنصر دکمه به عنوان پیوند.
  • className="link bg-transparent ...": کلاسهای CSS Tailwind برای یک ظاهر طراحی شده دکمه.
  • onClick={() => setShowLogin(true)}: هنگام کلیک ، تنظیم می شود showLogin به true، باز کردن مدال ورود به سیستم.
  • Login: "ورود به سیستم" برای دکمه.
  • : LogIn نماد از lucide-reactبشر

---

منوی کشویی ({dropdownOpen && (...)})


{dropdownOpen && (
    
 className="absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20">
        
    

)}

توضیح:


• به صورت مشروط ارائه شده است فقط چه زمانی dropdownOpen است ، trueبشر
• className="absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20": سبک ها و موقعیت های منوی کشویی را به طور کامل ، در زیر و در سمت راست نماد پروفایل قرار می دهد.

• : شامل موارد منوی کشویی است.

  • Portal: پیوندی به صفحه "پورتال".
  • Logout: پیوندی که در صورت کلیک ، تماس می گیرد handleLogout عملکردی برای ورود کاربر.

---

ارائه معین ({showLogin || showSignup || showResetPassword ? (...) : null})


{showLogin || showSignup || showResetPassword ? (
    
 className="absolute top-[70px] right-[0px] z-10">
        {showLogin &&  onClose={handleCloseModals} onForgotPassword={handleForgotPassword} onSignup={handleSwitchToSignup} onLoginSuccess={handleLoginSuccess} />}
        {showSignup &&  onClose={handleCloseModals} onLogin={handleSwitchToLogin} />}
        {showResetPassword &&  onClose={handleCloseModals} onSignup={handleSwitchToSignup} />}
    
) : null}

توضیح:


• به طور مشروط ارائه می دهد اجزای معین فقط در صورتی showLoginبا showSignup، یا showResetPassword است ، trueبشر
• className="absolute top-[70px] right-[0px] z-10": سبک ها و موقعیت ها را به طور کامل در زیر نوار ناوبری در سمت راست قرار دهید.
• {showLogin && }: ارائه می دهد LoginClient مؤلفه اگر showLogin است ، trueبشر
  • onClose={handleCloseModals}: عبور می کند handleCloseModals عملکرد به عنوان یک پیشرو به LoginClient، اجازه می دهد که معین ورود به سیستم از درون بسته شود LoginClientبشر
  • onForgotPassword={handleForgotPassword}: عبور می کند handleForgotPassword برای اجازه ورود به معین ورود به سیستم ، بازنشانی رمز عبور.
  • onSignup={handleSwitchToSignup}: عبور می کند handleSwitchToSignup برای جابجایی به مودال ثبت نام از Modal Login.
  • onLoginSuccess={handleLoginSuccess}: عبور می کند handleLoginSuccess در صورت موفقیت آمیز ورود به سیستم ، به روز می شود. user حالت در Navbarبشر

• {showSignup && }: ارائه می دهد SignupClient مؤلفه اگر showSignup است ، trueبشر

  • onClose={handleCloseModals}: عبور می کند handleCloseModals برای بستن معین ثبت نام.
  • onLogin={handleSwitchToLogin}: عبور می کند handleSwitchToLogin برای جابجایی به حالت ورود به سیستم از Modal Signup.

• {showResetPassword && }: ارائه می دهد ResetPassword مؤلفه اگر showResetPassword است ، trueبشر

  • onClose={handleCloseModals}: عبور می کند handleCloseModals برای بستن بازنشانی رمز عبور.
  • onSignup={handleSwitchToSignup}: عبور می کند handleSwitchToSignup برای جابجایی به مودال ثبت نام از بازنشانی رمز عبور.

پایان


ساختمان جزء ناوبری در یک برنامه بعدی. js ممکن است در ابتدا یک کار دلهره آور به نظر برسد ، به خصوص هنگامی که شما در حال جنجال های چندین حالت ، مدالها و جریان احراز هویت کاربر هستید. با این حال ، شکستن آن به قطعات کوچکتر و قابل کنترل - مانند حالت کنترل ، ارائه UI مشروط و مدیریت تعامل کاربر - روند را بسیار نزدیک تر می کند.

این جزء ناوبری نمونه ای عالی از نحوه ایجاد یک نوار ناوبری پویا و کاربر پسند است که با وضعیت احراز هویت کاربر سازگار است. با استفاده از اعمال قلاب مانند useState وت useEffect، همراه با Next.JS ویژگی های مانند Link وت Image، ما یک راه حل قوی و مقیاس پذیر ساخته ایم. استفاده از Tailwind CSS برای یک ظاهر طراحی شده تضمین می کند که این مؤلفه هم پاسخگو باشد و هم از نظر بصری جذاب است.

به عنوان توسعه دهندگان ، ما اغلب با الزامات پیچیده ای روبرو می شویم ، اما با یک برنامه واضح و یک رویکرد گام به گام ، حتی پیچیده ترین اجزای سازنده نیز می توانند به طور مؤثر ساخته شوند. این که آیا شما یک مبتدی هستید یا یک توسعه دهنده با تجربه ، درک نحوه ساخت و اجرای چنین مؤلفه هایی یک مهارت ارزشمند است که در پروژه های شما به خوبی خدمت می کند.

بنابراین ، دفعه بعد که با یک کار چالش برانگیز روبرو شدید ، به یاد داشته باشید که آن را بشکنید ، یک بار با یک قطعه مقابله کنید و دریغ نکنید که به نمونه هایی مانند این یکی مراجعه کنید. برنامه نویسی مبارک! 🚀

---

PS اگر این تفکیک را مفید دانستید ، احساس راحتی کنید که آن را با دیگران به اشتراک بگذارید یا نظر خود را در زیر بگذارید. و فراموش نکنید که پست قبلی را برای ساختار پوشه و بینش بیشتر در مورد این پروژه بررسی کنید!

---

بعدی را بخوانید

راهنمای معماری برای توسعه دهندگان برنامه های تلفن همراه

Buse Akyüz - 15 فوریه

بهینه سازی برنامه های PHP: چرا مدل های خواندن و نوشتن را از هم جدا کنید

گل زایب - 15 فوریه

به روزرسانی های عملکرد جاوا نسخه 24: سریعتر و باهوش تر!

Dhanush - 15 فوریه

لینوکس 101: قسمت 5 - Mastering VI ویرایشگر: راهنمای مبتدی برای ویرایش متن ، ناوبری و دستورات اساسی

Himanshu Bhatt - 15 فوریه