added bootstrap

index.html

@@ -5,40 +5,59 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" href="img/logo.ico" />
         <link rel="stylesheet" href="css/index.css" />
-        <link rel="stylesheet" href="css/icons.css" />
-        <link rel="stylesheet" href="css/header.css" />
-        <link rel="stylesheet" href="css/search.css" />
-        <link rel="stylesheet" href="css/card.css" />
+        <link rel="stylesheet" href="css/bootstrap.min.css" />
+        <script src="js/icons.js" defer></script>
+        <!-- <script src="js/mails.js" defer></script> -->
+        <script src="js/time.js" defer></script>
+        <script src="js/search.js" defer></script>
+        <script src="js/theme.js" defer></script>
+        <script src="js/bootstrap.min.js" defer></script>
         <title>Dashboard</title>
     </head>
     <body>
-        <div class="header">
-            <h1 class="header-text">Dashboard</h1>
-            <h1 class="time"></h1>
-            <div style="width: 60px; height: 60px; position: relative">
-                <div class="card" tabindex="0">
-                    <span class="cardicon">
-                        <img src="img/user.jpeg" alt="" />
-                    </span>
-                    <div class="text" id="mails">
-                        <h2 class="username">Tola</h2>
-                    </div>
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">Dashboard</a>
+                <a class="navbar-brand" style="cursor: pointer" id="time"></a>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarNav"
+                    aria-controls="navbarNav"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item d-flex align-items-center">
+                            <input
+                                type="checkbox"
+                                class="sc-gJwTLC ikxBAC"
+                                id="dark_theme"
+                            />
+                        </li>
+                        <li class="nav-item">
+                            <h1 class="navbar-item" id="time"></h1>
+                        </li>
+                    </ul>
+                    <form class="d-flex">
+                        <input
+                            class="form-control"
+                            type="text"
+                            name="search-in-google"
+                            id="search-in-google"
+                            placeholder="Search in Google"
+                        />
+                    </form>
                 </div>
             </div>
-        </div>
-        <div class="searchblock">
-            <input
-                type="text"
-                name="search-in-google"
-                id="search-in-google"
-                placeholder="Search in Google"
-            />
-            <div class="searchicon">&#128269;</div>
-        </div>
-        <div class="icons"></div>
-        <script src="js/icons.js"></script>
-        <script src="js/mails.js"></script>
-        <script src="js/time.js"></script>
-        <script src="js/search.js"></script>
+        </nav>
+        <div
+            class="d-flex gap-3 m-3 flex-wrap align-items-center justify-content-center"
+            id="icons"
+        ></div>
     </body>
 </html>