{"id":13759101,"url":"https://github.com/jan-heise/responsive-navbar-with-dropdown","last_synced_at":"2025-05-10T09:31:47.486Z","repository":{"id":42908232,"uuid":"250548915","full_name":"jan-heise/responsive-navbar-with-dropdown","owner":"jan-heise","description":"A responsive navbar with Dropdowns using AlpineJS and Heroicons build in the TailwindCSS Playground","archived":true,"fork":false,"pushed_at":"2022-12-05T16:13:01.000Z","size":565,"stargazers_count":115,"open_issues_count":15,"forks_count":34,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-04T13:02:38.945Z","etag":null,"topics":["alpine","alpinejs","bar","dropdowns","nav","navbar","tailwind","tailwindcss","tailwindcss-playground"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jan-heise.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/cricksu"]}},"created_at":"2020-03-27T13:59:55.000Z","updated_at":"2024-06-14T11:10:06.000Z","dependencies_parsed_at":"2023-01-24T06:01:17.361Z","dependency_job_id":null,"html_url":"https://github.com/jan-heise/responsive-navbar-with-dropdown","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-heise%2Fresponsive-navbar-with-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-heise%2Fresponsive-navbar-with-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-heise%2Fresponsive-navbar-with-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-heise%2Fresponsive-navbar-with-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jan-heise","download_url":"https://codeload.github.com/jan-heise/responsive-navbar-with-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224940791,"owners_count":17395758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpine","alpinejs","bar","dropdowns","nav","navbar","tailwind","tailwindcss","tailwindcss-playground"],"created_at":"2024-08-03T13:00:46.398Z","updated_at":"2024-11-16T16:30:29.025Z","avatar_url":"https://github.com/jan-heise.png","language":"HTML","funding_links":["https://www.paypal.me/cricksu"],"categories":["HTML"],"sub_categories":[],"readme":"# Responsive Navbar with Dropdown\n#### Based on the TailwindCSS Playground\n\nA responsive navbar with dropdowns using [AlpineJS](https://github.com/alpinejs/alpine) and [Heroicons](https://github.com/refactoringui/heroicons) build in the [TailwindCSS Playground](https://github.com/tailwindcss/playground)\n\nThe Tailwind Config got extended by the following line to include system colorscheme support\n```\nscreens: {\n    'dark-mode': {'raw': '(prefers-color-scheme: dark)'},\n},\n```\n\nThis enables the ```dark-mode``` variant which you can use to declare classes for the dark mode of your browser / os. \nIt is possible to chain variants for example ```dark-mode``` and ```hover```:\n\n```\n\u003cdiv class=\"block h-64 w-64 bg-gray-100 dark-mode:bg-gray-900 hover:bg-gray-200 dark-mode:hover:bg-gray-800\"\u003e\u003c/div\u003e\n```\n\n\n\n## Features\n- Fully Responsive\n- Prefers-Color-Scheme Support\n- Side- and Topbar\n\n## Changelog\n11th of April 2020 - Added Sidebar (./public/sidebar.html) and moved Navbar to seperate file (.public/navbar.html)\n\n09th of April 2020 - Completly redone the Navbar to remove tailwindUI component and to remove duplicate divs\n\n## Structure\n\nNavbar: [./public/navbar.html](https://github.com/jan-heise/responsive-navbar-with-dropdown/blob/master/public/navbar.html)\n\nSidebar: [./public/sidebar.html](https://github.com/jan-heise/responsive-navbar-with-dropdown/blob/master/public/sidebar.html)\n\n## Preview\nhttps://responsive-navbar-with-dropdown.netlify.com/\n\n## To get started:\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/jan-heise/responsive-navbar-with-dropdown responsive-navbar-with-dropdown\n\n    cd responsive-navbar-with-dropdown\n    ```\n\nInstructions from the official [TailwindCSS Playground Repo](https://github.com/tailwindcss/playground)\n\n2. Install the dependencies:\n\n    ```bash\n    # Using npm\n    npm install\n\n    # Using Yarn\n    yarn\n    ```\n\n3. Start the development server:\n\n    ```bash\n    # Using npm\n    npm run serve\n\n    # Using Yarn\n    yarn run serve\n    ```\n\n    Now you should be able to see the project running at localhost:8080.\n\n4. Open `public/index.html` in your editor and start experimenting!\n\n## Building for production\n\nEven though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.\n\nTo build an optimized version of your CSS, simply run:\n\n```bash\n# Using npm\nnpm run production\n\n# Using Yarn\nyarn run production\n```\n\nAfter that's done, check out `./public/build/tailwind.css` to see the optimized output.\n\n## Build with\n- [TailwindCSS](https://tailwindcss.com) and the [Tailwind Playground](https://github.com/tailwindcss/playground)\n- [AlpineJS](https://github.com/alpinejs/alpine)\n- [Heroicons](https://github.com/refactoringui/heroicons)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjan-heise%2Fresponsive-navbar-with-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjan-heise%2Fresponsive-navbar-with-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjan-heise%2Fresponsive-navbar-with-dropdown/lists"}