تصحیح آیتم های Navigation | آموزش جامع ری اکت

تصحیح آیتم های Navigation و تکمیل منوی کشویی

در قسمت قبل منوی کشویی را ایجاد کردیم و لوگو را در آن قرار دادیم اما هنوز آیتم های navigation را تصحیح نکرده ایم.

لوگو با سایز مناسب قابل مشاهده است

همانطور که می بینید این آیتم ها در صفحه پراکنده شده اند و ما باید آن ها را ویرایش کنیم. آیا می دانید دلیل پراکندگی آن ها چیست؟ در واقع آن ها پراکنده نشده اند بلکه در یک سطح قرار گرفته اند؛ ما در قسمت قبل display را روی Flex تنظیم کردیم و حالت پیش فرض flex نیز row است نه column، یعنی آیتم ها در یک سطح قرار می گیرند و روی یکدیگر نمی ایستند. شما می توانید این حالت را با استفاده از خاصیت flex-row در زبان CSS تغییر دهید اما از آنجایی که ما هیچ مقداری برای آن تعیین نکرده ایم، حالت پیش فرض (یعنی row) برای ما انتخاب شده است.

برای حل مشکل ابتدا به فایل NavigationItem.module.css می رویم تا استایل هایمان را به mobile-first تغییر دهیم، در جلسات قبل استایل ها را desktop-first نوشتیم و توضیح دادیم که به دلیل نبود منوی کشویی فعلا آن ها را desktop-first می نویسیم. ابتدا باید یک media query برای صفحات بزرگتر از 500 پیکسل را به این فایل اضافه کنیم و تمام استایل های آن را درون این media query قرار دهیم:

@media (min-width: 500px) {
    .NavigationItem {
        margin: 0;
        box-sizing: border-box;
        display: flex;
        height: 100%;
        width: auto; 
        align-items: center;
    }
    .NavigationItem a {
        color: white;
        text-decoration: none;
        height: 100%;
        padding: 16px 10px;
        border-bottom: 4px solid transparent;
        box-sizing: border-box;
        display: block;
    }
    .NavigationItem a:hover, .NavigationItem a:active, .NavigationItem a.active {
        background-color: #8F5C23;
        border-bottom: 4px solid #4084C8;
        color: white;
    }
}

این کدها مخصوص دستگاه های بزرگتر از 500 پیکسل است و نیازی به ویرایش ندارد اما برای نوشتن استایل های موبایل همین کدها را خارج از media query کپی کرده و به شکل زیر ویرایش می کنیم؛ کلاس NavigationItem. را به صورت زیر تغییر دهید:

    .NavigationItem {
        margin: 10px 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
    }

در این کلاس margin را اضافه کرده ایم و همچنین نمیخواهیم مقدار height برابر 100 درصد باشد. نیازی به flex بودن display نیز نداریم. بنابراین آن را حذف کرده ایم و align-items نیز دیگر کارایی نخواهد داشت (فقط در حالت flex کار می کند) بنابراین آن را نیز از کدها پاک می کنیم.

سپس کلاس .NavigationItem a را نیز به صورت زیر تغییر می دهیم:

    .NavigationItem a {
        color: #8F5C2C;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

از آنجایی که فعلا پس زمینه ی ما سفید است، انتخاب رنگ سفید (white) برای متن ها کار اشتباهی است. ما طبق سلیقه ی خودمان از رنگ 8F5C2C# استفاده کرده ایم. باز هم نیازی به height نداریم و width را روی 100 درصد گذاشته ایم.

در آخر کلاس مربوط به hover را نیز بدین شکل تغییر می دهیم:

.NavigationItem a:hover, .NavigationItem a:active, .NavigationItem a.active {
    color: #4084C8;
}

حالا استایل های تکراری بین استایل های موبایل و دسکتاپ را حذف می کنیم و نتیجه ی نهایی (کل محتوای فایل NavigationItem.module.css) به شکل زیر خواهد بود:

.NavigationItem {
    margin: 10px 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.NavigationItem a {
    color: #8F5C23;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.NavigationItem a:hover, .NavigationItem a:active, .NavigationItem a.active {
    color: #4084C8;
}

@media (min-width: 500px) {
    .NavigationItem {
        margin: 0;
        display: flex;
        height: 100%;
        width: auto;
        align-items: center;
    }
    .NavigationItem a {
        color: white;
        height: 100%;
        padding: 16px 10px;
        border-bottom: 4px solid transparent;
    }
    .NavigationItem a:hover, .NavigationItem a:active, .NavigationItem a.active {
        background-color: #8F5C23;
        border-bottom: 4px solid #4084C8;
        color: white;
    }
}

همانطور که می دانید استایل های عادی و استایل های درون Media Query ها با هم ادغام می شوند به صورتی که media query ها اولویت بالاتر دارند. بنابراین داشتن استایل های تکراری یعنی ادغام کردن دو چیز در حالی که هر دو یک خصوصیت واحد هستند و کدهای ما را شلوغ تر می کنند. مثلا زمانی که برای کلاس SideDrawer مقدار box-sizing را border-box تعیین کرده ایم نیازی نیست که در کلاس های دسکتاپ نیز دوباره آن را تعریف کنیم و کدهایمان را شلوغ کنیم؛ یادتان باشد که اگر درون media query ها مقداری برای override کردن خصوصیات قبلی (خارج از media query) وجود نداشته باشد، آن خصوصیات خارجی حذف نمی شوند بلکه به قوت خود باقی هستند.

اگر به مرورگر بروید آیتم های ما را کنار هم می بینید که روش صحیحی نیست. بنابراین به فایل NavigationItems.module.css می رویم و محتویات آن را به صورت زیر تغییر می دهیم:

.NavigationItems {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-flow: column;
    align-items: center;
    height: 100%;
}

@media (min-width: 500px) {
    .NavigationItems {
        flex-flow: row;
    }
}

حالا اگر به مرورگر بروید آیتم های ما زیر هم قرار گرفته اند:

قرار گرفتن آیتم های navigation به صورت ستونی (زیر هم)

اما مشکل دیگری داریم. همانطور که در تصویر بالا مشاهده می کنید، منوی Toolbar هنوز هم نمایش داده می شود و ما باید آن را حذف کنیم. همچنین بهتر است بین لوگو و آیتم های منوی کشویی فاصله ی بیشتری داشته باشیم. برای اضافه کردن فاصله، به فایل SideDrawer.module.css بروید و کلاس Logo را بدین شکل تغییر دهید:

.Logo {
    height: 11%;
    margin-bottom: 32px;
}

سپس برای حذف آیتم های toolbar در عرض های بزرگتر، به فایل Toolbar.module.css رفته و یک media query به شکل زیر اضافه کنید:

@media (max-width: 499px) {
    .DesktopOnly {
        display: none;
    }
}

یعنی تا زمانی که روی دستگاه های موبایل هستیم (حداکثر عرض 499 پیکسل) کلاس جدیدی به نام DesktopOnly را روی عنصر اعمال کن که آن را مخفی می کند. حالا وارد فایل Toolbar.js شده و آن را به nav اضافه می کنیم:

const toolbar = (props) => (
    <header className={classes.Toolbar}>
        <div>MENU</div>
        <div className={classes.Logo}>
            <Logo />
        </div>
        <nav className={classes.DesktopOnly}>
            <NavigationItems />
        </nav>
    </header>
);

اکنون فایل ها را ذخیره کرده و به مرورگر بروید. می بینید که آیتم های toolbar حذف شده است و لوگو به جای آن ها نمایش داده می شود:

حذف آیتم های toolbar برای صفحات کوچک (موبایل ها)

از آنجایی که لوگو شکل برنامه را زیبا می کند ما به آن دست نمی زنیم اما شما می توانید با همین تکنیکی که به شما توضیح دادم، لوگو را نیز حذف کنید. در قسمت بعد backdrop را به برنامه اضافه می کنیم تا با کلیک روی آن منوی کشویی بسته شود.