pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(waybar): hide groups based on screen size

Browse Source
This commit is contained in:
Pihkaal
2024-08-22 14:57:13 +02:00
parent 67a03668a4
commit 03d90db620
6 changed files with 95 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/Waybar/index.tsx
View File

@@ -16,6 +16,7 @@ import { WaybarPowerWidget } from "./Widgets/WaybarPowerWidget";
import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
import { Responsive } from "../Responsive";
export const Waybar = () => {
return (
@@ -25,28 +26,32 @@ export const Waybar = () => {
<WaybarHomeWidget />
</WaybarWidgetGroup>
<WaybarWidgetGroup>
<WaybarCPUWidget
variation={1}
frequency={3250 + randomMinMax(-100, 100)}
cores={10}
min={8}
max={16}
/>
<WaybarRAMWidget
variation={1}
frequency={5000 + randomMinMax(-100, 100)}
min={18}
max={40}
start={randomMinMax(20, 30)}
capacity={16}
/>
<WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
</WaybarWidgetGroup>
<Responsive minScreenWidth={705}>
<WaybarWidgetGroup>
<WaybarCPUWidget
variation={1}
frequency={3250 + randomMinMax(-100, 100)}
cores={12}
min={8}
max={16}
/>
<WaybarRAMWidget
variation={1}
frequency={5000 + randomMinMax(-100, 100)}
min={18}
max={40}
start={randomMinMax(20, 30)}
capacity={16}
/>
<WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup>
<WaybarTitleWidget />
</WaybarWidgetGroup>
<Responsive minScreenWidth={910}>
<WaybarWidgetGroup>
<WaybarTitleWidget />
</WaybarWidgetGroup>
</Responsive>
</div>
<div className="flex items-center">
<WaybarWidgetGroup>
@@ -56,28 +61,34 @@ export const Waybar = () => {
</WaybarWidgetGroup>
</div>
<div className="flex items-center justify-end gap-2">
<WaybarWidgetGroup>
<WaybarTemperatureWidget
min={50}
max={70}
variation={1}
frequency={7000 + randomMinMax(-100, 100)}
/>
<Responsive minScreenWidth={1320}>
<WaybarWidgetGroup>
<WaybarTemperatureWidget
min={50}
max={70}
variation={1}
frequency={7000 + randomMinMax(-100, 100)}
/>
<WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
</WaybarWidgetGroup>
<WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup>
<WaybarBrightnessWidget />
<WaybarVolumeWidget />
<WaybarMicrophoneWidget />
</WaybarWidgetGroup>
<Responsive minScreenWidth={970}>
<WaybarWidgetGroup>
<WaybarBrightnessWidget />
<WaybarVolumeWidget />
<WaybarMicrophoneWidget />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup>
<WaybarTrayWidget />
<WaybarWeatherWidget />
<WaybarToggleThemeWidget />
</WaybarWidgetGroup>
<Responsive minScreenWidth={475}>
<WaybarWidgetGroup>
<WaybarTrayWidget />
<WaybarWeatherWidget />
<WaybarToggleThemeWidget />
</WaybarWidgetGroup>
</Responsive>
</div>
</div>
);