{"id":97658,"date":"2025-02-15T23:52:37","date_gmt":"2025-02-15T20:22:37","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/"},"modified":"2025-02-15T23:52:37","modified_gmt":"2025-02-15T20:22:37","slug":"tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/","title":{"rendered":"TMP: \u067e\u0644\u062a \u0641\u0631\u0645 \u06cc\u0627\u062f\u06af\u06cc\u0631\u0646\u062f\u0647 Gclient &#8211; \u0641\u0627\u0632 1: \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0646\u0627\u0648\u0628\u0631 \u067e\u0648\u06cc\u0627 \u0628\u0627 Next.js \u060c TypeScript \u0648 Tailwind CSS (\u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc 3)"},"content":{"rendered":"<div data-article-id=\"2281153\" id=\"article-body\" wp_automatic_readability=\"166.14147727273\">\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631\u0633\u062a \u0628\u0647 \u06a9\u062f \u0634\u06cc\u0631\u062c\u0647 \u0628\u0632\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"20\">\n<pre class=\"highlight tsx\"><code>\n\n<span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">LoginClient<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/LoginClient<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SignupClient<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/SignupClient<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ResetPassword<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/ResetPassword<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Image<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/image<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">LogIn<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ChevronDown<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">lucide-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showLogin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowLogin<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showSignup<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowSignup<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showResetPassword<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowResetPassword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUser<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">dropdownOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setDropdownOpen<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Load user from localStorage<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">storedUser<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">storedUser<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">storedUser<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleCloseModals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleForgotPassword<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleSwitchToSignup<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleSwitchToLogin<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLoginSuccess<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">userData<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">userData<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLogout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setDropdownOpen<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex justify-between items-center px-xl py-4 bg-white font-sans mx-auto rounded box-border width-full\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex items-center gap-6 space-y-2 m-2\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"#\"<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"link\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">Image<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"max-h-8\"<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/Azubi-Logo.svg\"<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"s\">\"logo\"<\/span> <span class=\"na\">width<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">100<\/span><span class=\"si\">}<\/span> <span class=\"na\">height<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">100<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"link m-0 block pb-2 text-black text-[16px] font-inter\"<\/span><span class=\"p\">&gt;<\/span>Home<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/courses\"<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"link m-0 block pb-2 text-black text-[16px] font-inter\"<\/span><span class=\"p\">&gt;<\/span>Courses<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"relative\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">user<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"c1\">\/\/ Logged-in UI (Profile Dropdown)<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"relative flex items-center  cursor-pointer\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setDropdownOpen<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">dropdownOpen<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span>\n              <span class=\"p\">?<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Split by space into words<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">word<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nf\">charAt<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nf\">toUpperCase<\/span><span class=\"p\">())<\/span> <span class=\"c1\">\/\/ Get first letter of each word<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Take only first two words (if available)<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Combine letters<\/span>\n              <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">U<\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n\n            <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-black font-medium\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">ChevronDown<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-black ml-[48px]\"<\/span> <span class=\"p\">\/&gt;<\/span>\n\n            <span class=\"si\">{<\/span><span class=\"cm\">\/* Dropdown Menu *\/<\/span><span class=\"si\">}<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">dropdownOpen<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20\"<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-full text-left px-4 py-2 hover:bg-white text-black\"<\/span><span class=\"p\">&gt;<\/span>\n                  <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200\"<\/span><span class=\"p\">&gt;<\/span>Portal<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n                  <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span>\n                    <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span>\n                    <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogout<\/span><span class=\"si\">}<\/span>\n                    <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200\"<\/span>\n                  <span class=\"p\">&gt;<\/span>\n                    Logout\n                  <span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n              <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n\n            <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n          <span class=\"c1\">\/\/ Login Button<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"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\"<\/span>\n            <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"font-inter\"<\/span><span class=\"p\">&gt;<\/span>Login<span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">LogIn<\/span> <span class=\"p\">\/&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n\n\n        <span class=\"si\">{<\/span><span class=\"cm\">\/* LOGIN \/ SIGNUP \/ RESET PASSWORD MODALS *\/<\/span><span class=\"si\">}<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">showLogin<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">showSignup<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">showResetPassword<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"absolute top-[70px] right-[0px] z-10\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">showLogin<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nc\">LoginClient<\/span>\n                <span class=\"na\">onClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"si\">}<\/span>\n                <span class=\"na\">onForgotPassword<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleForgotPassword<\/span><span class=\"si\">}<\/span>\n                <span class=\"na\">onSignup<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleSwitchToSignup<\/span><span class=\"si\">}<\/span>\n                <span class=\"na\">onLoginSuccess<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLoginSuccess<\/span><span class=\"si\">}<\/span>\n              <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">showSignup<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nc\">SignupClient<\/span>\n                <span class=\"na\">onClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"si\">}<\/span>\n                <span class=\"na\">onLogin<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleSwitchToLogin<\/span><span class=\"si\">}<\/span>\n              <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">showResetPassword<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">ResetPassword<\/span> <span class=\"na\">onClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"si\">}<\/span> <span class=\"na\">onSignup<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleSwitchToSignup<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n<span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n\n\n\n\n          <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Navbar<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0645\u06cc \u062f\u0627\u0646\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0646 \u0633\u0631\u062a\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a \u0627\u0645\u0627 \u0628\u0627 \u0645\u0646 \u0628\u0645\u0627\u0646\u06cc\u062f \u06cc\u0627 \u0634\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0632\u0646\u062f\u06af\u06cc \u0631\u0648\u0632\u0627\u0646\u0647 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u062f \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u06a9\u062f \u0631\u0627 \u0637\u06cc \u06a9\u0646\u062f. \u062e\u0648\u0628 \u060c \u0627\u06cc\u0646 \u0641\u0631\u0627\u06cc\u0646\u062f \u062a\u0641\u06a9\u0631 \u0645\u0646 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a\u0646 \u0627\u062c\u0632\u0627\u06cc NAVBAR \u0627\u0633\u062a.<br \/>\u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0646\u0633\u0628\u06cc \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 Src \\ App \\ \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \\ \u06cc\u0627\u062f\u06af\u06cc\u0631\u0646\u062f\u0647 \\ navbar.tsx \u0627\u0633\u062a. <em>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0645\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0646 \u062f\u0631 \u067e\u0633\u062a \u0642\u0628\u0644\u06cc \u060c \u06cc\u0639\u0646\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc 2 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/em><\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0645\u0646 \u060c \u0627\u062f\u0627\u0631\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0646\u0627\u0648\u0628\u0631\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u0641\u0635\u0644\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%AC%D8%B2%D8%A1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\" >\u062c\u0632\u0621 \u0646\u0627\u0648\u0628\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#1_%22use_client%22\" >1 \"use client\";<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#2_%D8%A8%DB%8C%D8%A7%D9%86%DB%8C%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A7%D8%B1%D8%AF%D8%A7%D8%AA\" >2. \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0647\u0627\u06cc \u0648\u0627\u0631\u062f\u0627\u062a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#3_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%D9%85%D8%A4%D9%84%D9%81%D9%87\" >3. \u062a\u0639\u0631\u06cc\u0641 \u0645\u0624\u0644\u0641\u0647:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#4_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA\" >4. \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#5_HOOK_USEEFFECT\" >5. HOOK USEEFFECT:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#6_%D8%AF%D8%B3%D8%AA%DA%AF%DB%8C%D8%B1%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D9%85%D8%B9%DB%8C%D9%86\" >6. \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0645\u0639\u06cc\u0646:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#7_%D8%AF%D8%B3%D8%AA%DA%AF%DB%8C%D8%B1%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\" >7. \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#8_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_JSX_%D8%A8%DB%8C%D8%A7%D9%86%DB%8C%D9%87_%D8%A8%D8%A7%D8%B2%DA%AF%D8%B4%D8%AA\" >8. \u0633\u0627\u062e\u062a\u0627\u0631 JSX (\u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a):<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%B9%D9%86%D8%B5%D8%B1\" >\u0639\u0646\u0635\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%A7%D9%88%D9%84%DB%8C_Logo_and_Nav_Links_className%22flex_items-center_gap-6_space-y-2_m-2%22%3E_href%22%22%3E_src%22https_devtoAzubi-Logosvg%22_%3E_href%22https_devto%22%3EHome_href%22courses%22%3ECourses_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_className%22flex_items-center_gap-6_space-y-2_m-2%22_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF_%D8%AC%D8%B9%D8%A8%D9%87_%D9%81%D9%84%D8%B2%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D8%A7%D9%81%D9%82%DB%8C_%D8%8C_%D8%A8%D8%A7_%D9%81%D8%A7%D8%B5%D9%84%D9%87_%D9%88_%D8%AD%D8%A7%D8%B4%DB%8C%D9%87_%D8%A7%D9%84%D9%81_%D8%A8%D8%B9%D8%AF_js_Link_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A2%D8%B1%D9%85_href%22%22_%D9%85%D9%85%DA%A9%D9%86_%D8%A7%D8%B3%D8%AA_%DB%8C%DA%A9_%D9%85%DA%A9%D8%A7%D9%86_%D9%86%DA%AF%D9%87%D8%AF%D8%A7%D8%B1%D9%86%D8%AF%D9%87_%D8%A8%D8%A7%D8%B4%D8%AF_%D8%8C_%D9%88_%D9%85%D9%85%DA%A9%D9%86_%D8%A7%D8%B3%D8%AA_%D8%A8%D8%AE%D9%88%D8%A7%D9%87%DB%8C%D8%AF_%D8%A2%D9%86_%D8%B1%D8%A7_%D8%A8%D9%87_%D9%85%D8%B3%DB%8C%D8%B1_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D8%B5%D9%84%DB%8C_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1_%D8%A2%D8%B1%D9%85_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D8%B9%D8%AF_js_Image_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%8C_%D9%85%D8%B1%D8%A7%D8%AC%D8%B9%D9%87_%D8%A8%D9%87_%DB%8C%DA%A9_%D9%81%D8%A7%DB%8C%D9%84_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C_%D8%AF%D8%B1_public_%D8%AF%D8%A7%DB%8C%D8%B1%DA%A9%D8%AA%D9%88%D8%B1%DB%8C_Azubi-Logosvg_%D8%AF%D9%88_%D9%85%D9%88%D8%B1%D8%AF_%D8%AF%DB%8C%DA%AF%D8%B1_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%22%D8%AE%D8%A7%D9%86%D9%87%22_%D9%88%D8%AA_%22%D8%AF%D9%88%D8%B1%D9%87_%D9%87%D8%A7%22_%D9%BE%DB%8C%D9%88%D9%86%D8%AF%D9%87%D8%A7%DB%8C_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D8%8C_%D8%A8%D8%A7_%D8%A7%D8%B4%D8%A7%D8%B1%D9%87_%D8%A8%D9%87_%D9%85%D8%B3%DB%8C%D8%B1_%D8%B1%DB%8C%D8%B4%D9%87_courses_%D8%A8%D9%87_%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8_%D9%85%D8%B3%DB%8C%D8%B1_%D8%AF%D9%88%D9%85_User_Authentication_and_Dropdown_className%22relative%22%3E_user_className%22relative_flex_items-center_cursor-pointer%22_onClick_%3E_setDropdownOpendropdownOpen%3E_className%22w-10_h-10_rounded-full_bg-hero-bg_flex_items-center_justify-center_mr-16px_text-white_text-lg_font-semibold%22%3E_username_username_split%22_%22_mapword_%3E_wordcharAt0toUpperCase_slice0_2_join%22%22_%22U%22_className%22text-black_font-medium%22%3Eusername_className%22text-black_ml-48px%22_%3E_className%22link_bg-transparent%22_onClick_%3E_setShowLogintrue%3E_className%22font-inter%22%3ELogin_%3E_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_className%22relative%22_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA_%DB%8C%D8%A7%D8%A8%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA_%DB%8C%D8%A7%D8%A8%DB%8C_%D9%85%D8%B7%D9%84%D9%82_%D9%85%D9%86%D9%88%DB%8C_%DA%A9%D8%B4%D9%88%DB%8C%DB%8C_%D8%A8%D8%B9%D8%AF%D8%A7%D9%8B_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%85%D8%B4%D8%B1%D9%88%D8%B7_user_%D8%A7%DA%AF%D8%B1_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D9%88%D8%A7%D8%B1%D8%AF_%D8%B4%D8%AF%D9%87_%D8%A8%D8%A7%D8%B4%D8%AF_user_%D8%AD%D9%82%DB%8C%D9%82%D8%AA_%D8%A7%D8%B3%D8%AA_%D8%8C_%D8%A2%D9%86_%D8%B1%D8%A7_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF_UI_%D9%88%D8%A7%D8%B1%D8%AF_%D8%B4%D8%AF%D9%87%D8%A8%D8%B4%D8%B1_%D8%A7%DA%AF%D8%B1_%D9%87%DB%8C%DA%86_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D9%88%D8%A7%D8%B1%D8%AF_%D9%86%D8%B4%D8%AF%D9%87_%D8%A8%D8%A7%D8%B4%D8%AF_%D8%8C_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%AF%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_UI_%D8%A7%D8%B2_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D8%AF%D9%87%D8%A8%D8%B4%D8%B1_UI_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_user_setDropdownOpendropdownOpen%3E_A_clickable_div_%DA%A9%D9%87_dropdownOpen_%D9%87%D9%86%DA%AF%D8%A7%D9%85_%DA%A9%D9%84%DB%8C%DA%A9_%D8%8C_%D8%A8%D8%A7%D8%B2_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%D8%A7_%D8%A8%D8%B3%D8%AA%D9%87_%D8%B4%D8%AF%D9%86_%D9%85%D9%86%D9%88%DB%8C_%DA%A9%D8%B4%D9%88%DB%8C%DB%8C_%D9%86%D9%85%D8%A7%D8%AF_%D9%85%D8%B4%D8%AE%D8%B5%D8%A7%D8%AA_className%22w-10_h-10_rounded-full_bg-hero-bg_flex_items-center_justify-center_mr-16px_text-white_text-lg_font-semibold%22_%D8%B8%D8%B1%D9%88%D9%81_%D9%86%D9%85%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%D9%81%D8%A7%DB%8C%D9%84_%D8%AF%D8%A7%DB%8C%D8%B1%D9%87_%D8%A7%DB%8C_%D8%8C_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D8%B1%D9%86%DA%AF%DB%8C_%D9%88_%D8%BA%DB%8C%D8%B1%D9%87_%D8%B1%D8%A7_%D8%B3%D8%A8%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF_%D9%85%D9%86%D8%B7%D9%82_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_username_username_split%22_%22_Split_by_space_into_words_mapword_%3E_wordcharAt0toUpperCase_Get_first_letter_of_each_word_slice0_2_Take_only_first_two_words_if_available_join%22%22_Combine_letters_%22U%22_%D8%A7%DB%8C%D9%86_%DA%A9%D8%AF_%D8%AD%D8%B1%D9%81_%D8%A7%D9%88%D9%84_%D8%AF%D9%88_%DA%A9%D9%84%D9%85%D9%87_%D8%A7%D9%88%D9%84_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%AF%D8%B1_%D9%86%D9%85%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%D9%81%D8%A7%DB%8C%D9%84_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF_%D8%A7%DA%AF%D8%B1_%D9%86%D8%A7%D9%85%DB%8C_%D9%88%D8%AC%D9%88%D8%AF_%D9%86%D8%AF%D8%A7%D8%B4%D8%AA%D9%87_%D8%A8%D8%A7%D8%B4%D8%AF_%D8%8C_%D8%A8%D9%87_%D8%B7%D9%88%D8%B1_%D9%BE%DB%8C%D8%B4_%D9%81%D8%B1%D8%B6_%D8%A8%D9%87_%22U%22%D8%A8%D8%B4%D8%B1_username_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%B1%D8%A7_%D8%AF%D8%B1_%DA%A9%D9%86%D8%A7%D8%B1_%D9%86%D9%85%D8%A7%D8%AF_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF_%DB%8C%DA%A9_%D9%86%D9%85%D8%A7%D8%AF_%D9%BE%D8%A7%DB%8C%DB%8C%D9%86_%D8%B4%D9%88%D8%B1%D9%88%D9%86_%D8%B1%D8%A7_%D9%86%D8%B4%D8%A7%D9%86_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF_%D8%8C_%DA%A9%D9%87_%D9%85%D9%86%D9%88%DB%8C_%DA%A9%D8%B4%D9%88%DB%8C%DB%8C_%D8%B1%D8%A7_%D9%86%D8%B4%D8%A7%D9%86_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF_UI_%D9%88%D8%A7%D8%B1%D8%AF_%D8%B4%D8%AF%D9%87_setShowLogintrue%3E_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AF%DA%A9%D9%85%D9%87_%D8%A8%D9%87_%D8%B9%D9%86%D9%88%D8%A7%D9%86_%D9%BE%DB%8C%D9%88%D9%86%D8%AF_className%22link_bg-transparent_%22_%DA%A9%D9%84%D8%A7%D8%B3%D9%87%D8%A7%DB%8C_CSS_Tailwind_%D8%A8%D8%B1%D8%A7%DB%8C_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87_%D8%AF%DA%A9%D9%85%D9%87_onClick_%3E_setShowLogintrue_%D9%87%D9%86%DA%AF%D8%A7%D9%85_%DA%A9%D9%84%DB%8C%DA%A9_%D8%8C_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_showLogin_%D8%A8%D9%87_true%D8%8C_%D8%A8%D8%A7%D8%B2_%DA%A9%D8%B1%D8%AF%D9%86_%D9%85%D8%AF%D8%A7%D9%84_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_Login_%22%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85%22_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%DA%A9%D9%85%D9%87_LogIn_%D9%86%D9%85%D8%A7%D8%AF_%D8%A7%D8%B2_lucide-react%D8%A8%D8%B4%D8%B1_%D9%85%D9%86%D9%88%DB%8C_%DA%A9%D8%B4%D9%88%DB%8C%DB%8C_dropdownOpen\" >\u0627\u0648\u0644\u06cc \n (Logo and Nav Links)\n\n className=\"flex items-center gap-6 space-y-2 m-2\"&gt;\n     href=\"#\"&gt; ... \n     ... src=\"https:\/\/dev.to\/Azubi-Logo.svg\" ... \/&gt;\n     href=\"https:\/\/dev.to\/\"&gt;Home\n     href=\"\/courses\"&gt;Courses\n\n\n\n\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\n    \n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n  \u062a\u0648\u0636\u06cc\u062d: \n\n\n\nclassName=\"flex items-center gap-6 space-y-2 m-2\": \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u062c\u0639\u0628\u0647 \u0641\u0644\u0632\u06cc \u0628\u0631\u0627\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u0648\u0627\u0631\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u060c \u0628\u0627 \u0641\u0627\u0635\u0644\u0647 \u0648 \u062d\u0627\u0634\u06cc\u0647.\n\n ... : \u0627\u0644\u0641 \u0628\u0639\u062f. js Link  \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0622\u0631\u0645. href=\"#\" \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f (\/).\n\n: \u062a\u0635\u0648\u06cc\u0631 \u0622\u0631\u0645 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0639\u062f. js Image  \u0645\u0624\u0644\u0641\u0647 \u060c \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062a\u0635\u0648\u06cc\u0631\u06cc \u062f\u0631 public \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc (\/Azubi-Logo.svg).\n\u062f\u0648 \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631   \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \"\u062e\u0627\u0646\u0647\" \u0648\u062a \"\u062f\u0648\u0631\u0647 \u0647\u0627\" \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u060c \u0628\u0627 \u0627\u0634\u0627\u0631\u0647 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0631\u06cc\u0634\u0647 (\/) \/courses \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0633\u06cc\u0631.\n\n\n\n  \u062f\u0648\u0645 \n (User Authentication and Dropdown)\n\n className=\"relative\"&gt;\n    {user ? (\n         className=\"relative flex items-center cursor-pointer\" onClick={() =&gt; setDropdownOpen(!dropdownOpen)}&gt;\n             className=\"w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold\"&gt;\n                {user?.name\n                    ? user.name\n                        .split(\" \")\n                        .map((word) =&gt; word.charAt(0).toUpperCase())\n                        .slice(0, 2)\n                        .join(\"\")\n                    : \"U\"}\n            \n             className=\"text-black font-medium\"&gt;{user.name}\n             className=\"text-black ml-[48px]\" \/&gt;\n        \n    ) : (\n         className=\"link bg-transparent\" onClick={() =&gt; setShowLogin(true)}&gt;\n             className=\"font-inter\"&gt;Login\n             \/&gt;\n        \n    )}\n\n\n\n\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\n    \n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n  \u062a\u0648\u0636\u06cc\u062d: \n\n\n\nclassName=\"relative\": \u0632\u0645\u06cc\u0646\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u06cc\u0627\u0628\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u06cc\u0627\u0628\u06cc \u0645\u0637\u0644\u0642 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0639\u062f\u0627\u064b \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.\n\n\u0627\u0631\u0627\u0626\u0647 \u0645\u0634\u0631\u0648\u0637 ({user ? (...) : (...) }):\n\n\u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0628\u0627\u0634\u062f (user \u062d\u0642\u06cc\u0642\u062a \u0627\u0633\u062a) \u060c \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f UI \u0648\u0627\u0631\u062f \u0634\u062f\u0647\u0628\u0634\u0631\n\u0627\u06af\u0631 \u0647\u06cc\u0686 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f UI \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0627\u0631\u062c \u0634\u062f\u0647\u0628\u0634\u0631\n\n\n\n\n  UI \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 (user ? (...)): \n\n\n\n\n setDropdownOpen(!dropdownOpen)}&gt;: A clickable div  \u06a9\u0647 dropdownOpen \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u060c \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u0628\u0633\u062a\u0647 \u0634\u062f\u0646 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc.\n\n\u0646\u0645\u0627\u062f \u0645\u0634\u062e\u0635\u0627\u062a \n:\n\n\nclassName=\"w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold\": \u0638\u0631\u0648\u0641 \u0646\u0645\u0627\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 (\u062f\u0627\u06cc\u0631\u0647 \u0627\u06cc \u060c \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0646\u06af\u06cc \u0648 \u063a\u06cc\u0631\u0647) \u0631\u0627 \u0633\u0628\u06a9 \u06a9\u0646\u06cc\u062f.\n\n\u0645\u0646\u0637\u0642 \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631:\n\n\n{user?.name\n    ? user.name\n        .split(\" \") \/\/ Split by space into words\n        .map((word) =&gt; word.charAt(0).toUpperCase()) \/\/ Get first letter of each word\n        .slice(0, 2) \/\/ Take only first two words (if available)\n        .join(\"\") \/\/ Combine letters\n    : \"U\"}\n\n\u0627\u06cc\u0646 \u06a9\u062f \u062d\u0631\u0641 \u0627\u0648\u0644 \u062f\u0648 \u06a9\u0644\u0645\u0647 \u0627\u0648\u0644 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0648\u0644\u06cc\u0647 \u062f\u0631 \u0646\u0645\u0627\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u0646\u0627\u0645\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0647 \"U\"\u0628\u0634\u0631\n\n{user.name}: \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0646\u0645\u0627\u062f \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.\n\n\n: \u06cc\u06a9 \u0646\u0645\u0627\u062f \u067e\u0627\u06cc\u06cc\u0646 \u0634\u0648\u0631\u0648\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u060c \u06a9\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.\n\n\n  UI \u0648\u0627\u0631\u062f \u0634\u062f\u0647 (: (...)): \n\n\n\n setShowLogin(true)}&gt;: \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u06a9\u0645\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u06cc\u0648\u0646\u062f.\n\n\nclassName=\"link bg-transparent ...\": \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc CSS Tailwind \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062f\u06a9\u0645\u0647.\n\nonClick={() =&gt; setShowLogin(true)}: \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u060c \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f showLogin \u0628\u0647 true\u060c \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062f\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645.\n\nLogin: \"\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\" \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647.\n\n: LogIn \u0646\u0645\u0627\u062f \u0627\u0632 lucide-react\u0628\u0634\u0631\n\n\n\n\n\n  \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc ({dropdownOpen &amp;&amp; (...)})<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD\" >\u062a\u0648\u0636\u06cc\u062d:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%85%D8%B9%DB%8C%D9%86_showLogin_showSignup_showResetPassword_null\" >\u0627\u0631\u0627\u0626\u0647 \u0645\u0639\u06cc\u0646 ({showLogin || showSignup || showResetPassword ? (...) : null})<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-2\" >\u062a\u0648\u0636\u06cc\u062d:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\" >\u067e\u0627\u06cc\u0627\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%A8%D8%B9%D8%AF%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF\" >\u0628\u0639\u062f\u06cc \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%AA%D9%84%D9%81%D9%86_%D9%87%D9%85%D8%B1%D8%A7%D9%87\" >\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_PHP_%DA%86%D8%B1%D8%A7_%D9%85%D8%AF%D9%84_%D9%87%D8%A7%DB%8C_%D8%AE%D9%88%D8%A7%D9%86%D8%AF%D9%86_%D9%88_%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%87%D9%85_%D8%AC%D8%AF%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc PHP: \u0686\u0631\u0627 \u0645\u062f\u0644 \u0647\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0646\u0648\u0634\u062a\u0646 \u0631\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D8%A8%D9%87_%D8%B1%D9%88%D8%B2%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%A7%D9%88%D8%A7_%D9%86%D8%B3%D8%AE%D9%87_24_%D8%B3%D8%B1%DB%8C%D8%B9%D8%AA%D8%B1_%D9%88_%D8%A8%D8%A7%D9%87%D9%88%D8%B4_%D8%AA%D8%B1\" >\u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0627\u0648\u0627 \u0646\u0633\u062e\u0647 24: \u0633\u0631\u06cc\u0639\u062a\u0631 \u0648 \u0628\u0627\u0647\u0648\u0634 \u062a\u0631!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/tmp-gclient-learner-platform-phase-1-building-a-dynamic-navbar-with-nextjs-typescript-and-2mde\/#%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3_101_%D9%82%D8%B3%D9%85%D8%AA_5_-_Mastering_VI_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4%DA%AF%D8%B1_%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%85%D8%A8%D8%AA%D8%AF%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4_%D9%85%D8%AA%D9%86_%D8%8C_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%88_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D8%AA_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\" >\u0644\u06cc\u0646\u0648\u06a9\u0633 101: \u0642\u0633\u0645\u062a 5 - Mastering VI \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc \u0628\u0631\u0627\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0645\u062a\u0646 \u060c \u0646\u0627\u0648\u0628\u0631\u06cc \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AC%D8%B2%D8%A1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  \u062c\u0632\u0621 \u0646\u0627\u0648\u0628\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"1_%22use_client%22\"><\/span>\n<p>  1 <code>\"use client\";<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0628\u062e\u0634\u0646\u0627\u0645\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u06cc\u06a9 \u0627\u0633\u062a <strong>\u0645\u0624\u0644\u0641\u0647 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<\/strong>\u0628\u0634\u0631 \u062f\u0631 Next.js \u060c \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0637\u0631\u0641 \u0633\u0631\u0648\u0631 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f. <code>\"use client\"<\/code> \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0648 \u0647\u0631 \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0628\u0647 \u0622\u0646 \u060c \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc React \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useState<\/code> \u0648\u062a <code>useEffect<\/code>\u060c \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0637\u0631\u0641 \u0645\u0634\u062a\u0631\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR)<\/strong>: \u0633\u0631\u0648\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u062f\u0631\u06a9 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>\u0631\u0646\u062f\u0631 \u0637\u0631\u0641 \u0645\u0634\u062a\u0631\u06cc (CSR)<\/strong>: \u0633\u0631\u0648\u0631 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u0631\u0627 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u060c \u06a9\u0647 \u0633\u067e\u0633 \u062e\u0648\u062f \u0635\u0641\u062d\u0647 \u0648\u0628 \u0631\u0627 \u0645\u06cc \u0633\u0627\u0632\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u06a9\u0646\u062f\u062a\u0631 \u0634\u0648\u062f \u060c \u0627\u0645\u0627 \u062d\u0631\u06a9\u062a \u0628\u06cc\u0646 \u0635\u0641\u062d\u0627\u062a \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0633\u0631\u06cc\u0639\u062a\u0631 \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<p>React Hooks (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c <code>useState<\/code>\u0628\u0627 <code>useEffect<\/code>) \u0627\u0628\u0632\u0627\u0631\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0641\u0642\u0637 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"2_%D8%A8%DB%8C%D8%A7%D9%86%DB%8C%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A7%D8%B1%D8%AF%D8%A7%D8%AA\"><\/span>\n<p>  2. \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0647\u0627\u06cc \u0648\u0627\u0631\u062f\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"13\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">LoginClient<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/LoginClient<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SignupClient<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/SignupClient<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ResetPassword<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/LearnerRegFlow\/ResetPassword<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Image<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/image<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">LogIn<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ChevronDown<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">lucide-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0631\u062d<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u060c Useref \u0627\u0632 &#8220;React&#8221;: \u0627\u06cc\u0646\u0647\u0627 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc React \u0647\u0633\u062a\u0646\u062f:<\/p>\n<p>USESTATE: \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062c\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062c\u062f\u062f \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0648 \u0628\u0627\u0639\u062b \u0634\u0648\u0646\u062f. <\/p>\n<ul>\n<li>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a: \u0627\u06cc\u0646\u0647\u0627 \u0645\u0627\u0646\u0646\u062f \u0638\u0631\u0648\u0641 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0647\u0633\u062a\u0646\u062f. \u0622\u0646\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0631 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647 \u0645\u0627\u0646\u0646\u062f \u0627\u0639\u062f\u0627\u062f \u060c \u0645\u062a\u0646 \u06cc\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc \u062f\u0647\u0646\u062f.<\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f: \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c React \u0645\u06cc \u062f\u0627\u0646\u062f \u06a9\u0647 \u0686\u06cc\u0632\u06cc \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>RENDERS TRIGGER: \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p>UseEff: \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0627 \u062f\u0646\u06cc\u0627\u06cc \u062e\u0627\u0631\u062c \u062f\u0631 \u062a\u0639\u0627\u0645\u0644 \u0647\u0633\u062a\u0646\u062f \u060c \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u060c \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM \u06cc\u0627 \u062a\u0627\u06cc\u0645\u0631. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u060c \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0630\u062e\u06cc\u0631\u0647 \u0645\u062d\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>Useref: \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u0631\u062f\u0627\u062a \u0645\u06cc \u0634\u0648\u062f \u060c Useref \u062f\u0631 \u0648\u0627\u0642\u0639 \u062f\u0631 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 DOM \u06cc\u0627 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0647 \u0628\u0627\u0639\u062b \u0627\u06cc\u062c\u0627\u062f \u0645\u062c\u062f\u062f \u0645\u062c\u062f\u062f \u0646\u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<ul>\n<li>\u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 DOM: \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0635\u0641\u062d\u0647 (\u0645\u0627\u0646\u0646\u062f \u0648\u0631\u0648\u062f\u06cc \u0647\u0627 \u060c \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647) \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0627\u0639\u062b \u0634\u0648\u062f \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u0631\u0627\u0626\u0647 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0645\u0631\u06a9\u0632 \u0648\u0631\u0648\u062f\u06cc \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0639\u0646\u0635\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/li>\n<li>\u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631: \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Useref \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0627\u0645\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u062c\u062f\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0646\u06cc\u0633\u062a. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u060c \u06cc\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u06cc\u0633\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0632 &#8220;..\/learnerregflow\/loginclient&#8221;: \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0647 \u0646\u0627\u0645 loginclient \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0648\u0638\u06cc\u0641\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u0639\u06cc\u0646 \u06cc\u0627 \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f. \u062f\u0631 \u0645\u0633\u06cc\u0631 ..\/learnerregflow\/loginclient \u060c \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc.JS \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.<\/p>\n<p>SignupClient \u0627\u0632 &#8220;..\/learnerregflow\/signupclient&#8221;: \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0646\u0627\u0645 SignupClient \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u0627\u0644 \u06cc\u0627 \u0641\u0631\u0645 \u062b\u0628\u062a \u0646\u0627\u0645 \u060c \u0648\u0627\u0642\u0639 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0641\u0647\u0631\u0633\u062a \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0627\u0632 &#8220;..\/learnerregflow\/resetpassword&#8221;: \u0645\u0624\u0644\u0641\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f ResetPassword \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u060c \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0647\u0645\u0627\u0646 \u0641\u0647\u0631\u0633\u062a \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u067e\u06cc\u0648\u0646\u062f \u0627\u0632 &#8220;Next\/Link&#8221;: \u0645\u0624\u0644\u0641\u0647 \u067e\u06cc\u0648\u0646\u062f \u0631\u0627 \u0627\u0632 Next.js. \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0639\u062f\u06cc \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. <a> \u0628\u0631\u0686\u0633\u0628 \u0647\u0627<\/p>\n<p>\u062a\u0635\u0648\u06cc\u0631 \u0627\u0632 &#8220;Next\/Image&#8221;: \u0645\u0624\u0644\u0641\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0627\u0632 Next.js. \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u062a\u0635\u0648\u06cc\u0631 \u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0646\u0628\u0644 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u067e\u0627\u0633\u062e\u06af\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>{\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0634\u0648\u0631\u0648\u0646\u062f\u0627\u0648\u0646} \u0627\u0632 &#8220;Lucide-reation&#8221;: \u062f\u0648 \u0646\u0645\u0627\u062f \u060c \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0634\u0648\u0631\u0648\u0646\u062f\u0627\u0648\u0646 \u0631\u0627 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0646\u0645\u0627\u062f-\u0648\u0627\u06a9\u0646\u0634 Lucide \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646\u0647\u0627 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0628\u0635\u0631\u06cc \u062f\u0631 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%D9%85%D8%A4%D9%84%D9%81%D9%87\"><\/span>\n<p>  3. \u062a\u0639\u0631\u06cc\u0641 \u0645\u0624\u0644\u0641\u0647:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"7\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span> <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062e\u0637 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 React \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 NAVBAR \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06cc\u06a9 \u0631\u0648\u0634 \u0645\u0634\u062a\u0631\u06a9 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 UI \u062f\u0631 React \u0647\u0633\u062a\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA\"><\/span>\n<p>  4. \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"15\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showLogin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowLogin<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showSignup<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowSignup<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showResetPassword<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowResetPassword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUser<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">dropdownOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setDropdownOpen<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<strong>Showlogin \u060c SetShowlogin<\/strong>: \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u062f\u06cc\u062f \u0645\u0639\u06cc\u0646 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645. <code>showLogin<\/code> \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0628\u0648\u0644\u06cc (\u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0646\u0627\u062f\u0631\u0633\u062a) \u060c \u0648 <code>setShowLogin<\/code> \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0633\u062a. \u06a9\u06cc <code>showLogin<\/code> \u062f\u0631\u0633\u062a \u0627\u0633\u062a \u060c \u0645\u0639\u06cc\u0646 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<strong>showsignup \u060c setShowsignup<\/strong>: \u0634\u0628\u06cc\u0647 \u0628\u0647 <code>showLogin<\/code>\u060c \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062f\u0627\u0644 \u062b\u0628\u062a \u0646\u0627\u0645 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>whowResetPassword \u060c setShowResetPassword<\/strong>: \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u06a9\u0627\u0631\u0628\u0631 \u060c setUser<\/strong>: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0646\u0648\u0639 <code>useState&lt;{ name: string; email: string } | null&gt;(null)<\/code> \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 <code>user<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0634\u06cc\u0621 \u0631\u0627 \u0628\u0627 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0646\u0627\u0645 \u0648 \u0627\u06cc\u0645\u06cc\u0644 (\u0647\u0631 \u062f\u0648 \u0631\u0634\u062a\u0647) \u06cc\u0627 NULL \u0646\u06af\u0647 \u062f\u0627\u0631\u062f (\u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631). \u0627\u06cc\u0646 \u0628\u0647 NULL \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<strong>Dropdownopen \u060c setDropdownopen<\/strong>: \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0632 \u06cc\u0627 \u0628\u0633\u062a\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u06a9\u0634\u0648\u0631 \u0628\u0648\u0644\u06cc \u0627\u0633\u062a \u060c \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0646\u0627\u062f\u0631\u0633\u062a.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"5_HOOK_USEEFFECT\"><\/span>\n<p>  5. HOOK USEEFFECT:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"9\">\n<pre class=\"highlight typescript\"><code><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Load user from localStorage<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">storedUser<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">storedUser<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">storedUser<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u06cc\u06a9 \u0628\u0627\u0631 \u0628\u0639\u062f \u0627\u0632 \u0646\u0635\u0628 \u0645\u0624\u0644\u0641\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f (\u0628\u0647 \u062f\u0644\u06cc\u0644 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0627\u0644\u06cc <code>[]<\/code>).<\/li>\n<li>\n<code>localStorage.getItem(\"user\")<\/code>: \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 LocalStorage \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f &#8220;\u06a9\u0627\u0631\u0628\u0631&#8221; \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<code>if (storedUser)<\/code>: \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 LocalStorage \u067e\u06cc\u062f\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<code>setUser(JSON.parse(storedUser))<\/code>: \u062a\u0628\u062f\u06cc\u0644 \u0647\u0627\u06cc JSON \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0634\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>user<\/code> \u062f\u0648\u0644\u062a<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"6_%D8%AF%D8%B3%D8%AA%DA%AF%DB%8C%D8%B1%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D9%85%D8%B9%DB%8C%D9%86\"><\/span>\n<p>  6. \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0645\u0639\u06cc\u0646:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"10\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">handleCloseModals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleForgotPassword<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleSwitchToSignup<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleSwitchToLogin<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setShowSignup<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowResetPassword<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<strong>\u062f\u0633\u062a\u0628\u0646\u062f<\/strong>: \u062a\u0645\u0627\u0645 \u0645\u062f\u0627\u0644\u0647\u0627 \u0631\u0627 \u0645\u06cc \u0628\u0646\u062f\u062f (\u0648\u0631\u0648\u062f \u060c \u062b\u0628\u062a \u0646\u0627\u0645 \u060c \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0631\u0645\u0632 \u0639\u0628\u0648\u0631).<\/li>\n<li>\n<strong>HandleforgotPassword<\/strong>: \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0645\u06cc \u0628\u0646\u062f\u062f \u0648 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u062f\u0633\u062a\u06af\u06cc\u0631\u0647<\/strong>: \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u062f\u0627\u0644 \u0647\u0627\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0631\u0627 \u0628\u0633\u062a\u0647 \u0648 \u0645\u0648\u062f\u0627\u0644 \u062b\u0628\u062a \u0646\u0627\u0645 \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u062f\u0633\u062a\u06af\u06cc\u0631\u0647<\/strong>: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u062b\u0628\u062a \u0646\u0627\u0645 \u0631\u0627 \u0628\u0628\u0646\u062f\u062f \u0648 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0631\u0627 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0639\u06cc\u0646 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"7_%D8%AF%D8%B3%D8%AA%DA%AF%DB%8C%D8%B1%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\"><\/span>\n<p>  7. \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"9\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">handleLoginSuccess<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">userData<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">userData<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleLogout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setDropdownOpen<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<strong>HandleLogInsuccess (UserData)<\/strong>: \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 <code>user<\/code> \u062d\u0627\u0644\u062a \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0634\u062f\u0647 (\u0646\u0627\u0645 \u0648 \u0627\u06cc\u0645\u06cc\u0644).<\/li>\n<li>\n<strong>Handlelogout ()<\/strong>:<\/p>\n<ul>\n<li>&#8220;\u062a\u0648\u06a9\u0646&#8221; \u0648 &#8220;\u06a9\u0627\u0631\u0628\u0631&#8221; \u0631\u0627 \u0627\u0632 LocalStorage \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0645\u062c\u0645\u0648\u0639\u0647 <code>user<\/code> \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062a\u0647\u06cc.<\/li>\n<li>\u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0645\u06cc \u0628\u0646\u062f\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"8_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_JSX_%D8%A8%DB%8C%D8%A7%D9%86%DB%8C%D9%87_%D8%A8%D8%A7%D8%B2%DA%AF%D8%B4%D8%AA\"><\/span>\n<p>  8. \u0633\u0627\u062e\u062a\u0627\u0631 JSX (\u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a):<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"11\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">nav<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex justify-between items-center px-xl py-4 bg-white font-sans mx-auto rounded box-border width-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-6 space-y-2 m-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">link<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Image<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">max-h-8<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/Azubi-Logo.svg<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">logo<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">100<\/span><span class=\"p\">}<\/span> <span class=\"nx\">height<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">100<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">link m-0 block pb-2 text-black text-[16px] font-inter<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Home<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/courses<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">link m-0 block pb-2 text-black text-[16px] font-inter<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Courses<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">user<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"c1\">\/\/ Logged-in UI (Profile Dropdown)<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative flex items-center  cursor-pointer<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setDropdownOpen<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">dropdownOpen<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span>\n              <span class=\"p\">?<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Split by space into words<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">word<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nf\">charAt<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nf\">toUpperCase<\/span><span class=\"p\">())<\/span> <span class=\"c1\">\/\/ Get first letter of each word<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Take only first two words (if available)<\/span>\n                  <span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Combine letters<\/span>\n              <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">U<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-black font-medium<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">ChevronDown<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-black ml-[48px]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n\n            <span class=\"p\">{<\/span><span class=\"cm\">\/* Dropdown Menu *\/<\/span><span class=\"p\">}<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">dropdownOpen<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">nav<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full text-left px-4 py-2 hover:bg-white text-black<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Portal<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span>\n                    <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleLogout<\/span><span class=\"p\">}<\/span>\n                    <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">block py-2 text-black text-[16px] font-inter hover:text-hero-bg transition-colors duration-200<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"o\">&gt;<\/span>\n                    <span class=\"nx\">Logout<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/nav<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n\n            <span class=\"p\">)}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n          <span class=\"c1\">\/\/ Login Button<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">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<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setShowLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-inter<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Login<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">LogIn<\/span> <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)}<\/span>\n\n\n        <span class=\"p\">{<\/span><span class=\"cm\">\/* LOGIN \/ SIGNUP \/ RESET PASSWORD MODALS *\/<\/span><span class=\"p\">}<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">showLogin<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">showSignup<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">showResetPassword<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute top-[70px] right-[0px] z-10<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">showLogin<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">LoginClient<\/span>\n                <span class=\"nx\">onClose<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">onForgotPassword<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleForgotPassword<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">onSignup<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleSwitchToSignup<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">onLoginSuccess<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleLoginSuccess<\/span><span class=\"p\">}<\/span>\n              <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">)}<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">showSignup<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">SignupClient<\/span>\n                <span class=\"nx\">onClose<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">onLogin<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleSwitchToLogin<\/span><span class=\"p\">}<\/span>\n              <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">)}<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">showResetPassword<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n  <span class=\"o\">&lt;<\/span><span class=\"nx\">ResetPassword<\/span> <span class=\"nx\">onClose<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCloseModals<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onSignup<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleSwitchToSignup<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span><span class=\"p\">)}<\/span>\n\n\n\n\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/nav<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Navbar<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B9%D9%86%D8%B5%D8%B1\"><\/span>\n<p>  <code><\/p>\n<nav\/><\/code>  \u0639\u0646\u0635\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 <strong>\u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong>\u0628\u0634\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <strong>Tailwind CSS<\/strong> \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c <code>flex<\/code>\u0628\u0627 <code>justify-between<\/code>\u0628\u0627 <code>items-center<\/code>\u0628\u0627 <code>bg-white<\/code>).<\/p>\n<hr\/>\n<h2>\n<p>  \u0627\u0648\u0644\u06cc <code><\/p>\n<div wp_automatic_readability=\"6.1756368386675\"> (Logo and Nav Links)<\/p>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"8\">\n<pre class=\"highlight html\"><code wp_automatic_readability=\"1.5\"><span class=\"nt\" wp_automatic_readability=\"3\"><p> <span class=\"na\">className=<\/span><span class=\"s\">\"flex items-center gap-6 space-y-2 m-2\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span> ... <span class=\"nt\"\/>\n    <span class=\"nt\"><image> <span class=\"err\">...<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/dev.to\/Azubi-Logo.svg\"<\/span> <span class=\"err\">...<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"nt\">&gt;<\/span>Home<span class=\"nt\"\/>\n    <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"\/courses\"<\/span><span class=\"nt\">&gt;<\/span>Courses<span class=\"nt\"\/>\n<span class=\"nt\"\/><\/span><\/span><\/image><\/span><\/span><\/p><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<strong><code>className=\"flex items-center gap-6 space-y-2 m-2\"<\/code><\/strong>: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <strong>\u062c\u0639\u0628\u0647 \u0641\u0644\u0632\u06cc<\/strong> \u0628\u0631\u0627\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u0648\u0627\u0631\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u060c \u0628\u0627 \u0641\u0627\u0635\u0644\u0647 \u0648 \u062d\u0627\u0634\u06cc\u0647.<\/li>\n<li>\n<strong><code><link href=\"#\"\/> ... <\/code><\/strong>: \u0627\u0644\u0641 <strong>\u0628\u0639\u062f. js <code>Link<\/code><\/strong>  \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0622\u0631\u0645. <code>href=\"#\"<\/code> \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f (<code>\/<\/code>).<\/li>\n<li>\n<strong><code><image ...=\"\" src=\"https:\/\/dev.to\/Azubi-Logo.svg\"\/><\/code><\/strong>: \u062a\u0635\u0648\u06cc\u0631 \u0622\u0631\u0645 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong>\u0628\u0639\u062f. js <code>Image<\/code><\/strong>  \u0645\u0624\u0644\u0641\u0647 \u060c \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062a\u0635\u0648\u06cc\u0631\u06cc \u062f\u0631 <code>public<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc (<code>\/Azubi-Logo.svg<\/code>).<\/li>\n<li>\u062f\u0648 \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 <strong><code><link\/><\/code><\/strong>  \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc <strong>\"\u062e\u0627\u0646\u0647\"<\/strong> \u0648\u062a <strong>\"\u062f\u0648\u0631\u0647 \u0647\u0627\"<\/strong> \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u060c \u0628\u0627 \u0627\u0634\u0627\u0631\u0647 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0631\u06cc\u0634\u0647 (<code>\/<\/code>) <code>\/courses<\/code> \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0633\u06cc\u0631.<\/li>\n<\/ul>\n<hr\/>\n<h2>\n<p>  \u062f\u0648\u0645 <code wp_automatic_readability=\"0.9445894981143\"><\/p>\n<div wp_automatic_readability=\"9.445894981143\"> (User Authentication and Dropdown)<\/p>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"11\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div> <span class=\"na\">className=<\/span><span class=\"s\">\"relative\"<\/span><span class=\"nt\">&gt;<\/span>\n    {user ? (\n        <span class=\"nt\" wp_automatic_readability=\"1\"><div wp_automatic_readability=\"9.5\"> <span class=\"na\">className=<\/span><span class=\"s\">\"relative flex items-center cursor-pointer\"<\/span> <span class=\"na\">onClick=<\/span><span class=\"s\">{()<\/span> <span class=\"err\">=<\/span><span class=\"nt\">&gt;<\/span> setDropdownOpen(!dropdownOpen)}&gt;\n            <span class=\"nt\" wp_automatic_readability=\"5\"><p> <span class=\"na\">className=<\/span><span class=\"s\">\"w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold\"<\/span><span class=\"nt\">&gt;<\/span>\n                {user?.name\n                    ? user.name\n                        .split(\" \")\n                        .map((word) =&gt; word.charAt(0).toUpperCase())\n                        .slice(0, 2)\n                        .join(\"\")\n                    : \"U\"}\n            <span class=\"nt\"\/><\/p><\/span>\n            <span class=\"nt\"><span> <span class=\"na\">className=<\/span><span class=\"s\">\"text-black font-medium\"<\/span><span class=\"nt\">&gt;<\/span>{user.name}<span class=\"nt\"\/><\/span>\n            <span class=\"nt\"><chevrondown> <span class=\"na\">className=<\/span><span class=\"s\">\"text-black ml-[48px]\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n        <span class=\"nt\"\/><\/chevrondown><\/span><\/span><\/div><\/span>\n    ) : (\n        <span class=\"nt\"><button> <span class=\"na\">className=<\/span><span class=\"s\">\"link bg-transparent\"<\/span> <span class=\"na\">onClick=<\/span><span class=\"s\">{()<\/span> <span class=\"err\">=<\/span><span class=\"nt\">&gt;<\/span> setShowLogin(true)}&gt;\n            <span class=\"nt\"><span> <span class=\"na\">className=<\/span><span class=\"s\">\"font-inter\"<\/span><span class=\"nt\">&gt;<\/span>Login<span class=\"nt\"\/><\/span>\n            <span class=\"nt\"><login> <span class=\"nt\">\/&gt;<\/span>\n        <span class=\"nt\"\/><\/login><\/span><\/span><\/button><\/span>\n    )}\n<span class=\"nt\"\/><\/div><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-2\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<strong><code>className=\"relative\"<\/code><\/strong>: \u0632\u0645\u06cc\u0646\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u06cc\u0627\u0628\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u06cc\u0627\u0628\u06cc \u0645\u0637\u0644\u0642 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0639\u062f\u0627\u064b \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u0627\u0631\u0627\u0626\u0647 \u0645\u0634\u0631\u0648\u0637 (<code>{user ? (...) : (...) }<\/code>)<\/strong>:<\/p>\n<ul>\n<li>\u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0628\u0627\u0634\u062f (<code>user<\/code> \u062d\u0642\u06cc\u0642\u062a \u0627\u0633\u062a) \u060c \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f <strong>UI \u0648\u0627\u0631\u062f \u0634\u062f\u0647<\/strong>\u0628\u0634\u0631<\/li>\n<li>\u0627\u06af\u0631 \u0647\u06cc\u0686 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <strong>UI \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0627\u0631\u062c \u0634\u062f\u0647<\/strong>\u0628\u0634\u0631<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>\n<p>  UI \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 (<code>user ? (...)<\/code>):<br \/>\n<\/h4>\n<ul>\n<li>\n<strong><code wp_automatic_readability=\"2.3390630266262\"><\/p>\n<div classname=\"relative flex items-center cursor-pointer\" onclick=\"{()\" wp_automatic_readability=\"28.932084309133\"> setDropdownOpen(!dropdownOpen)}&gt;: A clickable <code>div<\/code>  \u06a9\u0647 <code>dropdownOpen<\/code> \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u060c \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u0628\u0633\u062a\u0647 \u0634\u062f\u0646 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc.<\/p>\n<li wp_automatic_readability=\"34.915943099945\">\n<p><strong>\u0646\u0645\u0627\u062f \u0645\u0634\u062e\u0635\u0627\u062a <code wp_automatic_readability=\"24.441018518519\"><\/p>\n<div wp_automatic_readability=\"60.853148148148\">:<\/p>\n<ul>\n<li>\n<strong><code>className=\"w-10 h-10 rounded-full bg-hero-bg flex items-center justify-center mr-[16px] text-white text-lg font-semibold\"<\/code><\/strong>: \u0638\u0631\u0648\u0641 \u0646\u0645\u0627\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 (\u062f\u0627\u06cc\u0631\u0647 \u0627\u06cc \u060c \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0646\u06af\u06cc \u0648 \u063a\u06cc\u0631\u0647) \u0631\u0627 \u0633\u0628\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u0645\u0646\u0637\u0642 \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631<\/strong>:\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span>\n    <span class=\"p\">?<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Split by space into words<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">word<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nf\">charAt<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nf\">toUpperCase<\/span><span class=\"p\">())<\/span> <span class=\"c1\">\/\/ Get first letter of each word<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Take only first two words (if available)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Combine letters<\/span>\n    <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">U<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u062d\u0631\u0641 \u0627\u0648\u0644 \u062f\u0648 \u06a9\u0644\u0645\u0647 \u0627\u0648\u0644 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0648\u0644\u06cc\u0647 \u062f\u0631 \u0646\u0645\u0627\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u0646\u0627\u0645\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0647 <code>\"U\"<\/code>\u0628\u0634\u0631<\/p>\n<li wp_automatic_readability=\"-1\">\n<p><strong><code><span classname=\"text-black font-medium\">{user.name}<\/span><\/code><\/strong>: \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0646\u0645\u0627\u062f \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<\/li>\n<li wp_automatic_readability=\"0\">\n<p><strong><code><chevrondown classname=\"text-black ml-[48px]\"\/><\/code><\/strong>: \u06cc\u06a9 \u0646\u0645\u0627\u062f \u067e\u0627\u06cc\u06cc\u0646 \u0634\u0648\u0631\u0648\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u060c \u06a9\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<\/li>\n<h4>\n<p>  UI \u0648\u0627\u0631\u062f \u0634\u062f\u0647 (<code>: (...)<\/code>):<br \/>\n<\/h4>\n<ul>\n<li>\n<strong><code><button ...=\"\" onclick=\"{()\"> setShowLogin(true)}&gt;<\/button><\/code><\/strong>: \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u06a9\u0645\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u06cc\u0648\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong><code>className=\"link bg-transparent ...\"<\/code><\/strong>: \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc CSS Tailwind \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062f\u06a9\u0645\u0647.<\/li>\n<li>\n<strong><code>onClick={() =&gt; setShowLogin(true)}<\/code><\/strong>: \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u060c \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f <code>showLogin<\/code> \u0628\u0647 <code>true<\/code>\u060c \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062f\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645.<\/li>\n<li>\n<strong><code><span classname=\"font-inter\">Login<\/span><\/code><\/strong>: \"\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\" \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647.<\/li>\n<li>\n<strong><code><login\/><\/code><\/strong>: <code>LogIn<\/code> \u0646\u0645\u0627\u062f \u0627\u0632 <code>lucide-react<\/code>\u0628\u0634\u0631<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>\n<p>  \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc (<code>{dropdownOpen &amp;&amp; (...)}<\/code>)<br \/>\n<\/h2>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"9\">\n<pre class=\"highlight html\"><code wp_automatic_readability=\"2\">{dropdownOpen <span class=\"err\">&amp;&amp;<\/span> (\n    <span class=\"nt\" wp_automatic_readability=\"4\"><p> <span class=\"na\">className=<\/span><span class=\"s\">\"absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><nav> <span class=\"na\">className=<\/span><span class=\"s\">\"...\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"nt\">&gt;<\/span>Portal<span class=\"nt\"\/>\n            <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">onClick=<\/span><span class=\"s\">{handleLogout}<\/span><span class=\"nt\">&gt;<\/span>Logout<span class=\"nt\"\/>\n        <span class=\"nt\"\/><\/span><\/span><\/nav><\/span>\n    <span class=\"nt\"\/><\/p><\/span>\n)}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<\/h3>\n<ul>\n<li>\n<strong>\u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0634\u0631\u0648\u0637 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/strong> \u0641\u0642\u0637 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc <code>dropdownOpen<\/code> \u0627\u0633\u062a \u060c <code>true<\/code>\u0628\u0634\u0631<\/li>\n<li>\n<strong><code>className=\"absolute top-[60px] right-0 mt-2 w-48 bg-white border border-gray-300 rounded-md shadow-md z-20\"<\/code><\/strong>: \u0633\u0628\u06a9 \u0647\u0627 \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u060c \u062f\u0631 \u0632\u06cc\u0631 \u0648 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0646\u0645\u0627\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\n<strong><code><\/p>\n<nav classname=\"...\"> ... <\/nav>\n<p><\/code><\/strong>: \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0633\u062a.<\/p>\n<ul>\n<li>\n<strong><code><link href=\"https:\/\/dev.to\/\"\/>Portal<\/code><\/strong>: \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u0635\u0641\u062d\u0647 \"\u067e\u0648\u0631\u062a\u0627\u0644\".<\/li>\n<li>\n<strong><code><link href=\"https:\/\/dev.to\/\" onclick=\"{handleLogout}\"\/>Logout<\/code><\/strong>: \u067e\u06cc\u0648\u0646\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a \u06a9\u0644\u06cc\u06a9 \u060c \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>handleLogout<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%85%D8%B9%DB%8C%D9%86_showLogin_showSignup_showResetPassword_null\"><\/span>\n<p>  \u0627\u0631\u0627\u0626\u0647 \u0645\u0639\u06cc\u0646 (<code>{showLogin || showSignup || showResetPassword ? (...) : null}<\/code>)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\" wp_automatic_readability=\"10\">\n<pre class=\"highlight html\"><code wp_automatic_readability=\"2.5\">{showLogin || showSignup || showResetPassword ? (\n    <span class=\"nt\" wp_automatic_readability=\"5\"><p> <span class=\"na\">className=<\/span><span class=\"s\">\"absolute top-[70px] right-[0px] z-10\"<\/span><span class=\"nt\">&gt;<\/span>\n        {showLogin <span class=\"err\">&amp;&amp;<\/span> <span class=\"nt\"><loginclient> <span class=\"na\">onClose=<\/span><span class=\"s\">{handleCloseModals}<\/span> <span class=\"na\">onForgotPassword=<\/span><span class=\"s\">{handleForgotPassword}<\/span> <span class=\"na\">onSignup=<\/span><span class=\"s\">{handleSwitchToSignup}<\/span> <span class=\"na\">onLoginSuccess=<\/span><span class=\"s\">{handleLoginSuccess}<\/span> <span class=\"nt\">\/&gt;<\/span>}\n        {showSignup <span class=\"err\">&amp;&amp;<\/span> <span class=\"nt\"><signupclient> <span class=\"na\">onClose=<\/span><span class=\"s\">{handleCloseModals}<\/span> <span class=\"na\">onLogin=<\/span><span class=\"s\">{handleSwitchToLogin}<\/span> <span class=\"nt\">\/&gt;<\/span>}\n        {showResetPassword <span class=\"err\">&amp;&amp;<\/span> <span class=\"nt\"><resetpassword> <span class=\"na\">onClose=<\/span><span class=\"s\">{handleCloseModals}<\/span> <span class=\"na\">onSignup=<\/span><span class=\"s\">{handleSwitchToSignup}<\/span> <span class=\"nt\">\/&gt;<\/span>}\n    <span class=\"nt\"\/><\/resetpassword><\/span><\/signupclient><\/span><\/loginclient><\/span><\/p><\/span>\n) : null}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<\/h3>\n<ul>\n<li>\n<strong>\u0628\u0647 \u0637\u0648\u0631 \u0645\u0634\u0631\u0648\u0637 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f<\/strong> \u0627\u062c\u0632\u0627\u06cc \u0645\u0639\u06cc\u0646 \u0641\u0642\u0637 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc <code>showLogin<\/code>\u0628\u0627 <code>showSignup<\/code>\u060c \u06cc\u0627 <code>showResetPassword<\/code> \u0627\u0633\u062a \u060c <code>true<\/code>\u0628\u0634\u0631<\/li>\n<li>\n<strong><code>className=\"absolute top-[70px] right-[0px] z-10\"<\/code><\/strong>: \u0633\u0628\u06a9 \u0647\u0627 \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/li>\n<li>\n<strong><code>{showLogin &amp;&amp; <loginclient ...=\"\"\/>}<\/code><\/strong>: \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>LoginClient<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06af\u0631 <code>showLogin<\/code> \u0627\u0633\u062a \u060c <code>true<\/code>\u0628\u0634\u0631<\/p>\n<ul>\n<li>\n<strong><code>onClose={handleCloseModals}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleCloseModals<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u06cc\u0634\u0631\u0648 \u0628\u0647 <code>LoginClient<\/code>\u060c \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u0639\u06cc\u0646 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0632 \u062f\u0631\u0648\u0646 \u0628\u0633\u062a\u0647 \u0634\u0648\u062f <code>LoginClient<\/code>\u0628\u0634\u0631<\/li>\n<li>\n<strong><code>onForgotPassword={handleForgotPassword}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleForgotPassword<\/code> \u0628\u0631\u0627\u06cc \u0627\u062c\u0627\u0632\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0645\u0639\u06cc\u0646 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631.<\/li>\n<li>\n<strong><code>onSignup={handleSwitchToSignup}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleSwitchToSignup<\/code> \u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u0647 \u0645\u0648\u062f\u0627\u0644 \u062b\u0628\u062a \u0646\u0627\u0645 \u0627\u0632 Modal Login.<\/li>\n<li>\n<strong><code>onLoginSuccess={handleLoginSuccess}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleLoginSuccess<\/code> \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f. <code>user<\/code> \u062d\u0627\u0644\u062a \u062f\u0631 <code>Navbar<\/code>\u0628\u0634\u0631<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong><code>{showSignup &amp;&amp; <signupclient ...=\"\"\/>}<\/code><\/strong>: \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>SignupClient<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06af\u0631 <code>showSignup<\/code> \u0627\u0633\u062a \u060c <code>true<\/code>\u0628\u0634\u0631<\/p>\n<ul>\n<li>\n<strong><code>onClose={handleCloseModals}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleCloseModals<\/code> \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u0645\u0639\u06cc\u0646 \u062b\u0628\u062a \u0646\u0627\u0645.<\/li>\n<li>\n<strong><code>onLogin={handleSwitchToLogin}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleSwitchToLogin<\/code> \u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u0647 \u062d\u0627\u0644\u062a \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0632 Modal Signup.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong><code>{showResetPassword &amp;&amp; <resetpassword ...=\"\"\/>}<\/code><\/strong>: \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>ResetPassword<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06af\u0631 <code>showResetPassword<\/code> \u0627\u0633\u062a \u060c <code>true<\/code>\u0628\u0634\u0631<\/p>\n<ul>\n<li>\n<strong><code>onClose={handleCloseModals}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleCloseModals<\/code> \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631.<\/li>\n<li>\n<strong><code>onSignup={handleSwitchToSignup}<\/code><\/strong>: \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>handleSwitchToSignup<\/code> \u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u0647 \u0645\u0648\u062f\u0627\u0644 \u062b\u0628\u062a \u0646\u0627\u0645 \u0627\u0632 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\"><\/span>\n<p>  <strong>\u067e\u0627\u06cc\u0627\u0646<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0633\u0627\u062e\u062a\u0645\u0627\u0646 <strong>\u062c\u0632\u0621 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong> \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0639\u062f\u06cc. js \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u06a9\u0627\u0631 \u062f\u0644\u0647\u0631\u0647 \u0622\u0648\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f \u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062c\u0646\u062c\u0627\u0644 \u0647\u0627\u06cc \u0686\u0646\u062f\u06cc\u0646 \u062d\u0627\u0644\u062a \u060c \u0645\u062f\u0627\u0644\u0647\u0627 \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0647\u0633\u062a\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0634\u06a9\u0633\u062a\u0646 \u0622\u0646 \u0628\u0647 \u0642\u0637\u0639\u0627\u062a \u06a9\u0648\u0686\u06a9\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u06a9\u0646\u062a\u0631\u0644 - \u0645\u0627\u0646\u0646\u062f \u062d\u0627\u0644\u062a \u06a9\u0646\u062a\u0631\u0644 \u060c \u0627\u0631\u0627\u0626\u0647 UI \u0645\u0634\u0631\u0648\u0637 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 - \u0631\u0648\u0646\u062f \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0646\u0632\u062f\u06cc\u06a9 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 <strong>\u062c\u0632\u0621 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong> \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0639\u0627\u0644\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0639\u0645\u0627\u0644 <strong>\u0642\u0644\u0627\u0628<\/strong> \u0645\u0627\u0646\u0646\u062f <code>useState<\/code> \u0648\u062a <code>useEffect<\/code>\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 <strong>Next.JS \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<\/strong> \u0645\u0627\u0646\u0646\u062f <code>Link<\/code> \u0648\u062a <code>Image<\/code>\u060c \u0645\u0627 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0642\u0648\u06cc \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0633\u0627\u062e\u062a\u0647 \u0627\u06cc\u0645. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong>Tailwind CSS<\/strong> \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0645 \u067e\u0627\u0633\u062e\u06af\u0648 \u0628\u0627\u0634\u062f \u0648 \u0647\u0645 \u0627\u0632 \u0646\u0638\u0631 \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u060c \u0645\u0627 \u0627\u063a\u0644\u0628 \u0628\u0627 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc \u0631\u0648\u0628\u0631\u0648 \u0645\u06cc \u0634\u0648\u06cc\u0645 \u060c \u0627\u0645\u0627 \u0628\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0636\u062d \u0648 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u060c \u062d\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0646\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u0633\u0627\u062e\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u06cc\u06a9 \u0645\u0628\u062a\u062f\u06cc \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u060c \u062f\u0631\u06a9 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0648 \u0627\u062c\u0631\u0627\u06cc \u0686\u0646\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06cc\u06a9 \u0645\u0647\u0627\u0631\u062a \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u062f\u0641\u0639\u0647 \u0628\u0639\u062f \u06a9\u0647 \u0628\u0627 \u06cc\u06a9 \u06a9\u0627\u0631 \u0686\u0627\u0644\u0634 \u0628\u0631\u0627\u0646\u06af\u06cc\u0632 \u0631\u0648\u0628\u0631\u0648 \u0634\u062f\u06cc\u062f \u060c \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0634\u06a9\u0646\u06cc\u062f \u060c \u06cc\u06a9 \u0628\u0627\u0631 \u0628\u0627 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u0645\u0642\u0627\u0628\u0644\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631\u06cc\u063a \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u06cc\u06a9\u06cc \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9! \ud83d\ude80<\/p>\n<hr\/>\n<p><strong>PS<\/strong> \u0627\u06af\u0631 \u0627\u06cc\u0646 \u062a\u0641\u06a9\u06cc\u06a9 \u0631\u0627 \u0645\u0641\u06cc\u062f \u062f\u0627\u0646\u0633\u062a\u06cc\u062f \u060c \u0627\u062d\u0633\u0627\u0633 \u0631\u0627\u062d\u062a\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u06cc\u0627 \u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \u0648 \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u067e\u0633\u062a \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0648 \u0628\u06cc\u0646\u0634 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f! <\/p>\n<hr\/><\/div>\n<p>        <\/code><\/strong><\/p>\n<\/li>\n<\/div>\n<section class=\"crayons-card crayons-card--secondary text-padding mb-4 print-hidden\" id=\"bottom-content-read-next\">\n<h2 class=\"crayons-subtitle-1\"><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B9%D8%AF%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF\"><\/span>\u0628\u0639\u062f\u06cc \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%AA%D9%84%D9%81%D9%86_%D9%87%D9%85%D8%B1%D8%A7%D9%87\"><\/span>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              Buse Aky\u00fcz - <time datetime=\"2025-02-15T17:37:14Z\">15 \u0641\u0648\u0631\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u062a\u0635\u0648\u06cc\u0631 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u06af\u0644\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F665141%2F68cd9cca-6f93-4286-8275-f27f034cfdc5.png\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_PHP_%DA%86%D8%B1%D8%A7_%D9%85%D8%AF%D9%84_%D9%87%D8%A7%DB%8C_%D8%AE%D9%88%D8%A7%D9%86%D8%AF%D9%86_%D9%88_%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%87%D9%85_%D8%AC%D8%AF%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc PHP: \u0686\u0631\u0627 \u0645\u062f\u0644 \u0647\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0646\u0648\u0634\u062a\u0646 \u0631\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              \u06af\u0644 \u0632\u0627\u06cc\u0628 - <time datetime=\"2025-02-15T18:42:26Z\">15 \u0641\u0648\u0631\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u062a\u0635\u0648\u06cc\u0631 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 Dhanush9952\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F808388%2Febedb87d-4932-483e-94a3-b64c83ea0e7f.jpeg\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87_%D8%B1%D9%88%D8%B2%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%A7%D9%88%D8%A7_%D9%86%D8%B3%D8%AE%D9%87_24_%D8%B3%D8%B1%DB%8C%D8%B9%D8%AA%D8%B1_%D9%88_%D8%A8%D8%A7%D9%87%D9%88%D8%B4_%D8%AA%D8%B1\"><\/span>\u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0627\u0648\u0627 \u0646\u0633\u062e\u0647 24: \u0633\u0631\u06cc\u0639\u062a\u0631 \u0648 \u0628\u0627\u0647\u0648\u0634 \u062a\u0631!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              Dhanush - <time datetime=\"2025-02-15T13:24:06Z\">15 \u0641\u0648\u0631\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u062a\u0635\u0648\u06cc\u0631 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 himanshu_bhatt\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2757310%2F5068b1d0-4dfb-42af-af4a-f7c39031109d.png\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3_101_%D9%82%D8%B3%D9%85%D8%AA_5_-_Mastering_VI_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4%DA%AF%D8%B1_%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%85%D8%A8%D8%AA%D8%AF%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4_%D9%85%D8%AA%D9%86_%D8%8C_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%88_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D8%AA_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\"><\/span>\u0644\u06cc\u0646\u0648\u06a9\u0633 101: \u0642\u0633\u0645\u062a 5 - Mastering VI \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc \u0628\u0631\u0627\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0645\u062a\u0646 \u060c \u0646\u0627\u0648\u0628\u0631\u06cc \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              Himanshu Bhatt - <time datetime=\"2025-02-15T14:15:45Z\">15 \u0641\u0648\u0631\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <\/code><\/strong><\/li>\n<\/ul>\n<\/div>\n<p><\/code><\/h2>\n<\/div>\n<p>  <\/code><\/h2>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631\u0633\u062a \u0628\u0647 \u06a9\u062f \u0634\u06cc\u0631\u062c\u0647 \u0628\u0632\u0646\u06cc\u0645: &#8220;use client&#8221;; import { useState, useEffect, useRef } from &#8220;react&#8221;; import LoginClient from &#8220;..\/LearnerRegFlow\/LoginClient&#8221;; import SignupClient from &#8220;..\/LearnerRegFlow\/SignupClient&#8221;; import ResetPassword from &#8220;..\/LearnerRegFlow\/ResetPassword&#8221;; import Link from &#8220;next\/link&#8221;; import Image from &#8220;next\/image&#8221;; import { LogIn, ChevronDown } from &#8220;lucide-react&#8221;; const Navbar = () =&gt; { const [showLogin, setShowLogin] = useState(false); const &hellip;<\/p>\n","protected":false},"author":2,"featured_media":97659,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-97658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=97658"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/97659"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=97658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=97658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=97658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}