Fixed Appbar Responsiveness.

code100x · Aug 23, 2024 · 0fd3a68 · 0fd3a68
1 parent 1056cda
commit 0fd3a68
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
@@ -33,21 +33,25 @@ export const Appbar = ({
   return (
     <>
       <nav className={clsx(className)}>
-        <div className="flex w-full items-center justify-between md:max-w-screen-2xl">
+        <div className="flex w-full items-center justify-between">
           {showLogoforLanding && <Logo onFooter={false} />}
           {session?.user ? (
             !isLoading && (
-              <>
+              <div className="flex w-full flex-row justify-between">
                 <div className="hidden md:block">
                   <SearchBar />
                 </div>
-                <div className="flex items-center space-x-2">
+                <div className="flex w-full items-center justify-between space-x-2 md:w-auto">
                   {/* Search Bar for smaller devices */}
-                  <MobileScreenSearch />
-                  <SelectTheme />
-                  <ProfileDropdown />
+                  <div>
+                    <MobileScreenSearch />
+                  </div>
+                  <div className="flex flex-row items-center space-x-2">
+                    <SelectTheme />
+                    <ProfileDropdown />
+                  </div>
                 </div>
-              </>
+              </div>
             )
           ) : (
             <div className="flex items-center space-x-2">

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -198,15 +198,15 @@ export function ToggleButton({
       className="flex flex-col items-center justify-center"
     >
       <span
-        className={`h - 0.5 w - 6 - sm bg - black - all duration - 300 ease - out dark: bg - white block rounded transition ${!sidebarOpen ? 'translate-y-1 rotate-45' : '-translate-y-0.5'} `}
+        className={`h - 0.5 w 6 sm bg black all duration 300 ease out dark: white block rounded transition ${!sidebarOpen ? 'translate-y-1 rotate-45' : '-translate-y-0.5'} `}
       ></span>
       <span
-        className={`my - 0.5 h - 0.5 w - 6 - sm bg - black - all duration - 300 ease - out dark: bg - white block rounded transition ${
+        className={`my - 0.5 h w 6 sm bg black all duration 300 ease out dark: white block rounded transition ${
           !sidebarOpen ? 'opacity-0' : 'opacity-100'
         } `}
       ></span>
       <span
-        className={`h - 0.5 w - 6 - sm bg - black - all duration - 300 ease - out dark: bg - white block rounded transition ${
+        className={`h - 0.5 w 6 sm bg black all duration 300 ease out dark: white block rounded transition ${
           !sidebarOpen ? '-translate-y-1 -rotate-45' : 'translate-y-0.5'
         } `}
       ></span>

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,14 +16,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next"
-      }
+        "name": "next",
+      },
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"]
-    }
+      "@public/*": ["./public/*"],
+    },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }