ondrejlosensky / dynamic-island-header

Simple header that looks like Apple's dynamic Island on iPhones

Dynamic Header

Simple web application made with React.js styled with TailwindCSS. Instead of clasical header I have created this one that looks like Apple's dynamic island on new iPhones. It expands when user hovers over it and displays additional information or controls. I have also added animations, shortcuts, styling and login form, that doesnt have the database implemented yet.

Darkmode shortcut

CTRL + CMD + T - MacOS

CTRL + B - Windows

Installation

You can easily implement this into your project by coyping the component and then just styling the whole component with given options. Also you need to have TailwindCSS installed for it to work

<div className="pt-4 sticky top-0 z-10 ">
    <DynamicIsland/>
</div>

You can find the source code for DynamicIsland here

Preview

Light mode

Dark mode

Features

• Dynamic island header
• Dark mode
• Keyboard shortcut to toggle on/off dark mode
• Scroll Progress bar (you can find source code for it here)
• scroll down button
• login and register form (only styling)

Bugs

• The header displays all hidden element when hovering away from browser (for example to menubar)

License

This project is licensed under the Apache license 2.0 Link to LICENSE.md

Authors

• Ondrej Losensky

Languages & Tools Used

• Link to React: https://reactjs.org/
• Link to Tailwind CSS: https://tailwindcss.com/
• Link to Icons8.com https://icons8.com/

Project Creation Date

• Created on: 19.2.2024

Version

1.1.2.