Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kenprogrammer's avatar

InertiaJS: CSS Styles applicable only to Admin Panel(with Sidebar)

Supposing I've this code in app.blade.php

 <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Simple Sidebar - Start Bootstrap Template</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
    </head>

The styles.css is NOT applicable to Login component(Not part of Admin Panel). It's only used on Admin panel. Also there's so much code I cannot scope to layout component.

How can I prevent the login component from applying styles on this file?

Disclaimer: If look at official examples it appears easy since they're using Tailwind CSS which is inline CSS. But with bootstrap it seems to be so difficult due global styles.

0 likes
11 replies
iftekhs's avatar
iftekhs
3 years ago
Best Answer
Level 13

You can simply create a whole new page for login without extending the app layout and without the link to styles.css so that the styles of styles.css don't get applied.

or you could also conditionally add the link to styles.css if the page is not a login page like this ->

@if(request()->route()->getName() !== 'login')
<link href="css/styles.css" rel="stylesheet" />
@endif

You need to give a name to that login route in order for this to compare you can also compare the URL of the page using request()->url()

1 like
kenprogrammer's avatar

@iftekhs If I'm to go with option 1 creating a separate page for login. How will it work since entry point for all the components is app.blade.php?

kenprogrammer's avatar

@iftekhs That's if I create another blade to load login page and the admin panel to use app.blade.php

iftekhs's avatar

@kenprogrammer Sorry but I'm not actually getting what you are trying to say but can't you use the second option of conditionally adding the styles?

kenprogrammer's avatar

@iftekhs Yes I opted for the second option but i can't add navigation on layout component. I ve to import partials like this for every component.

StudentsList.svelte

<script>
  import Layout from '@/Shared/Layout.svelte'
  import Sidebar from '@/Shared/Sidebar.svelte'
  import Topbar from '@/Shared/Topbar.svelte'
  
  export let students = []
  console.log("Students: "+students);
</script>

<svelte:head>
  <title>Students List</title>
</svelte:head>

<Layout>
<div class="d-flex" id="wrapper">
  <!-- Sidebar-->
  <Sidebar/>
  <!-- Page content wrapper-->
  <div id="page-content-wrapper">
      <!-- Top navigation-->
      <Topbar/>
      <!-- Page content-->
      <div class="container-fluid">
          <h1 class="mt-4">Students List</h1>          
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Class Name</th>
              </tr>
            </thead>
            <tbody>
              {#each students as student (student.id)}
              <tr>
                <td>{student.first_name}</td>
                <td>{student.last_name}</td>
                <td>{student.class_name}</td>
              </tr>
              {/each}
            </tbody>
          </table>
      </div>
  </div>
</div>
</Layout>

All I wanted is to put sidebar and topbar on layout component but this is ok too.

Thanks for your time

iftekhs's avatar

@kenprogrammer So you need the layout for admin and also need the login component there and your issue is admin styles overwrites the login component styles right?

iftekhs's avatar

@kenprogrammer Then for hiding the sidebar and topbar render the components for the sidebar and topbar conditionally and you need to make sure that your login component styles do not get overwritten by your admin styles so you need to make the specificity of your login components styles higher than admin panels styles or just use different classes.

1 like

Please or to participate in this conversation.