Control a drawer (a sliding menu or sidebar) using Tailwind CSS

To control a drawer (a sliding menu or sidebar) using Tailwind CSS, you typically need to combine Tailwind’s utility classes with a bit of custom JavaScript or a front-end framework (like Alpine.js or React) to handle the opening and closing of the drawer.

Here's how you can create and control a drawer using Tailwind CSS:

1. Basic Structure of a Drawer

A drawer can be implemented as a hidden side menu that slides in and out based on user interaction. We'll use Tailwind classes like fixed, inset-0, translate-x-full, and transition-transform to create the sliding effect.

2. HTML and Tailwind Setup

Here’s a simple example where a button toggles the visibility of the drawer:

HTML & Tailwind CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Drawer</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.0.6/dist/cdn.min.js" defer></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <!-- Toggle Button -->
  <div class="p-4">
    <button @click="open = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Drawer</button>
  </div>

  <!-- Drawer -->
  <div x-data="{ open: false }">
    <!-- Backdrop -->
    <div 
      x-show="open" 
      class="fixed inset-0 bg-black bg-opacity-50 z-40"
      @click="open = false"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    ></div>

    <!-- Drawer Content -->
    <div
      class="fixed top-0 right-0 w-64 bg-white h-full z-50 transform translate-x-full transition-transform"
      :class="{ 'translate-x-0': open, 'translate-x-full': !open }"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="translate-x-full"
      x-transition:enter-end="translate-x-0"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="translate-x-0"
      x-transition:leave-end="translate-x-full"
    >
      <!-- Drawer Header -->
      <div class="p-4 bg-gray-800 text-white flex justify-between">
        <h2 class="text-lg">Drawer Menu</h2>
        <button @click="open = false" class="text-white">Close</button>
      </div>

      <!-- Drawer Body -->
      <div class="p-4">
        <ul>
          <li class="py-2"><a href="#" class="text-blue-500">Item 1</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Item 2</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Item 3</a></li>
        </ul>
      </div>
    </div>
  </div>

</body>
</html>

Explanation:

  1. Backdrop: The darkened background (with class bg-opacity-50) will appear when the drawer is open. This is controlled using Alpine.js (x-show="open"). Clicking on the backdrop will close the drawer using the @click="open = false" directive.

  2. Drawer Panel:

    • The drawer itself is placed on the right side (right-0) and is initially hidden by using the class translate-x-full (meaning it is off-screen).
    • When the drawer is open, the translate-x-0 class is applied to make it slide into view.
    • Transitions are added with Tailwind’s transition-transform to make the sliding effect smooth.
    • The drawer opens when the button is clicked, controlled by Alpine.js using the x-data and x-show directives.

  3. Alpine.js Integration:

    • Alpine.js is a lightweight JavaScript framework that makes it easy to handle UI states. In this case, it’s used to toggle the visibility of the drawer when the "Open Drawer" button is clicked.
    • x-data="{ open: false }" initializes the state (open), and @click="open = true" and @click="open = false" are used to control when the drawer opens and closes.

Tailwind Classes Breakdown:

  • fixed inset-0: Positions the drawer and backdrop fixed to the viewport.
  • translate-x-full: Hides the drawer off-screen to the right.
  • translate-x-0: Brings the drawer on-screen.
  • transition-transform: Smooth sliding transitions.
  • x-show, x-transition: Alpine.js directives for controlling visibility and animations.

Customization Options:

  • You can easily change the drawer position to the left or bottom by adjusting the positioning classes:
    • Left drawer: Use left-0 and -translate-x-full instead of right-0 and translate-x-full.
    • Bottom drawer: Use bottom-0 and translate-y-full instead of top-0 and translate-x-full.

This setup provides a clean, responsive drawer using Tailwind CSS and Alpine.js. You can also use other libraries like React, Vue, or vanilla JavaScript to manage the state if you prefer.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Fundamentals of English Grammar #1

That's a great textbook table of contents! It covers the fundamental tenses in English. Here is a summary of the highlighted sections, with example sentences and key learning tips. PRESENT TIME Item Topic Example Sentence(s) Learning Summary 1-1 The simple present and the present progressive Simple Present: The sun rises in the east. (Fact/Habit) / Present Progressive: She is studying for her exam right now. (Action in progress) Simple Present is for facts, habits, and routines . Present Progressive is for actions happening at the moment of speaking or temporary situations . 1-3 Frequency adverbs I always drink coffee in the morning. / He is never late for class. These adverbs ( always, usually, often, sometimes, rarely, never ) describe how often an action occurs. Their position is key: before the main verb, but after the verb to be or auxiliary verbs. 1-4, 1-5 Final -s / Spelling of final -s/-es He read s a book. / She watch es TV. The final -s (or -es ) is adde...
자세한 내용 보기

Using the MinIO API via curl

Using the MinIO API via curl is straightforward, as MinIO is compatible with Amazon S3 API, so most commands follow a similar syntax. Here’s a guide on how to use curl with the MinIO API for some common operations like uploading, downloading, and managing objects. Prerequisites Access Key and Secret Key : Obtain your MinIO Access Key and Secret Key. MinIO Endpoint : Know your MinIO server endpoint, e.g., http://localhost:9000 . Bucket : You may need an existing bucket name, or create a new one using the commands below. Authentication Header For requests to work with MinIO, you need to include authentication in the headers. MinIO uses AWS Signature Version 4 for signing requests. Common Examples 1. List Buckets To list all buckets in your MinIO account, use: curl -X GET \ - -url "http://localhost:9000/" \ - H "Authorization: AWS <AccessKey>:<Signature>" 2. Create a Bucket To create a new bucket, use: curl -X PUT \ - -url "htt...
자세한 내용 보기

Create topic on Kafka with partition count, 카프카 토픽 생성하기

To create a Kafka topic with 100 partitions, you can use the Kafka command-line tool ( kafka-topics.sh or kafka-topics.bat for Windows). When creating a topic, you can specify the number of partitions and the replication factor. Here’s how to create a topic with 100 partitions: Step-by-step instructions: Open a terminal on your machine where Kafka is installed. Run the kafka-topics.sh command with the necessary options to create the topic: kafka - topics . sh - - create - - bootstrap - server localhost:9092 - - replication - factor 1 - - partitions 100 - - topic < topic_name > --bootstrap-server localhost:9092 : Specifies the Kafka broker (or cluster) address. Replace localhost:9092 with your actual Kafka broker address if it’s different. --replication-factor 1 : Specifies the number of replicas for each partition. In this example, it's set to 1 , but in a production environment, you’ll want a higher replication factor for redundancy. --partitions 10...
자세한 내용 보기

In HBase, the "memory to disk" flush operation

In HBase, the "memory to disk" flush operation (or "memstore flush") happens when data in the memstore (in-memory storage) is flushed to disk as HFiles in HDFS. This flush can occur based on multiple triggers rather than a strict time interval, including: Memstore Size Limit : The primary trigger is when the size of the memstore reaches a defined threshold. The default maximum memstore size per RegionServer is set by the configuration parameter hbase.regionserver.global.memstore.size , typically as a fraction of the total heap size. When the memstore fills up, it triggers an automatic flush to disk. Time-Based Flush (Optional) : Although time-based flushes are not the main flush trigger, HBase provides an optional parameter for a maximum delay, which can ensure that data gets written to disk within a certain time, even if the memstore size limit hasn't been reached. This parameter is: hbase.hregion.memstore.flush.period : This sets the maximum time (in mil...
자세한 내용 보기

Install and run an FTP server using Docker

To install and run an FTP server using Docker, follow these steps. We’ll use the popular stilliard/pure-ftpd image, which is a lightweight and widely used FTP server. Step 1: Install Docker Make sure Docker is installed on your machine. If it isn’t, install it using the instructions below: Ubuntu/Debian: sudo apt update sudo apt install docker.io -y Mac: Install Docker Desktop from Docker's website . Windows: Install Docker Desktop from Docker's website . Verify Docker is installed: docker --version Step 2: Pull the FTP Server Docker Image Use the stilliard/pure-ftpd image, which is a simple and effective FTP server. docker pull stilliard/ pure -ftpd Step 3: Run the FTP Server Run the FTP server container using the following command: docker run -d --name ftp-server \ - p 21 : 21 -p 30000 - 30009 : 30000 - 30009 \ - e FTP_USER_NAME=testuser \ - e FTP_USER_PASS=testpass \ - e FTP_USER_HOME= /home/testuser \ stilliard/pure-ftpd Explanation...
자세한 내용 보기

To switch to a specific tag in a Git repository

To switch to a specific tag in a Git repository, you can use the git checkout or git switch command. Here's how you can do it: 1. List Available Tags First, you may want to see a list of all available tags in the repository: git tag 2. Checkout a Specific Tag Once you know the tag you want to switch to, you can use either git checkout or git switch (if you're using a newer version of Git, which recommends git switch for checking out branches). Using git checkout : git checkout <tag- name > Using git switch (recommended for newer versions of Git): git switch -- detach <tag- name > The --detach flag is necessary because tags are not branches; they are just pointers to specific commits. Using --detach makes your HEAD point to the tag without modifying any branch. 3. Verify the Checkout After switching to the tag, verify that you're on the correct commit: git status This will show the tag you're currently on (you'll see somethi...
자세한 내용 보기

Vespa vs Milvus

Vespa and Milvus are both powerful open-source vector search engines, but they differ significantly in terms of architecture, features, and use cases. Here's a comparison of the two: 1. Overview Vespa : Type : Distributed Search Engine Primary Focus : Full-text search, recommendation systems, machine learning, and vector search. Use Cases : eCommerce, news, social media, personalized recommendations, and general search. Key Strengths : Scalable, handles both structured and unstructured data, supports complex queries (e.g., multi-field search, ranking, aggregations). Milvus : Type : Vector Database and Search Engine Primary Focus : Efficient similarity search for high-dimensional vectors (commonly used in machine learning, AI, and computer vision tasks). Use Cases : AI-driven applications, image search, video search, recommendation engines based on embeddings, NLP, and other ML-based tasks. Key Strengths : Optimized for vector search, handles billions of vectors wi...
자세한 내용 보기

Scan an HBase table with a prefix filter

To scan an HBase table with a prefix filter , you can either use the HBase shell , Java API , or Python via HappyBase . The prefix filter helps to retrieve only the rows whose row keys start with a specific prefix . Below are different ways to perform this operation. 1. Using HBase Shell In the HBase shell , you can use the scan command along with a filter expression to scan rows based on a prefix. Example: hbase (main) : 001 : 0 > scan 'table_name' , {FILTER => "PrefixFilter('prefix_value')" } Explanation: Replace 'table_name' with the name of your HBase table. Replace 'prefix_value' with the prefix you want to search for in the row keys. This filter ensures that only rows whose row keys start with the given prefix are retrieved. 2. Using Java API (HBase Client) If you're working in Java, you can use the PrefixFilter class from the HBase API to scan the table. Example: import org.apache.hadoop.hbase.client.*;...
자세한 내용 보기

To download a file from MinIO using Spring Boot, 스프링부트 Minio 사용하기

To download a file from MinIO using Spring Boot, you can utilize the MinIO Java SDK. Here's an example of how you can achieve this: Add the MinIO dependency to your pom.xml file: < dependency > < groupId > io.minio </ groupId > < artifactId > minio </ artifactId > < version > 7.1.0 </ version > </ dependency > Create a configuration file (e.g., MinioConfig.java ) to establish a connection with your MinIO server: ```java import io.minio.MinioClient; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class MinioConfig { @Value( " ${minio.endpoint} " ) private String endpoint; @Value( " ${minio.accessKey} " ) private String accessKey; @Value( " ${minio.secretKey} " ) private String secretKey; @Bean public MinioClient minioClient() { re...
자세한 내용 보기

kafka polling vs listen

In Kafka, polling and listening are two different approaches to consuming messages, and they correspond to different APIs or frameworks. 1. Kafka Polling Polling refers to the use of Kafka's native poll() method in the Kafka Consumer API . It requires the consumer application to actively request messages from Kafka. Key Characteristics: Active Consumption : The application explicitly calls poll() in a loop to fetch messages. Manual Commit : Developers can choose when to commit offsets, giving fine-grained control over processing and checkpointing. Use Case : Recommended for applications where control over message consumption, offset management, or threading is critical. Example (Java): Properties props = new Properties(); props . put (ConsumerConfig.BOOTSTRAP_SERVERS_CONFIG, "localhost:9092" ); props . put (ConsumerConfig.GROUP_ID_CONFIG, "group1" ); props . put (ConsumerConfig.AUTO_OFFSET_RESET_CONFIG, "earliest" ); props . ...
자세한 내용 보기