Drawer — এটি কী, DrawerLayout এবং অ্যাপ্লিকেশনে সাইড মেনু

Drawer কী?

Drawer (Navigation Drawer) একটি নেভিগেশন উপাদান যা প্যানেল আকারে থাকে এবং সোয়াইপ জেসচার বা হ্যামবার্গার আইকনে (তিনটি অনুভূমিক রেখা) ট্যাপ করে স্ক্রিনের বাম প্রান্ত থেকে স্লাইড হয়ে আসে। Drawer-এ নেভিগেশন লিংক, হেডার এবং ঐচ্ছিক উপাদান থাকে: ব্যবহারকারীর অবতার, নোটিফিকেশন ব্যাজ, বিভাজক। প্যানেল কন্টেন্ট ঢেকে দিতে পারে (Modal) বা সরিয়ে দিতে পারে (Standard)।

Material Design 3 (2026) Navigation Drawer-কে 6+ নেভিগেশন আইটেমযুক্ত অ্যাপের জন্য একটি উপাদান হিসেবে সংজ্ঞায়িত করে। Bottom Navigation-এর বিপরীতে, Drawer স্ক্রিনে স্থায়ী জায়গা নেয় না এবং শুধুমাত্র ব্যবহারকারীর অনুরোধে দেখানো হয়। এটি কন্টেন্টের জন্য জায়গা খালি করে কিন্তু খুলতে অতিরিক্ত পদক্ষেপের প্রয়োজন হয়। Google গভীর সেকশন শ্রেণিবিন্যাসযুক্ত অ্যাপের জন্য Drawer সুপারিশ করে।

UX Planet গবেষণা (2025) দেখিয়েছে: Drawer 5–15 সেকশনের অ্যাপের জন্য উপযুক্ত, কিন্তু নেভিগেশন সময় Bottom Navigation-এর তুলনায় 40% বেশি। ব্যবহারকারীরা স্ক্রিন ফোল্ডের (স্ক্রোল) নিচে থাকা মেনু আইটেম মিস করেন। তাই গুরুত্বপূর্ণ সেকশন Drawer-এর উপরে থাকা উচিত, এবং কম গুরুত্বপূর্ণ (অ্যাপ সম্পর্কে, সেটিংস) — নিচে, একটি বিভাজক দ্বারা পৃথক করা।

Drawer-এর প্রকার: Modal এবং Standard

Modal Drawer কন্টেন্টের উপরে স্লাইড হয়, ব্যাকগ্রাউন্ড ম্লান করে। মোবাইল ডিভাইসের জন্য ব্যবহৃত হয় যেখানে স্ক্রিনের প্রস্থ সীমিত। আইটেম নির্বাচনের পর, Drawer স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। Standard Drawer (Permanent) একটি স্থির প্যানেল যা সর্বদা দৃশ্যমান থাকে, কন্টেন্ট সরিয়ে দেয়। 900 dp থেকে স্ক্রিন প্রস্থের ট্যাবলেট এবং ডেস্কটপে ব্যবহৃত হয়। Material 3 Rail Drawer-ও সংজ্ঞায়িত করে — ট্যাবলেটের জন্য একটি কমপ্যাক্ট সংস্করণ যা শুধু আইকন দেখায়।

Android-এ DrawerLayout

DrawerLayout Android-এ স্ট্যান্ডার্ড ViewGroup যা স্লাইডিং সাইড মেনু বাস্তবায়ন করে। DrawerLayout-এ দুটি চাইল্ড এলিমেন্ট থাকে: প্রথমটি — মূল কন্টেন্ট (NavHostFragment সহ FrameLayout), দ্বিতীয়টি — মেনু সহ NavigationView। DrawerLayout ActionBarDrawerToggle-এর মাধ্যমে সোয়াইপ জেসচার এবং প্রোগ্রামেটিক ওপেন/ক্লোজ হ্যান্ডল করে।

// DrawerLayout এবং NavigationView সহ অ্যাক্টিভিটি
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        drawerLayout = binding.drawerLayout
        val navView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Navigation Component-এর সাথে Drawer সংযুক্ত করা
        NavigationUI.setupActionBarWithNavController(
            this, navController, drawerLayout
        )
        NavigationUI.setupWithNavController(navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            findNavController(R.id.nav_host_fragment),
            drawerLayout
        )
    }
}

// XML: activity_main.xml
// <androidx.drawerlayout.widget.DrawerLayout
//   android:id="@+id/drawerLayout"
//   ...>
//   <!-- মূল বিষয়বস্তু -->
//   <FrameLayout android:id="@+id/nav_host_fragment"
//     android:layout_width="match_parent"
//     android:layout_height="match_parent" />
//   <!-- Navigation Drawer -->
//   <com.google.android.material.navigation.NavigationView
//     android:id="@+id/navView"
//     android:layout_width="wrap_content"
//     android:layout_height="match_parent"
//     android:layout_gravity="start"
//     app:menu="@menu/nav_menu" />
// </androidx.drawerlayout.widget.DrawerLayout>

NavigationView Drawer কন্টেন্টের জন্য Material Design উপাদান। এটি হেডার (headerLayout), মেনু আইটেম (menu), উপশিরোনাম, চেকবক্স এবং সুইচ সমর্থন করে। app:menu অ্যাট্রিবিউট নেভিগেশন আইটেম সহ XML মেনু নির্দেশ করে। NavigationUI স্বয়ংক্রিয়ভাবে সক্রিয় আইটেম হাইলাইট করে এবং NavController-এর সাথে অবস্থা সিঙ্ক্রোনাইজ করে।

iOS-এ সাইড মেনু

iOS-এ কোনো অন্তর্নির্মিত "Drawer" উপাদান নেই — Apple iPhone-এর জন্য সাইড মেনু সুপারিশ করে না (HIG, 2026)। তবে iPad-এর জন্য, প্রাথমিক এবং মাধ্যমিক প্যানেল সহ UISplitViewController ব্যবহার করা হয়। iPhone-এর জন্য, সাইড মেনু থার্ড-পার্টি লাইব্রেরি (SideMenu, SwiftUI-side-menu) বা কন্টেন্ট অফসেট সহ কাস্টম সমাধানের মাধ্যমে বাস্তবায়িত হয়। SwiftUI-তে, অফসেট অ্যানিমেশন সহ ZStack-এর মাধ্যমে সাইড মেনু তৈরি করা হয়।

import SwiftUI

struct DrawerView<Content: View, Menu: View>: View {
    let menuWidth: CGFloat = 280

    @Binding var isOpen: Bool
    @ViewBuilder let content: Content
    @ViewBuilder let menu: Menu

    var body: some View {
        ZStack(alignment: .leading) {
            content
                .offset(x: isOpen ? menuWidth : 0)
                .animation(.easeInOut, value: isOpen)

            if isOpen {
                menu
                    .frame(width: menuWidth)
                    .transition(.move(edge: .leading))

                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isOpen = false }
            }
        }
    }
}

// ব্যবহার
struct ContentView: View {
    @State private var showDrawer = false

    var body: some View {
        DrawerView(isOpen: $showDrawer) {
            NavigationStack {
                HomeView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: { showDrawer.toggle() }) {
                                Image(systemName: "line.horizontal.3")
                            }
                        }
                    }
            }
        } menu: {
            DrawerMenuView()
        }
    }
}

প্রোডাকশন iOS প্রকল্পের জন্য, SideMenu লাইব্রেরি প্রায়শই ব্যবহৃত হয় (GitHub, 8k+ স্টার)। এটি জেসচার সাপোর্ট, ব্যাকগ্রাউন্ড ব্লার, কাস্টম প্রস্থ এবং অ্যানিমেশন সহ রেডিমেড UIViewController প্রদান করে। SideMenu বাম এবং ডান মেনু, একাধিক স্তর এবং UINavigationController-এর মাধ্যমে UIKit ইন্টিগ্রেশন সমর্থন করে। বিকল্প হলো iPad-এ UISplitViewController (সিস্টেম, কাস্টম অ্যানিমেশন ছাড়া)।

Drawer কাস্টমাইজেশন: হেডার, আইকন, সেকশন

Drawer বিস্তৃত কাস্টমাইজেশন অনুমতি দেয়। Android-এ, NavigationView headerLayout সমর্থন করে — মেনু আইটেমের উপরে রাখা কাস্টম লেআউট। এতে অবতার, ব্যবহারকারীর নাম, ইমেল এবং কভার ছবি থাকতে পারে। মেনু আইটেমগুলি উপশিরোনাম, বিভাজক এবং সুইচ সহ <menu>-এর মাধ্যমে গ্রুপ করা হয়। iOS-এ, SideMenu কাস্টমাইজেশনের মধ্যে ব্যাকগ্রাউন্ড রং, ব্লার, প্রস্থ এবং কোণের ব্যাসার্ধ সেট করা অন্তর্ভুক্ত।

// NavigationView-এর জন্য কাস্টম হেডার
val headerView = binding.navView.inflateHeaderView(R.layout.nav_header)
headerView.findViewById<ImageView>(R.id.iv_avatar)
    .setImageResource(R.drawable.avatar)
headerView.findViewById<TextView>(R.id.tv_name)
    .text = "John Doe"

// মেনু আইটেম কনফিগার করা
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// ব্যাজ যোগ করা
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design নিম্নলিখিত Drawer কাঠামো সুপারিশ করে: হেডার (নাম, অবতার), প্রধান নেভিগেশন আইটেম (5–8), বিভাজক, মাধ্যমিক আইটেম (সেটিংস, সাহায্য), ফুটার (অ্যাপ সম্পর্কে, সংস্করণ)। Material 3-এ, NavigationView itemShape এবং itemBackground-এর মাধ্যমে কাস্টম সক্রিয় আইটেম হাইলাইটিং সমর্থন করে।

কখন Drawer ব্যবহার করবেন: UX সুপারিশ

Drawer 6+ সেকশন, সেটিংস এবং সাহায্য পৃষ্ঠার অ্যাপের জন্য কার্যকর। সেই অ্যাপের জন্য উপযুক্ত নয় যেখানে সেকশনে দ্রুত অ্যাক্সেস গুরুত্বপূর্ণ — এমন ক্ষেত্রে Bottom Navigation ভালো। Material Design Drawer-কে Bottom Navigation-এর সাথে একত্রিত করার সুপারিশ করে: প্রধান নেভিগেশন — Bottom (3–5 ট্যাব), অতিরিক্ত — Drawer (সেটিংস, সাহায্য, অ্যাপ সম্পর্কে)।

Drawer বাস্তবায়নে সাধারণ ভুল: ওভারলোডেড মেনু (গ্রুপিং ছাড়া 15+ আইটেম), ফোল্ডের নিচে গুরুত্বপূর্ণ সেকশন লুকানো, আইকনের অভাব (আইকন ছাড়া টেক্সট 30% ধীরে স্ক্যান হয়), বিলম্ব সহ অ্যানিমেশন (≤ 200 ms হওয়া উচিত)। সেরা অনুশীলন: ব্যবহারকারীর নাম সহ হেডার, প্রতিটি আইটেমের জন্য আইকন, গ্রুপের মধ্যে বিভাজক, সক্রিয় সেকশন হাইলাইটিং, খোলার জন্য সোয়াইপ জেসচার সমর্থন।

• 6+ সেকশন — Drawer যুক্তিযুক্ত, কম — Bottom Navigation ব্যবহার করুন
• আইকন — প্রতিটি আইটেমের জন্য বাধ্যতামূলক, ভিজ্যুয়াল সার্চ দ্রুত করে
• গ্রুপিং — প্রধান এবং মাধ্যমিক আইটেমের মধ্যে বিভাজক
• হেডার — ব্যক্তিগতকরণের জন্য অবতার, নাম এবং ইমেল (সোশ্যাল অ্যাপ)
• সোয়াইপ জেসচার — খোলার জন্য বাধ্যতামূলক, হ্যামবার্গার বোতাম দ্বারা নকল