fix: appbar absolute positioning

Author: SaadBazaz

apps/demo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # index
 
+## 0.1.19
+
+### Patch Changes
+
+- Updated dependencies
+  - material-web-components-react@0.3.14
+
 ## 0.1.18
 
 ### Patch Changes

apps/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "index",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": true,
   "packageManager": "pnpm@9.1.0",
   "scripts": {

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # material-web-react
 
+## 0.3.14
+
+### Patch Changes
+
+- fix: appbar
+
 ## 0.3.13
 
 ### Patch Changes

packages/ui/README.md

@@ -34,7 +34,7 @@ function Example() {
 }
 ```
 
-For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](./apps/demo/src/app/page.tsx). It's simple!
+For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](https://github.com/grayhatdevelopers/material-web-components-react/blob/main/apps/demo/src/app/page.tsx). It's simple!
 
 Under the hood, this library simply uses the official [@material/web](https://github.com/material-components/material-web/) components. Visit [the official Material Web Components docs](https://github.com/material-components/material-web/blob/main/docs/intro.md) to learn how to use those components. The props remain the same!
 
@@ -81,6 +81,6 @@ Thanks for improving the demo:
 
 - [TalhaHere12](https://github.com/TalhaHere12)
 
-Thanks for building BottomSheet:
+Thanks for building BottomSheet and Snackbar:
 
 - [Aroonaongithhub](https://github.com/Aroonaongithhub/)

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-web-components-react",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "author": "Grayhat Team",
   "type": "module",
   "keywords": [

packages/ui/src/app-bar/index.tsx

@@ -117,7 +117,7 @@ const AppBar = ({
         <div
           id="headline"
           className={twMerge(
-            "absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-lg transition-all", // Changed this line
+            "flex items-center gap-2 text-lg transition-all", // Changed this line
             _variant === "center-aligned" && "text-center",
             (_variant === "small" ||
               _variant === "medium" ||