SEO Fixed and Added Semantic Html Tags (#98)

components/Mobile/Navbar.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const Navbar: FC<Props> = ({ selectedConversation, onNewConversation }) => {
   return (
-    <div className="flex justify-between bg-[#202123] py-3 px-4 w-full">
+    <nav className="flex justify-between bg-[#202123] py-3 px-4 w-full">
       <div className="mr-4"></div>
 
       <div className="max-w-[240px] whitespace-nowrap overflow-hidden text-ellipsis">{selectedConversation.name}</div>
@@ -18,6 +18,6 @@ export const Navbar: FC<Props> = ({ selectedConversation, onNewConversation }) =
         className="cursor-pointer hover:text-neutral-400"
         onClick={onNewConversation}
       />
-    </div>
+    </nav>
   );
 };

components/Sidebar/Sidebar.tsx

@@ -40,8 +40,8 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
   }, [searchTerm, conversations]);
 
   return (
-    <div className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
-      <div className="flex items-center">
+    <aside className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
+      <header className="flex items-center">
         <button
           className="flex gap-3 p-3 items-center w-full sm:w-[200px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
           onClick={() => {
@@ -61,7 +61,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
           size={32}
           onClick={onToggleSidebar}
         />
-      </div>
+      </header>
 
       {conversations.length > 1 && (
         <Search
@@ -96,6 +96,6 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
         onExportConversations={onExportConversations}
         onImportConversations={onImportConversations}
       />
-    </div>
+    </aside>
   );
 };